diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 759f751b88..14d2f74504 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -182,6 +182,75 @@ const timelineLink = computed((): RouteLocationRaw | null => {
   return packageTimelineRoute(props.pkg.name, props.resolvedVersion)
 })
 
+const navLinks = computed(() => {
+  const links: {
+    key: string
+    label: string
+    to: RouteLocationRaw
+    ariaKeyshortcuts?: string
+    title?: string
+    class?: string
+  }[] = []
+
+  if (mainLink.value) {
+    links.push({
+      key: 'main',
+      label: $t('package.links.main'),
+      to: mainLink.value,
+      ariaKeyshortcuts: 'm',
+      class: 'lowercase',
+    })
+  }
+
+  if (docsLink.value) {
+    links.push({
+      key: 'docs',
+      label: $t('package.links.docs'),
+      to: docsLink.value,
+      ariaKeyshortcuts: 'd',
+    })
+  }
+
+  if (codeLink.value) {
+    links.push({
+      key: 'code',
+      label: $t('package.links.code'),
+      to: codeLink.value,
+      ariaKeyshortcuts: '.',
+    })
+  }
+
+  if (diffLink.value) {
+    links.push({
+      key: 'diff',
+      label: $t('compare.compare_versions'),
+      to: diffLink.value,
+      ariaKeyshortcuts: 'f',
+      title: $t('compare.compare_versions_title'),
+    })
+  }
+
+  if (changelogLink.value) {
+    links.push({
+      key: 'changelog',
+      label: $t('package.links.changelog'),
+      to: changelogLink.value,
+      ariaKeyshortcuts: '-',
+    })
+  }
+
+  if (timelineLink.value) {
+    links.push({
+      key: 'timeline',
+      label: $t('package.links.timeline'),
+      to: timelineLink.value,
+      ariaKeyshortcuts: 't',
+    })
+  }
+
+  return links
+})
+
 useShortcuts({
   '.': () => codeLink.value,
   'm': () => mainLink.value,
@@ -308,69 +377,14 @@ useShortcuts({
         </div>
       </div>
       <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
-      <nav
-        v-if="resolvedVersion"
+      <TabLinks
+        v-if="resolvedVersion && navLinks.length > 0"
         :aria-label="$t('package.navigation')"
-        class="flex gap-4 me-auto -mb-px max-w-full overflow-x-auto"
+        :links="navLinks"
+        :active-key="page"
         :style="navExtraOffsetStyle"
         :class="$style.packageNav"
-      >
-        <LinkBase
-          v-if="mainLink"
-          :to="mainLink"
-          aria-keyshortcuts="m"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase focus-visible:[outline-offset:-2px]!"
-          :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.main') }}
-        </LinkBase>
-        <LinkBase
-          v-if="docsLink"
-          :to="docsLink"
-          aria-keyshortcuts="d"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.docs') }}
-        </LinkBase>
-        <LinkBase
-          v-if="codeLink"
-          :to="codeLink"
-          aria-keyshortcuts="."
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.code') }}
-        </LinkBase>
-        <LinkBase
-          v-if="diffLink"
-          :to="diffLink"
-          :title="$t('compare.compare_versions_title')"
-          aria-keyshortcuts="f"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('compare.compare_versions') }}
-        </LinkBase>
-        <LinkBase
-          v-if="changelogLink"
-          :to="changelogLink"
-          aria-keyshortcuts="-"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'changelog' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.changelog') }}
-        </LinkBase>
-        <LinkBase
-          v-if="timelineLink"
-          :to="timelineLink"
-          aria-keyshortcuts="t"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'timeline' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.timeline') }}
-        </LinkBase>
-      </nav>
+      />
     </div>
   </div>
 </template>
diff --git a/app/components/Profile/AccountsList.vue b/app/components/Profile/AccountsList.vue
new file mode 100644
index 0000000000..9b3d34e372
--- /dev/null
+++ b/app/components/Profile/AccountsList.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+export type AccountEntry = {
+  account?: {
+    uri?: string
+    handle?: string
+    actor?: {
+      handle?: string
+      name?: string
+      displayName?: string
+      description?: string
+    }
+  }
+}
+
+defineProps<{
+  entries: AccountEntry[] | null
+  status: string
+  error?: unknown
+  emptyLabel: string
+}>()
+</script>
+
+<template>
+  <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <SkeletonBlock v-for="i in 4" :key="i" class="h-20 rounded-lg" />
+  </div>
+  <div v-else-if="status === 'error' || error">
+    <p>{{ $t('common.error') }}</p>
+  </div>
+  <template v-else-if="entries?.length">
+    <p class="text-sm p-4 bg-badge-orange/10 border border-badge-orange/40 rounded-lg">
+      {{ $t('profile.account.warning') }}
+    </p>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+      <div
+        v-for="(entry, index) in entries"
+        :key="entry.account?.uri || `entry-${index}`"
+        class="p-4 bg-bg-subtle border border-border rounded-lg decoration-none"
+      >
+        <p class="font-mono font-medium truncate">
+          {{
+            entry.account?.actor?.displayName ||
+            entry.account?.actor?.name ||
+            entry.account?.actor?.handle ||
+            entry.account?.handle ||
+            $t('profile.related_accounts.unknown')
+          }}
+        </p>
+        <p v-if="entry.account?.handle" class="text-fg-muted text-sm truncate">
+          @{{ entry.account?.handle }}
+        </p>
+        <p v-if="entry.account?.actor?.description" class="text-sm mt-1 line-clamp-2">
+          {{ entry.account?.actor?.description }}
+        </p>
+      </div>
+    </div>
+  </template>
+  <div v-else class="p-4 bg-bg-subtle border border-border rounded-lg text-fg-muted">
+    {{ emptyLabel }}
+  </div>
+</template>
diff --git a/app/components/Profile/AddKnownAccountDialog.client.vue b/app/components/Profile/AddKnownAccountDialog.client.vue
new file mode 100644
index 0000000000..bfc66a8bcf
--- /dev/null
+++ b/app/components/Profile/AddKnownAccountDialog.client.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { FetchError } from 'ofetch'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+const props = defineProps<{
+  identity: string
+}>()
+
+const emit = defineEmits<{
+  added: []
+}>()
+
+const { user } = useAtproto()
+const modal = useModal('add-known-account-modal')
+
+const handleInput = ref('')
+const accountType = ref<'project' | 'user' | 'organisation' | 'collective'>('user')
+const isSubmitting = ref(false)
+const formError = ref<string | null>(null)
+
+const accountTypeItems = computed(() => [
+  { label: $t('profile.known_accounts.add_dialog.type_user'), value: 'user' as const },
+  { label: $t('profile.known_accounts.add_dialog.type_project'), value: 'project' as const },
+  {
+    label: $t('profile.known_accounts.add_dialog.type_organisation'),
+    value: 'organisation' as const,
+  },
+  { label: $t('profile.known_accounts.add_dialog.type_collective'), value: 'collective' as const },
+])
+
+function resetForm() {
+  handleInput.value = ''
+  accountType.value = 'user'
+  formError.value = null
+  isSubmitting.value = false
+}
+
+function open() {
+  resetForm()
+  modal.open()
+}
+
+function close() {
+  modal.close()
+}
+
+function resolveFormError(statusCode?: number, message?: string): string {
+  if (statusCode === 409 || message === 'Account already exists') {
+    return $t('profile.known_accounts.add_dialog.duplicate')
+  }
+  if (statusCode === 404 || message === 'Actor profile not found') {
+    return $t('profile.known_accounts.add_dialog.not_found')
+  }
+  if (statusCode === 400 && message === 'Cannot add your own account') {
+    return $t('profile.known_accounts.add_dialog.self')
+  }
+  return $t('common.error')
+}
+
+async function handleSubmit() {
+  const handle = handleInput.value.replace(/^@/, '').trim()
+  if (!handle || isSubmitting.value) return
+
+  isSubmitting.value = true
+  formError.value = null
+
+  try {
+    await $fetch(`/api/social/profile/${props.identity}/accounts`, {
+      method: 'POST',
+      body: {
+        handle,
+        type: accountType.value,
+      },
+    })
+
+    emit('added')
+    close()
+  } catch (error) {
+    const fetchError = error as FetchError<{ message?: string }>
+    formError.value = resolveFormError(fetchError.statusCode, fetchError.data?.message)
+
+    try {
+      await handleAuthError(fetchError, user.value?.handle)
+    } catch {
+      // Error message already set for non-auth failures.
+    }
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <Modal
+    id="add-known-account-modal"
+    :modal-title="$t('profile.known_accounts.add_dialog.title')"
+    :modal-subtitle="$t('profile.known_accounts.add_dialog.description')"
+    class="max-w-md"
+  >
+    <form class="space-y-4" @submit.prevent="handleSubmit">
+      <div>
+        <label
+          for="known-account-handle"
+          class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+        >
+          {{ $t('profile.known_accounts.add_dialog.handle_label') }}
+        </label>
+        <InputBase
+          id="known-account-handle"
+          v-model="handleInput"
+          type="text"
+          name="known-account-handle"
+          :placeholder="$t('profile.known_accounts.add_dialog.handle_placeholder')"
+          autocomplete="username"
+          required
+          class="w-full min-w-25"
+        />
+      </div>
+
+      <SelectField
+        id="known-account-type"
+        v-model="accountType"
+        name="known-account-type"
+        :label="$t('profile.known_accounts.add_dialog.type_label')"
+        block
+        :items="accountTypeItems"
+      />
+
+      <p v-if="formError" class="text-sm text-badge-orange" role="alert">
+        {{ formError }}
+      </p>
+
+      <div class="flex gap-3 justify-end">
+        <ButtonBase type="button" @click="close">
+          {{ $t('common.cancel') }}
+        </ButtonBase>
+        <ButtonBase variant="primary" type="submit" :disabled="!handleInput.trim() || isSubmitting">
+          {{ $t('profile.known_accounts.add_dialog.submit') }}
+        </ButtonBase>
+      </div>
+    </form>
+  </Modal>
+</template>
diff --git a/app/components/Profile/AddRelatedAccountDialog.client.vue b/app/components/Profile/AddRelatedAccountDialog.client.vue
new file mode 100644
index 0000000000..b829d6d444
--- /dev/null
+++ b/app/components/Profile/AddRelatedAccountDialog.client.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { FetchError } from 'ofetch'
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+type RelatedAccountKind = 'ecosystem' | 'sponsors' | 'nested' | 'role'
+
+type RelatedAccountDialogTranslations = {
+  title: string
+  description: string
+  add: string
+  duplicate: string
+  noKnownAccounts: string
+  allAdded: string
+  unknownAccount: string
+}
+
+const props = defineProps<{
+  identity: string
+  kind: RelatedAccountKind
+  entries: AccountEntry[] | null
+  roleRkey?: string
+  translations: RelatedAccountDialogTranslations
+}>()
+
+const emit = defineEmits<{
+  added: []
+}>()
+
+const { user } = useAtproto()
+
+const modalId = `add-related-account-modal-${props.kind}${props.roleRkey ? `-${props.roleRkey}` : ''}`
+const modal = useModal(modalId)
+
+const postUrl = computed(() => {
+  const base = `/api/social/profile/${props.identity}`
+  if (props.kind === 'ecosystem') return `${base}/ecosystem`
+  if (props.kind === 'sponsors') return `${base}/sponsors`
+  if (props.kind === 'nested') return `${base}/nested`
+  return `${base}/roles/${props.roleRkey}`
+})
+
+const duplicateMessages: Record<RelatedAccountKind, string> = {
+  ecosystem: 'Ecosystem connection already exists',
+  sponsors: 'Sponsor connection already exists',
+  nested: 'Nested connection already exists',
+  role: 'Role assignment already exists',
+}
+
+const {
+  data: knownAccounts,
+  status: knownAccountsStatus,
+  error: knownAccountsError,
+  execute: loadKnownAccounts,
+} = useLazyFetch<NonNullable<AccountEntry['account']>[]>(
+  () => `/api/social/profile/${props.identity}/accounts`,
+  {
+    immediate: false,
+    default: () => [],
+  },
+)
+
+const addingAccountUri = ref<string | null>(null)
+const formError = ref<string | null>(null)
+
+const existingAccountUris = computed(
+  () =>
+    new Set(
+      (props.entries ?? [])
+        .map(entry => entry.account?.uri)
+        .filter((uri): uri is string => Boolean(uri)),
+    ),
+)
+
+const availableAccounts = computed(() =>
+  (knownAccounts.value ?? []).filter(
+    account => account.uri && !existingAccountUris.value.has(account.uri),
+  ),
+)
+
+function accountLabel(account: NonNullable<AccountEntry['account']>): string {
+  return (
+    account.actor?.displayName ||
+    account.actor?.name ||
+    account.actor?.handle ||
+    account.handle ||
+    props.translations.unknownAccount
+  )
+}
+
+function open() {
+  formError.value = null
+  addingAccountUri.value = null
+  loadKnownAccounts()
+  modal.open()
+}
+
+function close() {
+  modal.close()
+}
+
+function resolveFormError(statusCode?: number, message?: string): string {
+  if (statusCode === 409 || message === duplicateMessages[props.kind]) {
+    return props.translations.duplicate
+  }
+  return $t('common.error')
+}
+
+async function addAccount(accountUri: string) {
+  if (addingAccountUri.value) return
+
+  addingAccountUri.value = accountUri
+  formError.value = null
+
+  try {
+    await $fetch(postUrl.value, {
+      method: 'POST',
+      body: { accountUri },
+    })
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    emit('added')
+  } catch (error) {
+    const fetchError = error as FetchError<{ message?: string }>
+    formError.value = resolveFormError(fetchError.statusCode, fetchError.data?.message)
+
+    try {
+      await handleAuthError(fetchError, user.value?.handle)
+    } catch {
+      // Error message already set for non-auth failures.
+    }
+  } finally {
+    addingAccountUri.value = null
+  }
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <Modal
+    :id="modalId"
+    :modal-title="translations.title"
+    :modal-subtitle="translations.description"
+    class="sm:max-w-lg"
+  >
+    <div v-if="knownAccountsStatus === 'pending'" class="space-y-3">
+      <SkeletonBlock v-for="i in 3" :key="i" class="h-16 rounded-lg" />
+    </div>
+
+    <div v-else-if="knownAccountsStatus === 'error' || knownAccountsError">
+      <p class="text-sm text-badge-orange">{{ $t('common.error') }}</p>
+    </div>
+
+    <div
+      v-else-if="!knownAccounts?.length"
+      class="p-4 bg-bg-subtle border border-border rounded-lg text-fg-muted text-sm"
+    >
+      {{ translations.noKnownAccounts }}
+    </div>
+
+    <div
+      v-else-if="!availableAccounts.length"
+      class="p-4 bg-bg-subtle border border-border rounded-lg text-fg-muted text-sm"
+    >
+      {{ translations.allAdded }}
+    </div>
+
+    <ul v-else class="space-y-2 max-h-[min(24rem,60vh)] overflow-y-auto">
+      <li
+        v-for="account in availableAccounts"
+        :key="account.uri"
+        class="flex items-center gap-3 p-3 bg-bg-subtle border border-border rounded-lg"
+      >
+        <div class="min-w-0 flex-1">
+          <p class="font-mono text-sm font-medium truncate">
+            {{ accountLabel(account) }}
+          </p>
+          <p v-if="account.handle" class="text-fg-muted text-xs truncate">@{{ account.handle }}</p>
+        </div>
+        <ButtonBase
+          variant="primary"
+          size="sm"
+          :disabled="addingAccountUri !== null"
+          @click="addAccount(account.uri!)"
+        >
+          {{ translations.add }}
+        </ButtonBase>
+      </li>
+    </ul>
+
+    <p v-if="formError" class="mt-4 text-sm text-badge-orange" role="alert">
+      {{ formError }}
+    </p>
+
+    <div class="mt-6 flex justify-end">
+      <ButtonBase type="button" @click="close">
+        {{ $t('common.close') }}
+      </ButtonBase>
+    </div>
+  </Modal>
+</template>
diff --git a/app/components/Profile/AddRoleDialog.client.vue b/app/components/Profile/AddRoleDialog.client.vue
new file mode 100644
index 0000000000..74e275b35e
--- /dev/null
+++ b/app/components/Profile/AddRoleDialog.client.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { FetchError } from 'ofetch'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+const props = defineProps<{
+  identity: string
+}>()
+
+const emit = defineEmits<{
+  created: [uri: string]
+}>()
+
+const { user } = useAtproto()
+const modal = useModal('add-role-modal')
+
+const nameInput = ref('')
+const descriptionInput = ref('')
+const colorInput = ref('')
+const isSubmitting = ref(false)
+const formError = ref<string | null>(null)
+
+function resetForm() {
+  nameInput.value = ''
+  descriptionInput.value = ''
+  colorInput.value = ''
+  formError.value = null
+  isSubmitting.value = false
+}
+
+function open() {
+  resetForm()
+  modal.open()
+}
+
+function close() {
+  modal.close()
+}
+
+function resolveFormError(statusCode?: number, message?: string): string {
+  if (statusCode === 400 && message === 'Role name not provided') {
+    return $t('profile.roles.create_dialog.name_required')
+  }
+  if (statusCode === 400 && message === 'Invalid role color') {
+    return $t('profile.roles.create_dialog.invalid_color')
+  }
+  return $t('common.error')
+}
+
+async function handleSubmit() {
+  const name = nameInput.value.trim()
+  if (!name || isSubmitting.value) return
+
+  isSubmitting.value = true
+  formError.value = null
+
+  try {
+    const result = await $fetch<{ uri: string }>(`/api/social/profile/${props.identity}/roles`, {
+      method: 'POST',
+      body: {
+        name,
+        description: descriptionInput.value.trim() || undefined,
+        color: colorInput.value.trim() || undefined,
+      },
+    })
+
+    emit('created', result.uri)
+    close()
+  } catch (error) {
+    const fetchError = error as FetchError<{ message?: string }>
+    formError.value = resolveFormError(fetchError.statusCode, fetchError.data?.message)
+
+    try {
+      await handleAuthError(fetchError, user.value?.handle)
+    } catch {
+      // Error message already set for non-auth failures.
+    }
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <Modal
+    id="add-role-modal"
+    :modal-title="$t('profile.roles.create_dialog.title')"
+    :modal-subtitle="$t('profile.roles.create_dialog.description')"
+    class="max-w-md"
+  >
+    <form class="space-y-4" @submit.prevent="handleSubmit">
+      <div>
+        <label for="role-name" class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5">
+          {{ $t('profile.roles.create_dialog.name_label') }}
+        </label>
+        <InputBase
+          id="role-name"
+          v-model="nameInput"
+          type="text"
+          name="role-name"
+          :placeholder="$t('profile.roles.create_dialog.name_placeholder')"
+          required
+          class="w-full min-w-25"
+        />
+      </div>
+
+      <div>
+        <label
+          for="role-description"
+          class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+        >
+          {{ $t('profile.roles.create_dialog.description_label') }}
+        </label>
+        <textarea
+          id="role-description"
+          v-model="descriptionInput"
+          name="role-description"
+          rows="3"
+          :placeholder="$t('profile.roles.create_dialog.description_placeholder')"
+          class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+        />
+      </div>
+
+      <div>
+        <label
+          for="role-color"
+          class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+        >
+          {{ $t('profile.roles.create_dialog.color_label') }}
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="role-color"
+            v-model="colorInput"
+            type="text"
+            name="role-color"
+            placeholder="#6366f1"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70) flex-1"
+          />
+        </div>
+      </div>
+
+      <p v-if="formError" class="text-sm text-badge-orange" role="alert">
+        {{ formError }}
+      </p>
+
+      <div class="flex gap-3 justify-end">
+        <ButtonBase type="button" @click="close">
+          {{ $t('common.cancel') }}
+        </ButtonBase>
+        <ButtonBase variant="primary" type="submit" :disabled="!nameInput.trim() || isSubmitting">
+          {{ $t('profile.roles.create_dialog.submit') }}
+        </ButtonBase>
+      </div>
+    </form>
+  </Modal>
+</template>
diff --git a/app/components/Profile/Header.vue b/app/components/Profile/Header.vue
new file mode 100644
index 0000000000..cd30b7048d
--- /dev/null
+++ b/app/components/Profile/Header.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { getSafeHttpUrl } from '#shared/utils/url'
+import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+
+const props = withDefaults(
+  defineProps<{
+    profile: NPMXProfile
+    identity: string
+    activeTab: string
+    canEdit?: boolean
+  }>(),
+  {
+    canEdit: false,
+  },
+)
+
+const emit = defineEmits<{
+  updateProfile: [profile: NPMXProfile]
+}>()
+
+const isEditing = ref(false)
+const displayNameInput = ref('')
+const descriptionInput = ref('')
+const websiteInput = ref('')
+const isUpdateProfileActionPending = ref(false)
+
+const safeProfileWebsiteUrl = computed(() => getSafeHttpUrl(props.profile.website))
+
+watchEffect(() => {
+  if (!isEditing.value) return
+  displayNameInput.value = props.profile.displayName || ''
+  descriptionInput.value = props.profile.description || ''
+  websiteInput.value = props.profile.website || ''
+})
+
+function startEditing() {
+  if (!props.canEdit) return
+  isEditing.value = true
+}
+
+function cancelEditing() {
+  isEditing.value = false
+}
+
+async function updateProfile() {
+  if (!props.canEdit || !displayNameInput.value) {
+    return
+  }
+
+  isUpdateProfileActionPending.value = true
+  const currentProfile = { ...props.profile }
+
+  const optimisticProfile: NPMXProfile = {
+    ...props.profile,
+    displayName: displayNameInput.value,
+    description: descriptionInput.value || undefined,
+    website: websiteInput.value || undefined,
+    recordExists: true,
+  }
+  emit('updateProfile', optimisticProfile)
+
+  try {
+    const result = await updateProfileUtil(props.identity, {
+      displayName: displayNameInput.value,
+      description: descriptionInput.value || undefined,
+      website: websiteInput.value || undefined,
+    })
+
+    if (result.success) {
+      isEditing.value = false
+    } else {
+      emit('updateProfile', currentProfile)
+    }
+  } catch {
+    emit('updateProfile', currentProfile)
+  } finally {
+    isUpdateProfileActionPending.value = false
+  }
+}
+
+const profileTabs = computed(() => [
+  {
+    key: 'likes',
+    label: $t('profile.likes'),
+    to: `/profile/${props.identity}`,
+  },
+  {
+    key: 'sponsors',
+    label: $t('profile.sponsors.title'),
+    to: `/profile/${props.identity}/sponsors`,
+  },
+  {
+    key: 'ecosystem',
+    label: $t('profile.ecosystem.title'),
+    to: `/profile/${props.identity}/ecosystem`,
+  },
+  {
+    key: 'nested',
+    label: $t('profile.nested.title'),
+    to: `/profile/${props.identity}/nested`,
+  },
+  {
+    key: 'roles',
+    label: $t('profile.roles.title'),
+    to: `/profile/${props.identity}/roles`,
+  },
+  {
+    key: 'known-accounts',
+    label: $t('profile.known_accounts.title'),
+    to: `/profile/${props.identity}/known-accounts`,
+  },
+])
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    const commands: CommandPaletteContextCommandInput[] = []
+
+    if (props.canEdit && !isEditing.value) {
+      commands.push({
+        id: 'profile-edit',
+        group: 'actions',
+        label: $t('common.edit'),
+        keywords: [props.profile.handle ?? props.identity, $t('profile.display_name')],
+        iconClass: 'i-lucide:square-pen',
+        action: () => {
+          startEditing()
+        },
+      })
+    }
+
+    if (safeProfileWebsiteUrl.value) {
+      commands.push({
+        id: 'profile-website',
+        group: 'links',
+        label: $t('profile.website'),
+        keywords: [props.profile.website ?? '', props.profile.handle ?? props.identity],
+        iconClass: 'i-lucide:link',
+        href: safeProfileWebsiteUrl.value,
+      })
+    }
+
+    return commands
+  }),
+)
+
+defineExpose({
+  startEditing,
+})
+</script>
+
+<template>
+  <header class="mb-8 pb-8">
+    <form v-if="isEditing" class="flex flex-col flex-wrap gap-4" @submit.prevent="updateProfile">
+      <label for="displayName" class="text-sm flex flex-col gap-2">
+        {{ $t('profile.display_name') }}
+        <input
+          required
+          name="displayName"
+          type="text"
+          class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          v-model="displayNameInput"
+        />
+      </label>
+      <label for="description" class="text-sm flex flex-col gap-2">
+        {{ $t('profile.description') }}
+        <input
+          name="description"
+          type="text"
+          :placeholder="$t('profile.no_description')"
+          v-model="descriptionInput"
+          class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+        />
+      </label>
+      <label for="website" class="text-sm flex flex-col gap-2">
+        {{ $t('profile.website') }}
+        <input
+          name="website"
+          type="url"
+          :placeholder="$t('profile.website_placeholder')"
+          v-model="websiteInput"
+          class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+        />
+      </label>
+      <div class="flex gap-4 items-center font-mono text-sm">
+        <h2>@{{ profile.handle || identity }}</h2>
+        <ButtonBase type="button" @click="cancelEditing">
+          {{ $t('common.cancel') }}
+        </ButtonBase>
+        <ButtonBase variant="primary" :disabled="isUpdateProfileActionPending" type="submit">
+          {{ $t('common.save') }}
+        </ButtonBase>
+      </div>
+    </form>
+
+    <div v-else class="flex flex-col flex-wrap gap-4">
+      <h1 v-if="profile.displayName" class="font-mono text-2xl sm:text-3xl font-medium">
+        {{ profile.displayName }}
+      </h1>
+      <p v-if="profile.description">{{ profile.description }}</p>
+      <div class="flex gap-4 items-center font-mono text-sm">
+        <h2>@{{ profile.handle || identity }}</h2>
+        <LinkBase
+          v-if="safeProfileWebsiteUrl"
+          :to="safeProfileWebsiteUrl"
+          classicon="i-lucide:link"
+        >
+          {{ profile.website }}
+        </LinkBase>
+        <ButtonBase v-if="canEdit" class="hidden sm:inline-flex" @click="startEditing">
+          {{ $t('common.edit') }}
+        </ButtonBase>
+      </div>
+    </div>
+  </header>
+
+  <TabLinks :aria-label="$t('profile.tabs')" :links="profileTabs" :active-key="activeTab" />
+  <span class="block h-px w-full bg-border" />
+</template>
diff --git a/app/components/Tab/Links.vue b/app/components/Tab/Links.vue
new file mode 100644
index 0000000000..e6d87672cb
--- /dev/null
+++ b/app/components/Tab/Links.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+defineOptions({ name: 'TabLinks', inheritAttrs: false })
+
+type TabLink = {
+  key: string
+  label: string
+  to: RouteLocationRaw
+  title?: string
+  ariaKeyshortcuts?: string
+  class?: string
+  active?: boolean
+}
+
+const props = defineProps<{
+  links: TabLink[]
+  activeKey?: string
+}>()
+
+const attrs = useAttrs()
+
+function isLinkActive(link: TabLink): boolean {
+  if (link.active != null) return link.active
+  if (!props.activeKey) return false
+  return link.key === props.activeKey
+}
+</script>
+
+<template>
+  <nav class="flex gap-4 me-auto -mb-px max-w-full overflow-x-auto" v-bind="attrs">
+    <LinkBase
+      v-for="link in links"
+      :key="link.key"
+      :to="link.to"
+      :title="link.title"
+      :aria-keyshortcuts="link.ariaKeyshortcuts"
+      class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+      :class="[
+        link.class,
+        isLinkActive(link) ? 'border-accent text-accent!' : 'border-transparent',
+      ]"
+    >
+      {{ link.label }}
+    </LinkBase>
+  </nav>
+</template>
diff --git a/app/pages/profile/[identity]/ecosystem.vue b/app/pages/profile/[identity]/ecosystem.vue
new file mode 100644
index 0000000000..8f1242c175
--- /dev/null
+++ b/app/pages/profile/[identity]/ecosystem.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: ecosystem,
+  status: ecosystemStatus,
+  error: ecosystemError,
+  refresh: refreshEcosystem,
+} = await useLazyFetch<AccountEntry[]>(() => `/api/social/profile/${identity.value}/ecosystem`, {
+  default: () => [],
+})
+
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addRelatedAccountDialogRef = useTemplateRef('addRelatedAccountDialogRef')
+
+useSeoMeta({
+  title: () => `${identity.value} ecosystem - npmx`,
+  description: () => `Ecosystem accounts for ${identity.value}`,
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="ecosystem"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="canEdit" class="flex justify-end mb-4">
+        <ButtonBase
+          variant="primary"
+          classicon="i-lucide:plus"
+          @click="addRelatedAccountDialogRef?.open"
+        >
+          {{ $t('profile.ecosystem.add') }}
+        </ButtonBase>
+      </div>
+
+      <ProfileAccountsList
+        :entries="ecosystem"
+        :status="ecosystemStatus"
+        :error="ecosystemError"
+        :empty-label="$t('profile.ecosystem.empty')"
+      />
+    </section>
+
+    <ProfileAddRelatedAccountDialog
+      v-if="canEdit"
+      ref="addRelatedAccountDialogRef"
+      kind="ecosystem"
+      :identity="identity"
+      :entries="ecosystem"
+      :translations="{
+        title: $t('profile.ecosystem.add_dialog.title'),
+        description: $t('profile.ecosystem.add_dialog.description'),
+        add: $t('profile.ecosystem.add_dialog.add'),
+        duplicate: $t('profile.ecosystem.add_dialog.duplicate'),
+        noKnownAccounts: $t('profile.ecosystem.add_dialog.no_known_accounts'),
+        allAdded: $t('profile.ecosystem.add_dialog.all_added'),
+        unknownAccount: $t('profile.related_accounts.unknown'),
+      }"
+      @added="refreshEcosystem"
+    />
+  </main>
+</template>
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 61ca0f69eb..97fe49c1df 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
-import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
-import { getSafeHttpUrl } from '#shared/utils/url'
-
 const route = useRoute('profile-identity')
 const identity = computed(() => route.params.identity)
 
@@ -26,58 +22,6 @@ if (!profile.value || profileError.value?.statusCode === 404) {
 }
 
 const { user, pending: userPending } = useAtproto()
-const isEditing = ref(false)
-const displayNameInput = ref()
-const descriptionInput = ref()
-const websiteInput = ref()
-const isUpdateProfileActionPending = ref(false)
-
-watchEffect(() => {
-  if (isEditing.value) {
-    if (profile) {
-      displayNameInput.value = profile.value.displayName
-      descriptionInput.value = profile.value.description
-      websiteInput.value = profile.value.website
-    }
-  }
-})
-
-async function updateProfile() {
-  if (!user.value?.handle || !displayNameInput.value) {
-    return
-  }
-
-  isUpdateProfileActionPending.value = true
-  const currentProfile = profile.value
-
-  // optimistic update
-  profile.value = {
-    displayName: displayNameInput.value,
-    description: descriptionInput.value || undefined,
-    website: websiteInput.value || undefined,
-    handle: profile.value.handle,
-    recordExists: true,
-  }
-
-  try {
-    const result = await updateProfileUtil(identity.value, {
-      displayName: displayNameInput.value,
-      description: descriptionInput.value || undefined,
-      website: websiteInput.value || undefined,
-    })
-
-    if (result.success) {
-      isEditing.value = false
-    } else {
-      profile.value = currentProfile
-    }
-
-    isUpdateProfileActionPending.value = false
-  } catch (e) {
-    profile.value = currentProfile
-    isUpdateProfileActionPending.value = false
-  }
-}
 
 const { data: likes, status } = useProfileLikes(identity)
 
@@ -95,51 +39,6 @@ const inviteUrl = computed(() => {
   const text = $t('profile.invite.compose_text', { handle: profile.value.handle })
   return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`
 })
-const safeProfileWebsiteUrl = computed(() => getSafeHttpUrl(profile.value.website))
-
-useCommandPaletteContextCommands(
-  computed((): CommandPaletteContextCommandInput[] => {
-    const commands: CommandPaletteContextCommandInput[] = []
-
-    if (user.value?.handle === profile.value.handle && !isEditing.value) {
-      commands.push({
-        id: 'profile-edit',
-        group: 'actions',
-        label: $t('common.edit'),
-        keywords: [profile.value.handle ?? identity.value, $t('profile.display_name')],
-        iconClass: 'i-lucide:square-pen',
-        action: () => {
-          isEditing.value = true
-        },
-      })
-    }
-
-    if (safeProfileWebsiteUrl.value) {
-      commands.push({
-        id: 'profile-website',
-        group: 'links',
-        label: $t('profile.website'),
-        keywords: [profile.value.website ?? '', profile.value.handle ?? identity.value],
-        iconClass: 'i-lucide:link',
-        href: safeProfileWebsiteUrl.value,
-      })
-    }
-
-    if (showInviteSection.value) {
-      commands.push({
-        id: 'profile-share-invite',
-        group: 'actions',
-        label: $t('profile.invite.share_button'),
-        keywords: [profile.value.handle ?? identity.value, $t('profile.invite.message')],
-        iconClass: 'i-lucide:send',
-        href: inviteUrl.value,
-      })
-    }
-
-    return commands
-  }),
-)
-
 useSeoMeta({
   title: () => $t('profile.seo_title', { handle: identity.value }),
   description: () => $t('profile.seo_description', { handle: identity.value }),
@@ -161,86 +60,15 @@ defineOgImage(
 
 <template>
   <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
-    <!-- Header -->
-    <header class="mb-8 pb-8 border-b border-border">
-      <!-- Editing Profile -->
-      <form v-if="isEditing" class="flex flex-col flex-wrap gap-4" @submit.prevent="updateProfile">
-        <label for="displayName" class="text-sm flex flex-col gap-2">
-          {{ $t('profile.display_name') }}
-          <input
-            required
-            name="displayName"
-            type="text"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-            v-model="displayNameInput"
-          />
-        </label>
-        <label for="description" class="text-sm flex flex-col gap-2">
-          {{ $t('profile.description') }}
-          <input
-            name="description"
-            type="text"
-            :placeholder="$t('profile.no_description')"
-            v-model="descriptionInput"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-          />
-        </label>
-        <label for="website" class="text-sm flex flex-col gap-2">
-          {{ $t('profile.website') }}
-          <input
-            name="website"
-            type="url"
-            :placeholder="$t('profile.website_placeholder')"
-            v-model="websiteInput"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-          />
-        </label>
-        <div class="flex gap-4 items-center font-mono text-sm">
-          <h2>@{{ profile?.handle }}</h2>
-          <ButtonBase @click="isEditing = false" type="button">
-            {{ $t('common.cancel') }}
-          </ButtonBase>
-          <ButtonBase variant="primary" :disabled="isUpdateProfileActionPending" type="submit">
-            {{ $t('common.save') }}
-          </ButtonBase>
-        </div>
-      </form>
-
-      <!-- Display Profile -->
-      <div v-else class="flex flex-col flex-wrap gap-4">
-        <h1 v-if="profile.displayName" class="font-mono text-2xl sm:text-3xl font-medium">
-          {{ profile.displayName }}
-        </h1>
-        <p v-if="profile.description">{{ profile.description }}</p>
-        <div class="flex gap-4 items-center font-mono text-sm">
-          <h2>@{{ profile.handle ?? identity }}</h2>
-          <LinkBase
-            v-if="safeProfileWebsiteUrl"
-            :to="safeProfileWebsiteUrl"
-            classicon="i-lucide:link"
-          >
-            {{ profile.website }}
-          </LinkBase>
-          <ButtonBase
-            @click="isEditing = true"
-            :class="user?.handle === profile?.handle ? '' : 'invisible'"
-            class="hidden sm:inline-flex"
-          >
-            {{ $t('common.edit') }}
-          </ButtonBase>
-        </div>
-      </div>
-    </header>
-
-    <section class="flex flex-col gap-8">
-      <h2
-        class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
-        :title="$t('profile.likes')"
-        dir="ltr"
-      >
-        {{ $t('profile.likes') }}
-        <span v-if="likes">({{ likes.records?.length ?? 0 }})</span>
-      </h2>
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="likes"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="flex flex-col gap-8 mt-8">
       <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <SkeletonBlock v-for="i in 4" :key="i" class="h-16 rounded-lg" />
       </div>
diff --git a/app/pages/profile/[identity]/known-accounts.vue b/app/pages/profile/[identity]/known-accounts.vue
new file mode 100644
index 0000000000..27779ede92
--- /dev/null
+++ b/app/pages/profile/[identity]/known-accounts.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: accounts,
+  status: accountsStatus,
+  error: accountsError,
+  refresh: refreshAccounts,
+} = await useLazyFetch<AccountEntry['account'][]>(
+  () => `/api/social/profile/${identity.value}/accounts`,
+  {
+    default: () => [],
+  },
+)
+
+const entries = computed<AccountEntry[]>(() => (accounts.value ?? []).map(account => ({ account })))
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addAccountDialogRef = useTemplateRef('addAccountDialogRef')
+
+useSeoMeta({
+  title: () => `${identity.value} accounts - npmx`,
+  description: () => `Accounts for ${identity.value}`,
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="known-accounts"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="canEdit" class="flex justify-end mb-4">
+        <ButtonBase variant="primary" classicon="i-lucide:plus" @click="addAccountDialogRef?.open">
+          {{ $t('profile.known_accounts.add') }}
+        </ButtonBase>
+      </div>
+
+      <ProfileAccountsList
+        :entries="entries"
+        :status="accountsStatus"
+        :error="accountsError"
+        :empty-label="$t('profile.known_accounts.empty')"
+      />
+    </section>
+
+    <ProfileAddKnownAccountDialog
+      v-if="canEdit"
+      ref="addAccountDialogRef"
+      :identity="identity"
+      @added="refreshAccounts"
+    />
+  </main>
+</template>
diff --git a/app/pages/profile/[identity]/nested.vue b/app/pages/profile/[identity]/nested.vue
new file mode 100644
index 0000000000..5d8b53fe9f
--- /dev/null
+++ b/app/pages/profile/[identity]/nested.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: nested,
+  status: nestedStatus,
+  error: nestedError,
+  refresh: refreshNested,
+} = await useLazyFetch<AccountEntry[]>(() => `/api/social/profile/${identity.value}/nested`, {
+  default: () => [],
+})
+
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addRelatedAccountDialogRef = useTemplateRef('addRelatedAccountDialogRef')
+
+useSeoMeta({
+  title: () => `${identity.value} nested - npmx`,
+  description: () => `Nested accounts for ${identity.value}`,
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="nested"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="canEdit" class="flex justify-end mb-4">
+        <ButtonBase
+          variant="primary"
+          classicon="i-lucide:plus"
+          @click="addRelatedAccountDialogRef?.open"
+        >
+          {{ $t('profile.nested.add') }}
+        </ButtonBase>
+      </div>
+
+      <ProfileAccountsList
+        :entries="nested"
+        :status="nestedStatus"
+        :error="nestedError"
+        :empty-label="$t('profile.nested.empty')"
+      />
+    </section>
+
+    <ProfileAddRelatedAccountDialog
+      v-if="canEdit"
+      ref="addRelatedAccountDialogRef"
+      kind="nested"
+      :identity="identity"
+      :entries="nested"
+      :translations="{
+        title: $t('profile.nested.add_dialog.title'),
+        description: $t('profile.nested.add_dialog.description'),
+        add: $t('profile.nested.add_dialog.add'),
+        duplicate: $t('profile.nested.add_dialog.duplicate'),
+        noKnownAccounts: $t('profile.nested.add_dialog.no_known_accounts'),
+        allAdded: $t('profile.nested.add_dialog.all_added'),
+        unknownAccount: $t('profile.related_accounts.unknown'),
+      }"
+      @added="refreshNested"
+    />
+  </main>
+</template>
diff --git a/app/pages/profile/[identity]/roles/[rkey].vue b/app/pages/profile/[identity]/roles/[rkey].vue
new file mode 100644
index 0000000000..d33c41855a
--- /dev/null
+++ b/app/pages/profile/[identity]/roles/[rkey].vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+
+type RoleDetail = {
+  name: string
+  description?: string
+  color?: string
+  createdAt: string
+  users: {
+    total: number
+    cursor: string | undefined
+    list: { account?: AccountEntry['account'] }[]
+  }
+}
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const rkey = computed(() => route.params.rkey?.toString() || '')
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: role,
+  error: roleError,
+  status: roleStatus,
+  refresh: refreshRole,
+} = await useLazyFetch<RoleDetail>(
+  () => `/api/social/profile/${identity.value}/roles/${rkey.value}`,
+)
+
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addRelatedAccountDialogRef = useTemplateRef('addRelatedAccountDialogRef')
+
+const assignees = computed(() => {
+  const list = role.value?.users.list
+  if (!list?.length) return []
+  return list.map(user => ({ account: user.account }))
+})
+
+useSeoMeta({
+  title: () =>
+    role.value ? `${role.value.name} · ${identity.value} - npmx` : `${identity.value} - npmx`,
+  description: () =>
+    role.value?.description ?? $t('profile.roles.detail_seo_fallback', { handle: identity.value }),
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="roles"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="roleStatus === 'pending'" class="space-y-4">
+        <SkeletonBlock class="h-10 max-w-md rounded-lg" />
+        <SkeletonBlock class="h-16 max-w-2xl rounded-lg" />
+      </div>
+      <div v-else-if="roleStatus === 'error' || roleError">
+        <p>{{ $t('common.error') }}</p>
+      </div>
+      <template v-else-if="role">
+        <header class="flex items-start gap-3">
+          <span
+            v-if="role.color"
+            class="shrink-0 mt-1 size-4 rounded-full border border-border"
+            :style="{ backgroundColor: role.color }"
+            aria-hidden="true"
+          />
+          <div class="min-w-0 w-full">
+            <div class="flex items-center gap-2 w-full justify-between">
+              <h2 class="font-mono text-xl sm:text-2xl font-medium">
+                {{ role.name }}
+              </h2>
+              <LinkBase
+                :to="`/profile/${identity}/roles`"
+                class="text-sm lowercase font-mono text-fg-muted decoration-none hover:text-accent w-fit"
+              >
+                ← {{ $t('profile.roles.back_to_list') }}
+              </LinkBase>
+            </div>
+            <p v-if="role.description" class="text-fg-muted mt-2 max-w-2xl">
+              {{ role.description }}
+            </p>
+          </div>
+        </header>
+
+        <div class="mt-8">
+          <div class="flex items-center justify-between gap-4 mb-4">
+            <h2 class="font-mono uppercase text-fg-muted">
+              {{ $t('profile.roles.assignees') }}
+            </h2>
+            <ButtonBase
+              v-if="canEdit"
+              variant="primary"
+              classicon="i-lucide:plus"
+              @click="addRelatedAccountDialogRef?.open"
+            >
+              {{ $t('profile.roles.add') }}
+            </ButtonBase>
+          </div>
+          <ProfileAccountsList
+            :entries="assignees"
+            :status="roleStatus"
+            :error="roleError"
+            :empty-label="$t('profile.roles.no_assignees')"
+          />
+        </div>
+      </template>
+    </section>
+
+    <ProfileAddRelatedAccountDialog
+      v-if="canEdit"
+      ref="addRelatedAccountDialogRef"
+      kind="role"
+      :identity="identity"
+      :role-rkey="rkey"
+      :entries="assignees"
+      :translations="{
+        title: $t('profile.roles.add_dialog.title'),
+        description: $t('profile.roles.add_dialog.description'),
+        add: $t('profile.roles.add_dialog.add'),
+        duplicate: $t('profile.roles.add_dialog.duplicate'),
+        noKnownAccounts: $t('profile.roles.add_dialog.no_known_accounts'),
+        allAdded: $t('profile.roles.add_dialog.all_added'),
+        unknownAccount: $t('profile.related_accounts.unknown'),
+      }"
+      @added="refreshRole"
+    />
+  </main>
+</template>
diff --git a/app/pages/profile/[identity]/roles/index.vue b/app/pages/profile/[identity]/roles/index.vue
new file mode 100644
index 0000000000..d3cd09bf08
--- /dev/null
+++ b/app/pages/profile/[identity]/roles/index.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { AtUri } from '@atproto/syntax'
+
+type RoleListItem = {
+  atUri: string
+  name: string
+  description?: string
+  color?: string
+  createdAt: string
+}
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: roles,
+  status: rolesStatus,
+  error: rolesError,
+  refresh: refreshRoles,
+} = await useLazyFetch<RoleListItem[]>(() => `/api/social/profile/${identity.value}/roles`, {
+  default: () => [],
+})
+
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addRoleDialogRef = useTemplateRef('addRoleDialogRef')
+
+async function onRoleCreated(uri: string) {
+  await refreshRoles()
+  await navigateTo(`/profile/${identity.value}/roles/${new AtUri(uri).rkey}`)
+}
+
+useSeoMeta({
+  title: () => `${identity.value} roles - npmx`,
+  description: () => $t('profile.roles.seo_description', { handle: identity.value }),
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="roles"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="canEdit" class="flex justify-end mb-4">
+        <ButtonBase variant="primary" classicon="i-lucide:plus" @click="addRoleDialogRef?.open">
+          {{ $t('profile.roles.create') }}
+        </ButtonBase>
+      </div>
+
+      <div v-if="rolesStatus === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <SkeletonBlock v-for="i in 4" :key="i" class="h-20 rounded-lg" />
+      </div>
+      <div v-else-if="rolesStatus === 'error' || rolesError">
+        <p>{{ $t('common.error') }}</p>
+      </div>
+      <div v-else-if="roles?.length" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <LinkBase
+          v-for="(role, index) in roles"
+          :key="role.atUri ?? `role-${index}`"
+          :to="`/profile/${identity}/roles/${new AtUri(role.atUri).rkey}`"
+          class="p-4 bg-bg-subtle border border-border rounded-lg decoration-none block transition-[border-color] hover:border-accent/50"
+        >
+          <div class="flex items-start gap-3">
+            <span
+              v-if="role.color"
+              class="shrink-0 mt-1 size-3 rounded-full border border-border"
+              :style="{ backgroundColor: role.color }"
+              aria-hidden="true"
+            />
+            <div class="min-w-0 flex-1">
+              <p class="font-mono text-sm truncate">
+                {{ role.name }}
+              </p>
+              <p v-if="role.description" class="text-sm mt-1 line-clamp-2 text-fg-muted">
+                {{ role.description }}
+              </p>
+            </div>
+          </div>
+        </LinkBase>
+      </div>
+      <div v-else class="p-4 bg-bg-subtle border border-border rounded-lg text-fg-muted">
+        {{ $t('profile.roles.empty') }}
+      </div>
+    </section>
+
+    <ProfileAddRoleDialog
+      v-if="canEdit"
+      ref="addRoleDialogRef"
+      :identity="identity"
+      @created="onRoleCreated"
+    />
+  </main>
+</template>
diff --git a/app/pages/profile/[identity]/sponsors.vue b/app/pages/profile/[identity]/sponsors.vue
new file mode 100644
index 0000000000..c4a78f6467
--- /dev/null
+++ b/app/pages/profile/[identity]/sponsors.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { AccountEntry } from '~/components/Profile/AccountsList.vue'
+
+const route = useRoute()
+const identity = computed(() => route.params.identity)
+const { user } = useAtproto()
+
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${identity.value}`,
+  {
+    default: () => ({
+      displayName: identity.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+
+if (!profile.value || profileError.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: identity.value }),
+  })
+}
+
+const {
+  data: sponsors,
+  status: sponsorsStatus,
+  error: sponsorsError,
+  refresh: refreshSponsors,
+} = await useLazyFetch<AccountEntry[]>(() => `/api/social/profile/${identity.value}/sponsors`, {
+  default: () => [],
+})
+
+const canEdit = computed(() => user.value?.handle === profile.value?.handle)
+const addRelatedAccountDialogRef = useTemplateRef('addRelatedAccountDialogRef')
+
+useSeoMeta({
+  title: () => `${identity.value} sponsors - npmx`,
+  description: () => `Sponsors supporting ${identity.value}`,
+})
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <ProfileHeader
+      :profile="profile"
+      :identity="identity"
+      active-tab="sponsors"
+      :can-edit="user?.handle === profile?.handle"
+      @update-profile="profile = $event"
+    />
+
+    <section class="mt-8">
+      <div v-if="canEdit" class="flex justify-end mb-4">
+        <ButtonBase
+          variant="primary"
+          classicon="i-lucide:plus"
+          @click="addRelatedAccountDialogRef?.open"
+        >
+          {{ $t('profile.sponsors.add') }}
+        </ButtonBase>
+      </div>
+
+      <ProfileAccountsList
+        :entries="sponsors"
+        :status="sponsorsStatus"
+        :error="sponsorsError"
+        :empty-label="$t('profile.sponsors.no_sponsors')"
+      />
+    </section>
+
+    <ProfileAddRelatedAccountDialog
+      v-if="canEdit"
+      ref="addRelatedAccountDialogRef"
+      kind="sponsors"
+      :identity="identity"
+      :entries="sponsors"
+      :translations="{
+        title: $t('profile.sponsors.add_dialog.title'),
+        description: $t('profile.sponsors.add_dialog.description'),
+        add: $t('profile.sponsors.add_dialog.add'),
+        duplicate: $t('profile.sponsors.add_dialog.duplicate'),
+        noKnownAccounts: $t('profile.sponsors.add_dialog.no_known_accounts'),
+        allAdded: $t('profile.sponsors.add_dialog.all_added'),
+        unknownAccount: $t('profile.related_accounts.unknown'),
+      }"
+      @added="refreshSponsors"
+    />
+  </main>
+</template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7e119affa7..7f6c65276b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -359,14 +359,111 @@
     "website": "Website",
     "website_placeholder": "https://example.com",
     "likes": "Likes",
+    "tabs": "Profile tabs",
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
     "not_found_message": "The profile for {handle} could not be found.",
+    "account": {
+      "warning": "The specified connections are currently based solely on claims made by the current user and have not been independently verified. Please double-check the information if accuracy is important for your task. This limitation is temporary and will be improved in future updates."
+    },
     "invite": {
       "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
       "share_button": "Share on Bluesky",
       "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a browser for the npm registry that's fast, modern, and open-source.\nhttps://npmx.dev"
+    },
+    "known_accounts": {
+      "title": "Known Accounts",
+      "empty": "No accounts found",
+      "add": "Add account",
+      "add_dialog": {
+        "title": "Add known account",
+        "description": "Link another AT Protocol account you operate or represent.",
+        "handle_label": "Handle",
+        "handle_placeholder": "user.bsky.social",
+        "type_label": "Account type",
+        "type_user": "User",
+        "type_project": "Project",
+        "type_organisation": "Organisation",
+        "type_collective": "Collective",
+        "submit": "Add account",
+        "duplicate": "This account is already in your list.",
+        "not_found": "No Bluesky profile was found for that handle.",
+        "self": "You cannot add your own account."
+      }
+    },
+    "sponsors": {
+      "title": "Sponsors",
+      "no_sponsors": "No sponsors found",
+      "add": "Add sponsor",
+      "add_dialog": {
+        "title": "Add sponsor",
+        "description": "Choose a known account to add as a sponsor.",
+        "add": "Add",
+        "duplicate": "This account is already listed as a sponsor.",
+        "no_known_accounts": "No known accounts yet. Add accounts on the Known Accounts tab first.",
+        "all_added": "All known accounts are already listed as sponsors."
+      }
+    },
+    "ecosystem": {
+      "title": "Ecosystem",
+      "empty": "No ecosystem accounts found",
+      "add": "Add to ecosystem",
+      "add_dialog": {
+        "title": "Add to ecosystem",
+        "description": "Choose a known account to add to your ecosystem.",
+        "add": "Add",
+        "duplicate": "This account is already in your ecosystem.",
+        "no_known_accounts": "No known accounts yet. Add accounts on the Known Accounts tab first.",
+        "all_added": "All known accounts are already in your ecosystem."
+      }
+    },
+    "nested": {
+      "title": "Nested",
+      "empty": "No nested accounts found",
+      "add": "Add nested account",
+      "add_dialog": {
+        "title": "Add nested account",
+        "description": "Choose a known account to add as a nested account.",
+        "add": "Add",
+        "duplicate": "This account is already listed as nested.",
+        "no_known_accounts": "No known accounts yet. Add accounts on the Known Accounts tab first.",
+        "all_added": "All known accounts are already listed as nested."
+      }
+    },
+    "roles": {
+      "title": "Roles",
+      "empty": "No roles defined",
+      "create": "Create role",
+      "seo_description": "Roles managed by {handle}",
+      "detail_seo_fallback": "Role for {handle} on npmx",
+      "back_to_list": "All roles",
+      "assignees": "Assignees",
+      "no_assignees": "No assignees yet",
+      "add": "Add assignee",
+      "create_dialog": {
+        "title": "Create role",
+        "description": "Define a role you can assign to known accounts.",
+        "name_label": "Name",
+        "name_placeholder": "Maintainer",
+        "description_label": "Description",
+        "description_placeholder": "Optional short description",
+        "color_label": "Color",
+        "submit": "Create role",
+        "name_required": "Name is required.",
+        "invalid_color": "Enter a valid hex color (e.g. #6366f1)."
+      },
+      "add_dialog": {
+        "title": "Add assignee",
+        "description": "Choose a known account to assign to this role.",
+        "add": "Add",
+        "duplicate": "This account is already assigned to this role.",
+        "no_known_accounts": "No known accounts yet. Add accounts on the Known Accounts tab first.",
+        "all_added": "All known accounts are already assigned to this role."
+      }
+    },
+    "related_accounts": {
+      "unknown": "Unknown account"
     }
   },
   "package": {
diff --git a/i18n/schema.json b/i18n/schema.json
index ee385067bd..c7ad829470 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1081,6 +1081,9 @@
         "likes": {
           "type": "string"
         },
+        "tabs": {
+          "type": "string"
+        },
         "seo_title": {
           "type": "string"
         },
@@ -1093,6 +1096,15 @@
         "not_found_message": {
           "type": "string"
         },
+        "account": {
+          "type": "object",
+          "properties": {
+            "warning": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "invite": {
           "type": "object",
           "properties": {
@@ -1107,6 +1119,285 @@
             }
           },
           "additionalProperties": false
+        },
+        "known_accounts": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "add": {
+              "type": "string"
+            },
+            "add_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "handle_label": {
+                  "type": "string"
+                },
+                "handle_placeholder": {
+                  "type": "string"
+                },
+                "type_label": {
+                  "type": "string"
+                },
+                "type_user": {
+                  "type": "string"
+                },
+                "type_project": {
+                  "type": "string"
+                },
+                "type_organisation": {
+                  "type": "string"
+                },
+                "type_collective": {
+                  "type": "string"
+                },
+                "submit": {
+                  "type": "string"
+                },
+                "duplicate": {
+                  "type": "string"
+                },
+                "not_found": {
+                  "type": "string"
+                },
+                "self": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "sponsors": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "no_sponsors": {
+              "type": "string"
+            },
+            "add": {
+              "type": "string"
+            },
+            "add_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "add": {
+                  "type": "string"
+                },
+                "duplicate": {
+                  "type": "string"
+                },
+                "no_known_accounts": {
+                  "type": "string"
+                },
+                "all_added": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "ecosystem": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "add": {
+              "type": "string"
+            },
+            "add_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "add": {
+                  "type": "string"
+                },
+                "duplicate": {
+                  "type": "string"
+                },
+                "no_known_accounts": {
+                  "type": "string"
+                },
+                "all_added": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "nested": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "add": {
+              "type": "string"
+            },
+            "add_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "add": {
+                  "type": "string"
+                },
+                "duplicate": {
+                  "type": "string"
+                },
+                "no_known_accounts": {
+                  "type": "string"
+                },
+                "all_added": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "roles": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "create": {
+              "type": "string"
+            },
+            "seo_description": {
+              "type": "string"
+            },
+            "detail_seo_fallback": {
+              "type": "string"
+            },
+            "back_to_list": {
+              "type": "string"
+            },
+            "assignees": {
+              "type": "string"
+            },
+            "no_assignees": {
+              "type": "string"
+            },
+            "add": {
+              "type": "string"
+            },
+            "create_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "name_label": {
+                  "type": "string"
+                },
+                "name_placeholder": {
+                  "type": "string"
+                },
+                "description_label": {
+                  "type": "string"
+                },
+                "description_placeholder": {
+                  "type": "string"
+                },
+                "color_label": {
+                  "type": "string"
+                },
+                "submit": {
+                  "type": "string"
+                },
+                "name_required": {
+                  "type": "string"
+                },
+                "invalid_color": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            },
+            "add_dialog": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "add": {
+                  "type": "string"
+                },
+                "duplicate": {
+                  "type": "string"
+                },
+                "no_known_accounts": {
+                  "type": "string"
+                },
+                "all_added": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "related_accounts": {
+          "type": "object",
+          "properties": {
+            "unknown": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false
diff --git a/lexicons.json b/lexicons.json
index 081d249ca4..9c026aa412 100644
--- a/lexicons.json
+++ b/lexicons.json
@@ -14,13 +14,19 @@
     "com.atproto.repo.applyWrites",
     "com.atproto.repo.getRecord",
     "com.atproto.sync.getLatestCommit",
+    "net.atview.account.actor",
+    "net.atview.account.ecosystem",
+    "net.atview.account.nested",
+    "net.atview.account.role",
+    "net.atview.account.sponsor",
+    "net.atview.managed.role",
     "site.standard.document",
     "site.standard.publication"
   ],
   "resolutions": {
     "app.bsky.actor.defs": {
       "uri": "at://did:plc:4v4y5r3lwsbtmsxhile2ljac/com.atproto.lexicon.schema/app.bsky.actor.defs",
-      "cid": "bafyreigwqwhe2jxohagozazfbrf6dxgzphvkg3d3lg7uxdvepsimqyclka"
+      "cid": "bafyreiel3mr6hz7g4wy5l6pkrwqh7affgluhfszvrrduc7p66os5cfkqdq"
     },
     "app.bsky.actor.getProfiles": {
       "uri": "at://did:plc:4v4y5r3lwsbtmsxhile2ljac/com.atproto.lexicon.schema/app.bsky.actor.getProfiles",
@@ -44,7 +50,7 @@
     },
     "app.bsky.embed.images": {
       "uri": "at://did:plc:4v4y5r3lwsbtmsxhile2ljac/com.atproto.lexicon.schema/app.bsky.embed.images",
-      "cid": "bafyreifrntpx63uebiskpooozv6hji62swectq3pocw5h5gpkkqynmazdm"
+      "cid": "bafyreifw77mkqkzlvm5csjwutkrnaivsjvlhg2qxdlwwabqpahlyyjrpwi"
     },
     "app.bsky.embed.record": {
       "uri": "at://did:plc:4v4y5r3lwsbtmsxhile2ljac/com.atproto.lexicon.schema/app.bsky.embed.record",
@@ -108,7 +114,7 @@
     },
     "com.atproto.label.defs": {
       "uri": "at://did:plc:6msi3pj7krzih5qxqtryxlzw/com.atproto.lexicon.schema/com.atproto.label.defs",
-      "cid": "bafyreig4hmnb2xkecyg4aaqfhr2rrcxxb3gsr4xks4rqb7rscrycalbrji"
+      "cid": "bafyreidp2wpcbzl2qiob2uwoc7lhntojx3tjcr553mmahw2f5cumtm3wpm"
     },
     "com.atproto.moderation.defs": {
       "uri": "at://did:plc:6msi3pj7krzih5qxqtryxlzw/com.atproto.lexicon.schema/com.atproto.moderation.defs",
@@ -134,17 +140,41 @@
       "uri": "at://did:plc:6msi3pj7krzih5qxqtryxlzw/com.atproto.lexicon.schema/com.atproto.sync.getLatestCommit",
       "cid": "bafyreifewzvfus7z6rnmtv74lpulhldvikqmhzepwqdlaqmhllgyg4oejq"
     },
+    "net.atview.account.actor": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.account.actor",
+      "cid": "bafyreiaxxckxh4bt62h6emo4jsqpz4de4tv6yluc3frhru3ajy2scrmhs4"
+    },
+    "net.atview.account.ecosystem": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.account.ecosystem",
+      "cid": "bafyreihazugihuieoh7rcsqsnnigmtvmumfg2ec4sulvtvdxqyavogtt5m"
+    },
+    "net.atview.account.nested": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.account.nested",
+      "cid": "bafyreiefx5pdvku42aylz7ty5677kxwsjztqzsg3wcwaqf5bjtjn2xx4zi"
+    },
+    "net.atview.account.role": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.account.role",
+      "cid": "bafyreibdk7nsfppmmtni6xfipchfr6pdt3yol6gdjyhkyh53cgzci7e7mu"
+    },
+    "net.atview.account.sponsor": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.account.sponsor",
+      "cid": "bafyreieq4aa43xailggnm7gllb4yicvcthxwqqb3gtmr5iqulmzzd5do2e"
+    },
+    "net.atview.managed.role": {
+      "uri": "at://did:plc:ycd3zyxa6iru5fiplr3un6nr/com.atproto.lexicon.schema/net.atview.managed.role",
+      "cid": "bafyreigqys2hbddyq7gf7j73xsd7yqoeaixaqucx3aphdbugoaekyzng6u"
+    },
     "site.standard.document": {
       "uri": "at://did:plc:re3ebnp5v7ffagz6rb6xfei4/com.atproto.lexicon.schema/site.standard.document",
-      "cid": "bafyreigdukg62hmel4jbdvghdsoaphslhrdktmahzdyokomuka6yejetwa"
+      "cid": "bafyreifylc5lfr4vqfzrwdtqm4pnfg7cbra7z4acbgikylqandzefwdeaq"
     },
     "site.standard.publication": {
       "uri": "at://did:plc:re3ebnp5v7ffagz6rb6xfei4/com.atproto.lexicon.schema/site.standard.publication",
-      "cid": "bafyreigrsjktb6o225aoexib4kmckchzlhbnuckj5t3l6k4asmycrjt5vy"
+      "cid": "bafyreiapvnarfn3nl2wvg27hsylli5zqvou7a74p7od5mu4detprtejapy"
     },
     "site.standard.theme.basic": {
       "uri": "at://did:plc:re3ebnp5v7ffagz6rb6xfei4/com.atproto.lexicon.schema/site.standard.theme.basic",
-      "cid": "bafyreicgo6eszo6fgz6rpdc2wt4ou3dem65hkqagzgaw4xbl32i2ttdu3q"
+      "cid": "bafyreiabm6f64zosv5jcdmwd3qvekjhoi7enevg53rxj734ney4sd6lmku"
     },
     "site.standard.theme.color": {
       "uri": "at://did:plc:re3ebnp5v7ffagz6rb6xfei4/com.atproto.lexicon.schema/site.standard.theme.color",
diff --git a/lexicons/app/bsky/actor/defs.json b/lexicons/app/bsky/actor/defs.json
index 971bb1484d..53175bfcd4 100644
--- a/lexicons/app/bsky/actor/defs.json
+++ b/lexicons/app/bsky/actor/defs.json
@@ -98,6 +98,13 @@
           "type": "union",
           "description": "An optional embed associated with the status."
         },
+        "labels": {
+          "type": "array",
+          "items": {
+            "ref": "com.atproto.label.defs#label",
+            "type": "ref"
+          }
+        },
         "record": {
           "type": "unknown"
         },
@@ -569,7 +576,7 @@
         },
         "isValid": {
           "type": "boolean",
-          "description": "True if the verification passes validation; otherwise, false."
+          "description": "True if the verification passes validation, otherwise false."
         },
         "createdAt": {
           "type": "string",
diff --git a/lexicons/app/bsky/embed/images.json b/lexicons/app/bsky/embed/images.json
index 2a1ca1fac6..f78acc475b 100644
--- a/lexicons/app/bsky/embed/images.json
+++ b/lexicons/app/bsky/embed/images.json
@@ -40,7 +40,8 @@
         "image": {
           "type": "blob",
           "accept": ["image/*"],
-          "maxSize": 1000000
+          "maxSize": 2000000,
+          "description": "The raw image file. May be up to 2 MB, formerly limited to 1 MB."
         },
         "aspectRatio": {
           "ref": "app.bsky.embed.defs#aspectRatio",
diff --git a/lexicons/app/bsky/richtext/facet.json b/lexicons/app/bsky/richtext/facet.json
index 834b9a1681..2b0dfecbb4 100644
--- a/lexicons/app/bsky/richtext/facet.json
+++ b/lexicons/app/bsky/richtext/facet.json
@@ -66,7 +66,7 @@
           "minimum": 0
         }
       },
-      "description": "Specifies the sub-string range a facet feature applies to. Start index is inclusive, end index is exclusive. Indices are zero-indexed, counting bytes of the UTF-8 encoded text. NOTE: some languages, like JavaScript, use UTF-16 or Unicode codepoints for string slice indexing; in these languages, convert to byte arrays before working with facets."
+      "description": "Specifies the sub-string range a facet feature applies to. Start index is inclusive, end index is exclusive. Indices are zero-indexed, counting bytes of the UTF-8 encoded text. NOTE: some languages, like Javascript, use UTF-16 or Unicode codepoints for string slice indexing; in these languages, convert to byte arrays before working with facets."
     }
   },
   "$type": "com.atproto.lexicon.schema",
diff --git a/lexicons/com/atproto/identity/resolveHandle.json b/lexicons/com/atproto/identity/resolveHandle.json
index 4f54cbc090..3b7bff82b7 100644
--- a/lexicons/com/atproto/identity/resolveHandle.json
+++ b/lexicons/com/atproto/identity/resolveHandle.json
@@ -33,7 +33,7 @@
           }
         }
       },
-      "description": "Resolves an atproto handle (hostname) to a DID. Does not necessarily bi-directionally verify against the DID document."
+      "description": "Resolves an atproto handle (hostname) to a DID. Does not necessarily bi-directionally verify against the the DID document."
     }
   },
   "$type": "com.atproto.lexicon.schema",
diff --git a/lexicons/com/atproto/label/defs.json b/lexicons/com/atproto/label/defs.json
index 6790ebafb5..e3ed53885a 100644
--- a/lexicons/com/atproto/label/defs.json
+++ b/lexicons/com/atproto/label/defs.json
@@ -66,16 +66,13 @@
       "type": "string",
       "knownValues": [
         "!hide",
-        "!no-promote",
         "!warn",
         "!no-unauthenticated",
-        "dmca-violation",
-        "doxxing",
         "porn",
         "sexual",
         "nudity",
-        "nsfl",
-        "gore"
+        "graphic-media",
+        "bot"
       ]
     },
     "selfLabels": {
diff --git a/lexicons/net/atview/account/actor.json b/lexicons/net/atview/account/actor.json
new file mode 100644
index 0000000000..4c12605581
--- /dev/null
+++ b/lexicons/net/atview/account/actor.json
@@ -0,0 +1,61 @@
+{
+  "id": "net.atview.account.actor",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "actor"],
+        "properties": {
+          "type": {
+            "type": "string",
+            "default": "user",
+            "maxLength": 640,
+            "description": "Type of the account",
+            "knownValues": ["project", "user", "organisation", "collective"],
+            "maxGraphemes": 64
+          },
+          "actor": {
+            "type": "string",
+            "format": "at-uri",
+            "description": "AtUri of a user's profile or managed profile"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "overrides": {
+            "ref": "#overrides",
+            "type": "ref",
+            "description": "Overrides for the profile"
+          }
+        }
+      },
+      "description": "Account Actor experiment"
+    },
+    "overrides": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string",
+          "maxLength": 640,
+          "maxGraphemes": 64
+        },
+        "avatar": {
+          "type": "string",
+          "format": "uri",
+          "maxLength": 2048
+        },
+        "description": {
+          "type": "string",
+          "maxLength": 2560,
+          "maxGraphemes": 256
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/account/ecosystem.json b/lexicons/net/atview/account/ecosystem.json
new file mode 100644
index 0000000000..3e185be109
--- /dev/null
+++ b/lexicons/net/atview/account/ecosystem.json
@@ -0,0 +1,31 @@
+{
+  "id": "net.atview.account.ecosystem",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "account"],
+        "properties": {
+          "note": {
+            "type": "string",
+            "maxLength": 2560,
+            "maxGraphemes": 256
+          },
+          "account": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      },
+      "description": "Account Ecosystem experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/account/nested.json b/lexicons/net/atview/account/nested.json
new file mode 100644
index 0000000000..cddad143cf
--- /dev/null
+++ b/lexicons/net/atview/account/nested.json
@@ -0,0 +1,31 @@
+{
+  "id": "net.atview.account.nested",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "account"],
+        "properties": {
+          "note": {
+            "type": "string",
+            "maxLength": 2560,
+            "maxGraphemes": 256
+          },
+          "account": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      },
+      "description": "Account Nested experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/account/role.json b/lexicons/net/atview/account/role.json
new file mode 100644
index 0000000000..c4e950c267
--- /dev/null
+++ b/lexicons/net/atview/account/role.json
@@ -0,0 +1,30 @@
+{
+  "id": "net.atview.account.role",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "role", "account"],
+        "properties": {
+          "role": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "account": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      },
+      "description": "Account Role experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/account/sponsor.json b/lexicons/net/atview/account/sponsor.json
new file mode 100644
index 0000000000..fa26797155
--- /dev/null
+++ b/lexicons/net/atview/account/sponsor.json
@@ -0,0 +1,31 @@
+{
+  "id": "net.atview.account.sponsor",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "account"],
+        "properties": {
+          "note": {
+            "type": "string",
+            "maxLength": 2560,
+            "maxGraphemes": 256
+          },
+          "account": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      },
+      "description": "Account Sponsor experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/managed/profile.json b/lexicons/net/atview/managed/profile.json
new file mode 100644
index 0000000000..5481ded38a
--- /dev/null
+++ b/lexicons/net/atview/managed/profile.json
@@ -0,0 +1,37 @@
+{
+  "id": "net.atview.managed.profile",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "name", "description"],
+        "properties": {
+          "name": {
+            "type": "string",
+            "maxLength": 640,
+            "maxGraphemes": 64
+          },
+          "avatar": {
+            "type": "string",
+            "format": "uri",
+            "maxLength": 2048
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2560,
+            "maxGraphemes": 256
+          }
+        }
+      },
+      "description": "Managed Profile experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/net/atview/managed/role.json b/lexicons/net/atview/managed/role.json
new file mode 100644
index 0000000000..27a08aee58
--- /dev/null
+++ b/lexicons/net/atview/managed/role.json
@@ -0,0 +1,37 @@
+{
+  "id": "net.atview.managed.role",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["createdAt", "name"],
+        "properties": {
+          "name": {
+            "type": "string",
+            "maxLength": 640,
+            "maxGraphemes": 64
+          },
+          "color": {
+            "type": "string",
+            "maxLength": 64,
+            "description": "Hex color code"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2560,
+            "maxGraphemes": 256
+          }
+        }
+      },
+      "description": "Managed Role experiment"
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/lexicons/site/standard/document.json b/lexicons/site/standard/document.json
index c4a00b6d5b..0e7d8aab90 100644
--- a/lexicons/site/standard/document.json
+++ b/lexicons/site/standard/document.json
@@ -20,11 +20,16 @@
           "tags": {
             "type": "array",
             "items": {
-              "type": "string"
+              "type": "string",
+              "maxLength": 1280,
+              "maxGraphemes": 128
             },
-            "maxLength": 1280,
-            "description": "Array of strings used to tag or categorize the document. Avoid prepending tags with hashtags.",
-            "maxGraphemes": 128
+            "description": "Array of strings used to tag or categorize the document. Avoid prepending tags with hashtags."
+          },
+          "links": {
+            "refs": [],
+            "type": "union",
+            "description": "Array of values describing relationships between this document and external resources"
           },
           "title": {
             "type": "string",
@@ -32,6 +37,11 @@
             "description": "Title of the document.",
             "maxGraphemes": 500
           },
+          "labels": {
+            "refs": ["com.atproto.label.defs#selfLabels"],
+            "type": "union",
+            "description": "Self-label values for this post. Effectively content warnings."
+          },
           "content": {
             "refs": [],
             "type": "union",
@@ -68,10 +78,37 @@
           "textContent": {
             "type": "string",
             "description": "Plaintext representation of the documents contents. Should not contain markdown or other formatting."
+          },
+          "contributors": {
+            "type": "array",
+            "items": {
+              "ref": "#contributor",
+              "type": "ref"
+            }
           }
         }
       },
       "description": "A document record representing a published article, blog post, or other content. Documents can belong to a publication or exist independently."
+    },
+    "contributor": {
+      "type": "object",
+      "required": ["did"],
+      "properties": {
+        "did": {
+          "type": "string",
+          "format": "did"
+        },
+        "role": {
+          "type": "string",
+          "maxLength": 1000,
+          "maxGraphemes": 100
+        },
+        "displayName": {
+          "type": "string",
+          "maxLength": 1000,
+          "maxGraphemes": 100
+        }
+      }
     }
   },
   "$type": "com.atproto.lexicon.schema",
diff --git a/lexicons/site/standard/publication.json b/lexicons/site/standard/publication.json
index 456f73068d..965671698d 100644
--- a/lexicons/site/standard/publication.json
+++ b/lexicons/site/standard/publication.json
@@ -25,6 +25,11 @@
             "description": "Name of the publication.",
             "maxGraphemes": 500
           },
+          "labels": {
+            "refs": ["com.atproto.label.defs#selfLabels"],
+            "type": "union",
+            "description": "Self-label values for this publication. Effectively content warnings."
+          },
           "basicTheme": {
             "ref": "site.standard.theme.basic",
             "type": "ref",
@@ -53,8 +58,7 @@
           "default": true,
           "description": "Boolean which decides whether the publication should appear in discovery feeds."
         }
-      },
-      "description": "Platform-specific preferences for the publication, including discovery and visibility settings."
+      }
     }
   },
   "$type": "com.atproto.lexicon.schema",
diff --git a/lexicons/site/standard/theme/basic.json b/lexicons/site/standard/theme/basic.json
index 88c7cba094..88ff587e04 100644
--- a/lexicons/site/standard/theme/basic.json
+++ b/lexicons/site/standard/theme/basic.json
@@ -2,28 +2,32 @@
   "id": "site.standard.theme.basic",
   "defs": {
     "main": {
-      "type": "object",
-      "required": ["background", "foreground", "accent", "accentForeground"],
-      "properties": {
-        "accent": {
-          "refs": ["site.standard.theme.color#rgb"],
-          "type": "union",
-          "description": "Color used for links and button backgrounds."
-        },
-        "background": {
-          "refs": ["site.standard.theme.color#rgb"],
-          "type": "union",
-          "description": "Color used for content background."
-        },
-        "foreground": {
-          "refs": ["site.standard.theme.color#rgb"],
-          "type": "union",
-          "description": "Color used for content text."
-        },
-        "accentForeground": {
-          "refs": ["site.standard.theme.color#rgb"],
-          "type": "union",
-          "description": "Color used for button text."
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["background", "foreground", "accent", "accentForeground"],
+        "properties": {
+          "accent": {
+            "refs": ["site.standard.theme.color#rgb"],
+            "type": "union",
+            "description": "Color used for links and button backgrounds."
+          },
+          "background": {
+            "refs": ["site.standard.theme.color#rgb"],
+            "type": "union",
+            "description": "Color used for content background."
+          },
+          "foreground": {
+            "refs": ["site.standard.theme.color#rgb"],
+            "type": "union",
+            "description": "Color used for content text."
+          },
+          "accentForeground": {
+            "refs": ["site.standard.theme.color#rgb"],
+            "type": "union",
+            "description": "Color used for button text."
+          }
         }
       },
       "description": "A simplified theme definition for publications, providing basic color customization for content display across different platforms and applications."
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 17ac34033f..04b1618c93 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -398,6 +398,7 @@ export default defineNuxtConfig({
         'semver',
         'validate-npm-package-name',
         '@atproto/lex',
+        '@atproto/syntax',
         'fast-npm-meta',
         '@floating-ui/vue',
         'algoliasearch/lite',
diff --git a/package.json b/package.json
index bb98bde1ee..2b6053ac84 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@atproto/lex": "0.0.20",
     "@atproto/lex-password-session": "0.0.8",
     "@atproto/oauth-client-node": "^0.3.15",
+    "@atproto/syntax": "0.5.4",
     "@deno/doc": "jsr:^0.189.1",
     "@floating-ui/vue": "1.1.11",
     "@iconify-json/lucide": "1.2.98",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1477e56346..24260e7f63 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,6 +73,9 @@ importers:
       '@atproto/oauth-client-node':
         specifier: ^0.3.15
         version: 0.3.17
+      '@atproto/syntax':
+        specifier: 0.5.4
+        version: 0.5.4
       '@deno/doc':
         specifier: jsr:^0.189.1
         version: '@jsr/deno__doc@0.189.1(patch_hash=24f326e123c822a07976329a5afe91a8713e82d53134b5586625b72431c87832)'
diff --git a/server/api/social/profile/[identifier]/accounts.get.ts b/server/api/social/profile/[identifier]/accounts.get.ts
new file mode 100644
index 0000000000..4071f27a5a
--- /dev/null
+++ b/server/api/social/profile/[identifier]/accounts.get.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /api/social/profile/:identifier/accounts
+ *
+ * Lists all account actors for a npmx user identity
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+
+  if (!identifier) {
+    throw createError({
+      status: 400,
+      message: 'identifier not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new AccountUtils().getAccounts(minidoc)
+  } catch (error: unknown) {
+    console.error('[profile-accounts-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get accounts',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/accounts.post.ts b/server/api/social/profile/[identifier]/accounts.post.ts
new file mode 100644
index 0000000000..a81de6fe94
--- /dev/null
+++ b/server/api/social/profile/[identifier]/accounts.post.ts
@@ -0,0 +1,51 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/accounts
+ *
+ * Adds a known account to the signed-in user's account list.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_ACCOUNT_ACTOR_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+  const handle = body.handle?.replace(/^@/, '').trim()
+
+  if (!handle) {
+    throw createError({ status: 400, message: 'handle not provided' })
+  }
+
+  try {
+    const accountUtils = new AccountUtils()
+    const actorMinidoc = await new IdentityUtils().getMiniDoc(handle)
+    const actorUri = `at://${actorMinidoc.did}/app.bsky.actor.profile/self`
+
+    if (actorMinidoc.did === ownerMinidoc.did) {
+      throw createError({
+        statusCode: 400,
+        message: 'Cannot add your own account',
+      })
+    }
+
+    const writeClient = new Client(oAuthSession)
+    return await accountUtils.createAccount(writeClient, ownerMinidoc, actorUri, body.type)
+  } catch (error: unknown) {
+    console.error('[profile-accounts-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to add account',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/ecosystem.get.ts b/server/api/social/profile/[identifier]/ecosystem.get.ts
new file mode 100644
index 0000000000..3563ffba89
--- /dev/null
+++ b/server/api/social/profile/[identifier]/ecosystem.get.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /api/social/profile/:identifier/ecosystem
+ *
+ * Gets the ecosystem for a npmx user
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+
+  if (!identifier) {
+    throw createError({
+      status: 400,
+      message: 'identifier not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new EcosystemUtils().getEcosystem(minidoc)
+  } catch (error: unknown) {
+    console.error('[profile-ecosystem-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get ecosystem',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/ecosystem.post.ts b/server/api/social/profile/[identifier]/ecosystem.post.ts
new file mode 100644
index 0000000000..8a3148cd08
--- /dev/null
+++ b/server/api/social/profile/[identifier]/ecosystem.post.ts
@@ -0,0 +1,41 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/ecosystem
+ *
+ * Adds a known account to the signed-in user's ecosystem list.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_ECOSYSTEM_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+
+  try {
+    const writeClient = new Client(oAuthSession)
+    const ecosystemUtils = new EcosystemUtils()
+    return await ecosystemUtils.createEcosystemConnection(
+      writeClient,
+      ownerMinidoc,
+      body.accountUri,
+      body.note,
+    )
+  } catch (error: unknown) {
+    console.error('[profile-ecosystem-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to add ecosystem connection',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/nested.get.ts b/server/api/social/profile/[identifier]/nested.get.ts
new file mode 100644
index 0000000000..4355464efc
--- /dev/null
+++ b/server/api/social/profile/[identifier]/nested.get.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /api/social/profile/:identifier/nested
+ *
+ * Gets the nested for a npmx user
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+
+  if (!identifier) {
+    throw createError({
+      status: 400,
+      message: 'identifier not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new NestedUtils().getNested(minidoc)
+  } catch (error: unknown) {
+    console.error('[profile-nested-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get nested',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/nested.post.ts b/server/api/social/profile/[identifier]/nested.post.ts
new file mode 100644
index 0000000000..d8c060dae4
--- /dev/null
+++ b/server/api/social/profile/[identifier]/nested.post.ts
@@ -0,0 +1,41 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/nested
+ *
+ * Adds a known account to the signed-in user's nested list.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_NESTED_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+
+  try {
+    const writeClient = new Client(oAuthSession)
+    const nestedUtils = new NestedUtils()
+    return await nestedUtils.createNestedConnection(
+      writeClient,
+      ownerMinidoc,
+      body.accountUri,
+      body.note,
+    )
+  } catch (error: unknown) {
+    console.error('[profile-nested-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to add nested connection',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/roles/[rkey].get.ts b/server/api/social/profile/[identifier]/roles/[rkey].get.ts
new file mode 100644
index 0000000000..31e3affc79
--- /dev/null
+++ b/server/api/social/profile/[identifier]/roles/[rkey].get.ts
@@ -0,0 +1,27 @@
+/**
+ * GET /api/social/profile/:identifier/roles/:rkey
+ *
+ * Gets a single role with its assigned users for a npmx user
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+  const rkey = getRouterParam(event, 'rkey')
+
+  if (!identifier || !rkey) {
+    throw createError({
+      status: 400,
+      message: 'identifier or rkey not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new RoleUtils().getRole(minidoc, rkey)
+  } catch (error: unknown) {
+    console.error('[profile-role-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get role',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/roles/[rkey].post.ts b/server/api/social/profile/[identifier]/roles/[rkey].post.ts
new file mode 100644
index 0000000000..b62c15770d
--- /dev/null
+++ b/server/api/social/profile/[identifier]/roles/[rkey].post.ts
@@ -0,0 +1,40 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/roles/:rkey
+ *
+ * Assigns a known account to a role on the signed-in user's profile.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_ACCOUNT_ROLE_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  const rkey = getRouterParam(event, 'rkey')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+  if (!rkey) {
+    throw createError({ status: 400, message: 'rkey not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+
+  try {
+    const writeClient = new Client(oAuthSession)
+    const roleUtils = new RoleUtils()
+    return await roleUtils.createRoleAssignment(writeClient, ownerMinidoc, rkey, body.accountUri)
+  } catch (error: unknown) {
+    console.error('[profile-role-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to add role assignment',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/roles/index.get.ts b/server/api/social/profile/[identifier]/roles/index.get.ts
new file mode 100644
index 0000000000..b05b176896
--- /dev/null
+++ b/server/api/social/profile/[identifier]/roles/index.get.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /api/social/profile/:identifier/roles
+ *
+ * Gets the roles for a npmx user
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+
+  if (!identifier) {
+    throw createError({
+      status: 400,
+      message: 'identifier not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new RoleUtils().getRoles(minidoc)
+  } catch (error: unknown) {
+    console.error('[profile-roles-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get roles',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/roles/index.post.ts b/server/api/social/profile/[identifier]/roles/index.post.ts
new file mode 100644
index 0000000000..0e0c31bdf6
--- /dev/null
+++ b/server/api/social/profile/[identifier]/roles/index.post.ts
@@ -0,0 +1,45 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/roles
+ *
+ * Creates a managed role on the signed-in user's profile.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_MANAGED_ROLE_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+  const name = body.name?.trim()
+
+  if (!name) {
+    throw createError({ status: 400, message: 'Role name not provided' })
+  }
+
+  try {
+    const writeClient = new Client(oAuthSession)
+    const roleUtils = new RoleUtils()
+    return await roleUtils.createRole(writeClient, ownerMinidoc, {
+      name,
+      description: body.description,
+      color: body.color,
+    })
+  } catch (error: unknown) {
+    console.error('[profile-roles-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to create role',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/sponsors.get.ts b/server/api/social/profile/[identifier]/sponsors.get.ts
new file mode 100644
index 0000000000..4f9f8b4922
--- /dev/null
+++ b/server/api/social/profile/[identifier]/sponsors.get.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /api/social/profile/:identifier/sponsors
+ *
+ * Gets the sponsors for a npmx user
+ */
+export default eventHandlerWithOAuthSession(async event => {
+  const identifier = getRouterParam(event, 'identifier')
+
+  if (!identifier) {
+    throw createError({
+      status: 400,
+      message: 'identifier not provided',
+    })
+  }
+
+  try {
+    const minidoc = await new IdentityUtils().getMiniDoc(identifier)
+    return await new SponsorUtils().getSponsors(minidoc)
+  } catch (error: unknown) {
+    console.error('[profile-sponsors-get]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to get sponsors',
+    })
+  }
+})
diff --git a/server/api/social/profile/[identifier]/sponsors.post.ts b/server/api/social/profile/[identifier]/sponsors.post.ts
new file mode 100644
index 0000000000..e155b86507
--- /dev/null
+++ b/server/api/social/profile/[identifier]/sponsors.post.ts
@@ -0,0 +1,41 @@
+import { Client } from '@atproto/lex'
+
+/**
+ * POST /api/social/profile/:identifier/sponsors
+ *
+ * Adds a known account to the signed-in user's sponsors list.
+ */
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  await throwOnMissingOAuthScope(oAuthSession, NET_ATVIEW_SPONSOR_WRITE_SCOPE)
+
+  const identifier = getRouterParam(event, 'identifier')
+  if (!identifier) {
+    throw createError({ status: 400, message: 'identifier not provided' })
+  }
+
+  const ownerMinidoc = await new IdentityUtils().getMiniDoc(identifier)
+  const body = await readBody(event)
+
+  try {
+    const writeClient = new Client(oAuthSession)
+    const sponsorUtils = new SponsorUtils()
+    return await sponsorUtils.createSponsorConnection(
+      writeClient,
+      ownerMinidoc,
+      body.accountUri,
+      body.note,
+    )
+  } catch (error: unknown) {
+    console.error('[profile-sponsors-post]', error)
+    handleApiError(error, {
+      statusCode: 502,
+      message: 'Failed to add sponsor connection',
+    })
+  }
+})
diff --git a/server/utils/atproto/oauth.ts b/server/utils/atproto/oauth.ts
index ae9ba489d2..b5060a6095 100644
--- a/server/utils/atproto/oauth.ts
+++ b/server/utils/atproto/oauth.ts
@@ -9,13 +9,22 @@ import type { EventHandlerRequest, H3Event, SessionManager } from 'h3'
 import { NodeOAuthClient, AtprotoDohHandleResolver } from '@atproto/oauth-client-node'
 import { getOAuthLock } from '#server/utils/atproto/lock'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
-import { LIKES_SCOPE, PROFILE_SCOPE } from '#shared/utils/constants'
+import {
+  LIKES_SCOPE,
+  NET_ATVIEW_ACCOUNT_ACTOR_WRITE_SCOPE,
+  NET_ATVIEW_ACCOUNT_ROLE_WRITE_SCOPE,
+  NET_ATVIEW_ECOSYSTEM_WRITE_SCOPE,
+  NET_ATVIEW_MANAGED_ROLE_WRITE_SCOPE,
+  NET_ATVIEW_NESTED_WRITE_SCOPE,
+  NET_ATVIEW_SPONSOR_WRITE_SCOPE,
+  PROFILE_SCOPE,
+} from '#shared/utils/constants'
 import type { UserServerSession } from '#shared/types/userSession'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
 
 // TODO: If you add writing a new record you will need to add a scope for it
-export const scope = `atproto ${LIKES_SCOPE} ${PROFILE_SCOPE}`
+export const scope = `atproto ${LIKES_SCOPE} ${PROFILE_SCOPE} ${NET_ATVIEW_ACCOUNT_ACTOR_WRITE_SCOPE} ${NET_ATVIEW_ECOSYSTEM_WRITE_SCOPE} ${NET_ATVIEW_NESTED_WRITE_SCOPE} ${NET_ATVIEW_SPONSOR_WRITE_SCOPE} ${NET_ATVIEW_ACCOUNT_ROLE_WRITE_SCOPE} ${NET_ATVIEW_MANAGED_ROLE_WRITE_SCOPE}`
 
 /**
  * Resolves a did to a handle via DoH or via the http website calls
diff --git a/server/utils/atproto/utils/account.ts b/server/utils/atproto/utils/account.ts
new file mode 100644
index 0000000000..a24b5aa8a3
--- /dev/null
+++ b/server/utils/atproto/utils/account.ts
@@ -0,0 +1,217 @@
+import * as blue from '#shared/types/lexicons/blue'
+import * as net from '#shared/types/lexicons/net'
+import * as app from '#shared/types/lexicons/app'
+import { SLINGSHOT_HOST } from '#shared/utils/constants'
+import { Client, toDatetimeString } from '@atproto/lex'
+import type { AtUriString } from '@atproto/lex'
+import { AtUri } from '@atproto/syntax'
+import { IdentityUtils } from './identity'
+
+const HEADERS = { 'User-Agent': 'npmx' }
+const LIST_LIMIT = 50
+
+const ACCOUNT_NSID = net.atview.account.actor.$nsid
+
+const SUPPORTED_PROFILE_NSIDS = new Set([
+  app.bsky.actor.profile.$nsid,
+  net.atview.managed.profile.$nsid,
+])
+
+const CACHE_PREFIX = 'atproto-account:'
+const CACHE_ACCOUNT_KEY = (uri: string) => `${CACHE_PREFIX}${uri}`
+const CACHE_ACCOUNTS_LIST_KEY = (did: string) => `${CACHE_PREFIX}${did}:list`
+
+export type AccountActorRecord = app.bsky.actor.profile.Main | net.atview.managed.profile.Main
+
+export type PopulatedAccount = Omit<net.atview.account.actor.Main, 'actor'> & {
+  /** at-uri of the source `net.atview.account.actor` record */
+  uri: string
+  /** Resolved underlying profile record */
+  actor: AccountActorRecord
+  /** at-uri of the underlying profile record */
+  actorUri: string
+  handle: string | undefined
+}
+
+/**
+ * Resolves `net.atview.account.actor` records into fully-populated accounts,
+ * hydrating the underlying actor profile (bsky or managed).
+ */
+export class AccountUtils {
+  private readonly cache: CacheAdapter
+  private readonly slingshotClient: Client
+  private readonly constellation: Constellation
+  private readonly identityUtils: IdentityUtils
+
+  constructor() {
+    this.cache = getCacheAdapter('generic')
+    this.slingshotClient = new Client(`https://${SLINGSHOT_HOST}`, { headers: HEADERS })
+    this.constellation = new Constellation(
+      async <T = unknown>(
+        url: string,
+        options: Parameters<typeof $fetch>[1] = {},
+        _ttl?: number,
+      ): Promise<CachedFetchResult<T>> => {
+        const data = (await $fetch<T>(url, options)) as T
+        return { data, isStale: false, cachedAt: null }
+      },
+    )
+    this.identityUtils = new IdentityUtils()
+  }
+
+  /**
+   * Populates a single account at-uri.
+   */
+  async populateAccount(uri: string): Promise<PopulatedAccount | undefined> {
+    const atUri = new AtUri(uri)
+
+    if (atUri.collection !== ACCOUNT_NSID) return undefined
+
+    const cacheKey = CACHE_ACCOUNT_KEY(uri)
+    const cached = await this.cache.get<PopulatedAccount>(cacheKey)
+    if (cached) return cached
+
+    try {
+      const accountResponse = await this.slingshotClient.xrpcSafe(
+        blue.microcosm.repo.getRecordByUri,
+        { params: { at_uri: atUri.toString() } },
+      )
+
+      if (!accountResponse.success) return undefined
+
+      const account = accountResponse.body.value as net.atview.account.actor.Main
+      const actorAtUri = new AtUri(account.actor)
+
+      if (!SUPPORTED_PROFILE_NSIDS.has(actorAtUri.collection)) return undefined
+
+      const actorResponse = await this.slingshotClient.xrpcSafe(
+        blue.microcosm.repo.getRecordByUri,
+        { params: { at_uri: actorAtUri.toString() } },
+      )
+
+      if (!actorResponse.success) return undefined
+
+      let handle: string | undefined
+
+      if (app.bsky.actor.profile.$nsid === actorAtUri.collection) {
+        try {
+          const miniDoc = await this.identityUtils.getMiniDoc(actorAtUri.host)
+          handle = miniDoc.handle === 'handle.invalid' ? undefined : miniDoc.handle
+        } catch {
+          handle = undefined
+        }
+      }
+
+      const populated: PopulatedAccount = {
+        ...account,
+        uri: atUri.toString(),
+        actor: actorResponse.body.value as AccountActorRecord,
+        actorUri: actorAtUri.toString(),
+        handle,
+      }
+      await this.cache.set(cacheKey, populated)
+      return populated
+    } catch (error) {
+      console.error('[populate-account]', uri, error)
+      return undefined
+    }
+  }
+
+  /**
+   * Populates multiple account at-uris in parallel. Duplicates are deduplicated
+   * before fetching and failed lookups are silently dropped while preserving
+   * the input order of successful results.
+   */
+  async populateAccounts(uris: readonly string[]): Promise<PopulatedAccount[]> {
+    if (!uris.length) return []
+
+    const urisFiltered = Array.from(new Set(uris))
+    // todo: improve concurrency
+    const populated = await Promise.all(urisFiltered.map(uri => this.populateAccount(uri)))
+    return populated.filter(item => item !== undefined)
+  }
+
+  async invalidateAccountsCache(did: string): Promise<void> {
+    await this.cache.delete(CACHE_ACCOUNTS_LIST_KEY(did))
+  }
+
+  /**
+   * Lists all `net.atview.account.actor` records on `minidoc.did`, hydrated.
+   */
+  async getAccounts(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+  ): Promise<PopulatedAccount[]> {
+    const cacheKey = CACHE_ACCOUNTS_LIST_KEY(minidoc.did)
+    const cached = await this.cache.get<PopulatedAccount[]>(cacheKey)
+    if (cached) return cached
+
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+    const response = await client.listRecords(ACCOUNT_NSID, {
+      limit: LIST_LIMIT,
+      repo: minidoc.did,
+    })
+
+    const populated = await this.populateAccounts(response.body.records.map(record => record.uri))
+    await this.cache.set(cacheKey, populated)
+    return populated
+  }
+
+  async findAccountByActor(repoDid: string, subject: string): Promise<string | undefined> {
+    const { data } = await this.constellation.getBackLinks(
+      subject,
+      ACCOUNT_NSID,
+      'actor',
+      1,
+      undefined,
+      undefined,
+      [[repoDid]],
+    )
+
+    const backlink = data.records[0]
+    if (!backlink || backlink.collection !== ACCOUNT_NSID) return undefined
+
+    return `at://${backlink.did}/${backlink.collection}/${backlink.rkey}`
+  }
+
+  /**
+   * Gets a populated account by `did + rkey`.
+   */
+  async getAccount(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    rkey: string,
+  ): Promise<PopulatedAccount | undefined> {
+    return this.populateAccount(`at://${minidoc.did}/${ACCOUNT_NSID}/${rkey}`)
+  }
+
+  /**
+   * Creates a `net.atview.account.actor` record on the OAuth user's repo.
+   */
+  async createAccount(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    actorUri: string,
+    type: net.atview.account.actor.Main['type'] = 'user',
+  ): Promise<{ uri: string }> {
+    const existing = await this.findAccountByActor(ownerMinidoc.did, actorUri)
+    if (existing) {
+      throw createError({
+        statusCode: 409,
+        message: 'Account already exists',
+      })
+    }
+
+    const record = net.atview.account.actor.$build({
+      actor: actorUri as AtUriString,
+      createdAt: toDatetimeString(new Date()),
+      type,
+    })
+
+    const result = await writeClient.create(net.atview.account.actor, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create account' })
+    }
+
+    await this.invalidateAccountsCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+}
diff --git a/server/utils/atproto/utils/ecosystem.ts b/server/utils/atproto/utils/ecosystem.ts
new file mode 100644
index 0000000000..080f6a13ad
--- /dev/null
+++ b/server/utils/atproto/utils/ecosystem.ts
@@ -0,0 +1,95 @@
+import type * as blue from '#shared/types/lexicons/blue'
+import * as net from '#shared/types/lexicons/net'
+import { Client, toDatetimeString } from '@atproto/lex'
+import type { AtUriString } from '@atproto/lex'
+import { AccountUtils, type PopulatedAccount } from './account'
+
+const HEADERS = { 'User-Agent': 'npmx' }
+const LIST_LIMIT = 50
+
+const CACHE_PREFIX = 'atproto-ecosystem:'
+const CACHE_ECOSYSTEM_KEY = (did: string) => `${CACHE_PREFIX}${did}:ecosystem`
+
+export type EcosystemEntry = Omit<net.atview.account.ecosystem.Main, 'account'> & {
+  account: PopulatedAccount | undefined
+}
+
+export class EcosystemUtils {
+  private readonly cache: CacheAdapter
+  private readonly accountUtils: AccountUtils
+
+  constructor() {
+    this.cache = getCacheAdapter('generic')
+    this.accountUtils = new AccountUtils()
+  }
+
+  async invalidateEcosystemCache(did: string): Promise<void> {
+    await this.cache.delete(CACHE_ECOSYSTEM_KEY(did))
+  }
+
+  /**
+   * Lists the ecosystem accounts referenced by `minidoc.did`, with each entry's
+   * `account` hydrated.
+   */
+  async getEcosystem(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+  ): Promise<EcosystemEntry[]> {
+    const cacheKey = CACHE_ECOSYSTEM_KEY(minidoc.did)
+    const cached = await this.cache.get<EcosystemEntry[]>(cacheKey)
+    if (cached) return cached
+
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+    const response = await client.listRecords(net.atview.account.ecosystem.$nsid, {
+      limit: LIST_LIMIT,
+      repo: minidoc.did,
+    })
+
+    const records = response.body.records.map(
+      record => record.value as net.atview.account.ecosystem.Main,
+    )
+    const populated = await this.accountUtils.populateAccounts(
+      records.map(record => record.account),
+    )
+    const populatedByUri = new Map(populated.map(account => [account.uri, account]))
+
+    const entries = records.map(record => ({
+      ...record,
+      account: populatedByUri.get(record.account),
+    }))
+
+    await this.cache.set(cacheKey, entries)
+    return entries
+  }
+
+  /**
+   * Creates an ecosystem link on the OAuth user's repo to `accountUri`.
+   */
+  async createEcosystemConnection(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    accountUri: string,
+    note?: string,
+  ): Promise<{ uri: string }> {
+    const existing = await this.getEcosystem(ownerMinidoc)
+    if (existing.some(entry => entry.account?.uri === accountUri)) {
+      throw createError({
+        statusCode: 409,
+        message: 'Ecosystem connection already exists',
+      })
+    }
+
+    const record = net.atview.account.ecosystem.$build({
+      account: accountUri as AtUriString,
+      createdAt: toDatetimeString(new Date()),
+      ...(note ? { note } : {}),
+    })
+
+    const result = await writeClient.create(net.atview.account.ecosystem, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create ecosystem connection' })
+    }
+
+    await this.invalidateEcosystemCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+}
diff --git a/server/utils/atproto/utils/nested.ts b/server/utils/atproto/utils/nested.ts
new file mode 100644
index 0000000000..43f4d53eeb
--- /dev/null
+++ b/server/utils/atproto/utils/nested.ts
@@ -0,0 +1,92 @@
+import type * as blue from '#shared/types/lexicons/blue'
+import * as net from '#shared/types/lexicons/net'
+import { Client, toDatetimeString } from '@atproto/lex'
+import type { AtUriString } from '@atproto/lex'
+import { AccountUtils, type PopulatedAccount } from './account'
+
+const HEADERS = { 'User-Agent': 'npmx' }
+const LIST_LIMIT = 50
+
+const CACHE_PREFIX = 'atproto-nested:'
+const CACHE_NESTED_KEY = (did: string) => `${CACHE_PREFIX}${did}:nested`
+
+export type NestedEntry = Omit<net.atview.account.nested.Main, 'account'> & {
+  account: PopulatedAccount | undefined
+}
+
+export class NestedUtils {
+  private readonly cache: CacheAdapter
+  private readonly accountUtils: AccountUtils
+
+  constructor() {
+    this.cache = getCacheAdapter('generic')
+    this.accountUtils = new AccountUtils()
+  }
+
+  async invalidateNestedCache(did: string): Promise<void> {
+    await this.cache.delete(CACHE_NESTED_KEY(did))
+  }
+
+  /**
+   * Lists the nested accounts referenced by `minidoc.did`, with each entry's
+   * `account` hydrated.
+   */
+  async getNested(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+  ): Promise<NestedEntry[]> {
+    const cacheKey = CACHE_NESTED_KEY(minidoc.did)
+    const cached = await this.cache.get<NestedEntry[]>(cacheKey)
+    if (cached) return cached
+
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+    const response = await client.listRecords(net.atview.account.nested.$nsid, {
+      limit: LIST_LIMIT,
+      repo: minidoc.did,
+    })
+
+    const records = response.body.records.map(
+      record => record.value as net.atview.account.nested.Main,
+    )
+    const populated = await this.accountUtils.populateAccounts(
+      records.map(record => record.account),
+    )
+    const populatedByUri = new Map(populated.map(account => [account.uri, account]))
+
+    const entries = records.map(record => ({
+      ...record,
+      account: populatedByUri.get(record.account),
+    }))
+
+    await this.cache.set(cacheKey, entries)
+    return entries
+  }
+
+  async createNestedConnection(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    accountUri: string,
+    note?: string,
+  ): Promise<{ uri: string }> {
+    const existing = await this.getNested(ownerMinidoc)
+    if (existing.some(entry => entry.account?.uri === accountUri)) {
+      throw createError({
+        statusCode: 409,
+        message: 'Nested connection already exists',
+      })
+    }
+
+    const record = net.atview.account.nested.$build({
+      account: accountUri as AtUriString,
+      createdAt: toDatetimeString(new Date()),
+      ...(note ? { note } : {}),
+    })
+
+    const result = await writeClient.create(net.atview.account.nested, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create nested connection' })
+    }
+
+    await this.invalidateNestedCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+}
diff --git a/server/utils/atproto/utils/role.ts b/server/utils/atproto/utils/role.ts
new file mode 100644
index 0000000000..cf56190791
--- /dev/null
+++ b/server/utils/atproto/utils/role.ts
@@ -0,0 +1,250 @@
+import * as blue from '#shared/types/lexicons/blue'
+import * as net from '#shared/types/lexicons/net'
+import { SLINGSHOT_HOST } from '#shared/utils/constants'
+import { Client, isAtUriString, toDatetimeString } from '@atproto/lex'
+import type { AtUriString } from '@atproto/lex'
+import type { Backlink } from '#shared/utils/constellation'
+import { AccountUtils, type PopulatedAccount } from './account'
+
+const HEADERS = { 'User-Agent': 'npmx' }
+const LIST_LIMIT = 50
+const ROLE_USERS_LIMIT = 100
+
+const CACHE_PREFIX = 'atproto-role:'
+const CACHE_ROLES_KEY = (did: string) => `${CACHE_PREFIX}${did}:roles`
+
+export type RoleUser = Backlink & {
+  /** at-uri of the `net.atview.account.actor` record granted this role, if resolvable */
+  accountUri?: string
+  /** Hydrated account if the user's role record could be resolved */
+  account?: PopulatedAccount
+}
+
+export type PopulatedRole = net.atview.managed.role.Main & {
+  users: {
+    total: number
+    cursor: string | undefined
+    list: RoleUser[]
+  }
+}
+
+export type BaseRole = net.atview.managed.role.Main & {
+  atUri: string
+}
+
+type RoleRecordWithUri = net.atview.managed.role.Main & { atUri: string }
+
+export class RoleUtils {
+  private readonly cache: CacheAdapter
+  private readonly slingshotClient: Client
+  private readonly constellation: Constellation
+  private readonly accountUtils: AccountUtils
+
+  constructor() {
+    this.cache = getCacheAdapter('generic')
+    this.slingshotClient = new Client(`https://${SLINGSHOT_HOST}`, { headers: HEADERS })
+    this.accountUtils = new AccountUtils()
+    this.constellation = new Constellation(
+      // Wrap as CachedFetch since this util already does its own caching upstream
+      async <T = unknown>(
+        url: string,
+        options: Parameters<typeof $fetch>[1] = {},
+        _ttl?: number,
+      ): Promise<CachedFetchResult<T>> => {
+        const data = (await $fetch<T>(url, options)) as T
+        return { data, isStale: false, cachedAt: null }
+      },
+    )
+  }
+
+  async invalidateRolesCache(did: string): Promise<void> {
+    await this.cache.delete(CACHE_ROLES_KEY(did))
+  }
+
+  /**
+   * Lists role definitions managed by `minidoc.did`.
+   */
+  async getRoles(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+  ): Promise<RoleRecordWithUri[]> {
+    const cacheKey = CACHE_ROLES_KEY(minidoc.did)
+    const cached = await this.cache.get<RoleRecordWithUri[]>(cacheKey)
+    if (cached) return cached
+
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+    const response = await client.listRecords(net.atview.managed.role.$nsid, {
+      limit: LIST_LIMIT,
+      repo: minidoc.did,
+    })
+    const roles: RoleRecordWithUri[] = response.body.records.map(record => ({
+      ...(record.value as net.atview.managed.role.Main),
+      atUri: record.uri,
+    }))
+    await this.cache.set(cacheKey, roles)
+    return roles
+  }
+
+  /**
+   * Gets a role with its assigned users, each hydrated to a populated account
+   * when their `net.atview.account.role` record can be resolved.
+   */
+  async getRole(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    rkey: string,
+  ): Promise<PopulatedRole> {
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+
+    const [roleResponse, users] = await Promise.all([
+      client.getRecord(net.atview.managed.role.$nsid, rkey, { repo: minidoc.did }),
+      this.constellationRoleUsers(
+        `at://${minidoc.did}/${net.atview.managed.role.$nsid}/${rkey}`,
+        minidoc.did,
+      ),
+    ])
+
+    const role = roleResponse.body.value as net.atview.managed.role.Main
+    const populatedUsers = await this.populateRoleUsers(users.records)
+
+    return {
+      ...role,
+      users: {
+        total: users.total,
+        cursor: users.cursor,
+        list: populatedUsers,
+      },
+    }
+  }
+
+  /**
+   * Creates a `net.atview.managed.role` record on the OAuth user's repo.
+   */
+  async createRole(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    input: { name: string; description?: string; color?: string },
+  ): Promise<{ uri: string }> {
+    const name = input.name.trim()
+    if (!name) {
+      throw createError({ statusCode: 400, message: 'Role name not provided' })
+    }
+
+    const color = input.color?.trim()
+    if (color && !/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(color)) {
+      throw createError({ statusCode: 400, message: 'Invalid role color' })
+    }
+
+    const description = input.description?.trim()
+
+    const record = net.atview.managed.role.$build({
+      name,
+      createdAt: toDatetimeString(new Date()),
+      ...(description ? { description } : {}),
+      ...(color ? { color } : {}),
+    })
+
+    const result = await writeClient.create(net.atview.managed.role, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create role' })
+    }
+
+    await this.invalidateRolesCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+
+  /**
+   * Creates a `net.atview.account.role` record on the owner's repo linking `accountUri`
+   * to the managed role at `rkey`.
+   */
+  async createRoleAssignment(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    rkey: string,
+    accountUri: string,
+  ): Promise<{ uri: string }> {
+    const role = await this.getRole(ownerMinidoc, rkey)
+    if (role.users.list.some(user => user.accountUri === accountUri)) {
+      throw createError({
+        statusCode: 409,
+        message: 'Role assignment already exists',
+      })
+    }
+
+    const roleUri = `at://${ownerMinidoc.did}/${net.atview.managed.role.$nsid}/${rkey}`
+
+    const record = net.atview.account.role.$build({
+      role: roleUri as AtUriString,
+      account: accountUri as AtUriString,
+      createdAt: toDatetimeString(new Date()),
+    })
+
+    const result = await writeClient.create(net.atview.account.role, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create role assignment' })
+    }
+
+    await this.invalidateRolesCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+
+  /**
+   * Lists the role assignments (`net.atview.account.role` records) that link
+   * other accounts to this role.
+   */
+  private async constellationRoleUsers(roleUri: string, did: string) {
+    // todo: paginate to load all users
+    const { data } = await this.constellation.getBackLinks(
+      roleUri,
+      net.atview.account.role.$nsid,
+      'role',
+      ROLE_USERS_LIMIT,
+      undefined,
+      undefined,
+      [[did]],
+    )
+    return data
+  }
+
+  /**
+   * For each user backlink, fetches the underlying `net.atview.account.role`
+   * record to extract the linked account at-uri, then hydrates those accounts
+   * in a single batched populate call.
+   */
+  private async populateRoleUsers(users: Backlink[]): Promise<RoleUser[]> {
+    const accountUris = await Promise.all(users.map(user => this.getRoleAccountUri(user)))
+    const populated = await this.accountUtils.populateAccounts(
+      accountUris.filter((uri): uri is string => Boolean(uri)),
+    )
+    const populatedByUri = new Map(populated.map(account => [account.uri, account]))
+
+    return users.map((user, index) => {
+      const accountUri = accountUris[index]
+      if (!accountUri) return user
+      return {
+        ...user,
+        accountUri,
+        account: populatedByUri.get(accountUri),
+      }
+    })
+  }
+
+  /**
+   * Resolves a role-assignment backlink to the at-uri of the linked account.
+   */
+  private async getRoleAccountUri(backlink: Backlink): Promise<string | undefined> {
+    if (backlink.collection !== net.atview.account.role.$nsid) return undefined
+
+    const atUri = `at://${backlink.did}/${backlink.collection}/${backlink.rkey}`
+    if (!isAtUriString(atUri)) return undefined
+
+    try {
+      const response = await this.slingshotClient.xrpcSafe(blue.microcosm.repo.getRecordByUri, {
+        params: { at_uri: atUri },
+      })
+      if (!response.success) return undefined
+      return (response.body.value as net.atview.account.role.Main).account
+    } catch (error) {
+      console.error('[role-account-uri]', atUri, error)
+      return undefined
+    }
+  }
+}
diff --git a/server/utils/atproto/utils/sponsor.ts b/server/utils/atproto/utils/sponsor.ts
new file mode 100644
index 0000000000..1da837a20c
--- /dev/null
+++ b/server/utils/atproto/utils/sponsor.ts
@@ -0,0 +1,92 @@
+import type * as blue from '#shared/types/lexicons/blue'
+import * as net from '#shared/types/lexicons/net'
+import { Client, toDatetimeString } from '@atproto/lex'
+import type { AtUriString } from '@atproto/lex'
+import { AccountUtils, type PopulatedAccount } from './account'
+
+const HEADERS = { 'User-Agent': 'npmx' }
+const LIST_LIMIT = 50
+
+const CACHE_PREFIX = 'atproto-sponsor:'
+const CACHE_SPONSORS_KEY = (did: string) => `${CACHE_PREFIX}${did}:sponsors`
+
+export type SponsorEntry = Omit<net.atview.account.sponsor.Main, 'account'> & {
+  account: PopulatedAccount | undefined
+}
+
+export class SponsorUtils {
+  private readonly cache: CacheAdapter
+  private readonly accountUtils: AccountUtils
+
+  constructor() {
+    this.cache = getCacheAdapter('generic')
+    this.accountUtils = new AccountUtils()
+  }
+
+  async invalidateSponsorsCache(did: string): Promise<void> {
+    await this.cache.delete(CACHE_SPONSORS_KEY(did))
+  }
+
+  /**
+   * Lists the sponsor accounts referenced by `minidoc.did`, with each entry's
+   * `account` hydrated.
+   */
+  async getSponsors(
+    minidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+  ): Promise<SponsorEntry[]> {
+    const cacheKey = CACHE_SPONSORS_KEY(minidoc.did)
+    const cached = await this.cache.get<SponsorEntry[]>(cacheKey)
+    if (cached) return cached
+
+    const client = new Client(minidoc.pds, { headers: HEADERS })
+    const response = await client.listRecords(net.atview.account.sponsor.$nsid, {
+      limit: LIST_LIMIT,
+      repo: minidoc.did,
+    })
+
+    const records = response.body.records.map(
+      record => record.value as net.atview.account.sponsor.Main,
+    )
+    const populated = await this.accountUtils.populateAccounts(
+      records.map(record => record.account),
+    )
+    const populatedByUri = new Map(populated.map(account => [account.uri, account]))
+
+    const entries = records.map(record => ({
+      ...record,
+      account: populatedByUri.get(record.account),
+    }))
+
+    await this.cache.set(cacheKey, entries)
+    return entries
+  }
+
+  async createSponsorConnection(
+    writeClient: Client,
+    ownerMinidoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
+    accountUri: string,
+    note?: string,
+  ): Promise<{ uri: string }> {
+    const existing = await this.getSponsors(ownerMinidoc)
+    if (existing.some(entry => entry.account?.uri === accountUri)) {
+      throw createError({
+        statusCode: 409,
+        message: 'Sponsor connection already exists',
+      })
+    }
+
+    const record = net.atview.account.sponsor.$build({
+      account: accountUri as AtUriString,
+      createdAt: toDatetimeString(new Date()),
+      ...(note ? { note } : {}),
+    })
+
+    const result = await writeClient.create(net.atview.account.sponsor, record)
+    if (!result?.uri) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to create sponsor connection' })
+    }
+
+    await this.invalidateSponsorsCache(ownerMinidoc.did)
+    return { uri: result.uri }
+  }
+}
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index 955cfe76ce..f9bc05e25e 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -1,4 +1,5 @@
 import * as dev from '../types/lexicons/dev'
+import * as net from '../types/lexicons/net'
 
 // Duration
 export const CACHE_MAX_AGE_ONE_MINUTE = 60
@@ -65,6 +66,13 @@ export const PACKAGE_SUBJECT_REF = (packageName: string) =>
 // OAuth scopes as we add new ones we need to check these on certain actions. If not redirect the user to login again to upgrade the scopes
 export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
 export const PROFILE_SCOPE = `repo:${dev.npmx.actor.profile.$nsid}`
+/** OAuth scopes for writing npmx profile connection lists (ecosystem, nested, sponsors, role assignments). */
+export const NET_ATVIEW_ACCOUNT_ACTOR_WRITE_SCOPE = `repo:${net.atview.account.actor.$nsid}`
+export const NET_ATVIEW_ECOSYSTEM_WRITE_SCOPE = `repo:${net.atview.account.ecosystem.$nsid}`
+export const NET_ATVIEW_NESTED_WRITE_SCOPE = `repo:${net.atview.account.nested.$nsid}`
+export const NET_ATVIEW_SPONSOR_WRITE_SCOPE = `repo:${net.atview.account.sponsor.$nsid}`
+export const NET_ATVIEW_ACCOUNT_ROLE_WRITE_SCOPE = `repo:${net.atview.account.role.$nsid}`
+export const NET_ATVIEW_MANAGED_ROLE_WRITE_SCOPE = `repo:${net.atview.managed.role.$nsid}`
 export const NPMX_DEV_DID = 'did:plc:u5zp7npt5kpueado77kuihyz'
 export const TID_CLOCK_ID = 3
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5d0865d77f..a570045aa3 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -221,6 +221,9 @@ import {
   PackageVersions,
   PackageVulnerabilityTree,
   PaginationControls,
+  ProfileHeader,
+  ProfileAccountsList,
+  TabLinks,
   ProgressBar,
   ProvenanceBadge,
   Readme,
@@ -2231,6 +2234,72 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ProfileHeader', () => {
+    it('should have no accessibility violations', async () => {
+      const mockProfile = {
+        handle: 'test',
+        displayName: 'Test',
+        description: 'Test description',
+        website: 'https://test.com',
+        recordExists: true,
+      }
+      const component = await mountSuspended(ProfileHeader, {
+        props: {
+          profile: mockProfile,
+          identity: 'test',
+          activeTab: 'likes',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ProfileAccountsList', () => {
+    it('should have no accessibility violations', async () => {
+      const mockAccounts = [
+        {
+          account: {
+            handle: 'test',
+            displayName: 'Test',
+            description: 'Test description',
+            website: 'https://test.com',
+          },
+        },
+      ]
+      const component = await mountSuspended(ProfileAccountsList, {
+        props: {
+          entries: mockAccounts,
+          status: 'success',
+          emptyLabel: 'No accounts found',
+        },
+      })
+
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TabLinks', () => {
+    it('should have no accessibility violations', async () => {
+      const mockLinks = [
+        {
+          key: 'likes',
+          label: 'Likes',
+          to: '/profile/test',
+        },
+      ]
+      const component = await mountSuspended(TabLinks, {
+        props: {
+          links: mockLinks,
+          activeKey: 'likes',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('ViewModeToggle', () => {
     it('should have no accessibility violations in cards mode', async () => {
       const component = await mountSuspended(ViewModeToggle, {