diff --git a/frontend/src/components/settings/MembershipRosterCard.vue b/frontend/src/components/settings/MembershipRosterCard.vue
index 96b8816..1052c01 100644
--- a/frontend/src/components/settings/MembershipRosterCard.vue
+++ b/frontend/src/components/settings/MembershipRosterCard.vue
@@ -33,10 +33,10 @@
           never synced
         </span>
         <span v-else-if="!p.fresh" class="fc-roster__stale">
-          last synced {{ ago(p.last_success_at) }} — too old to rely on
+          last synced {{ formatRelative(p.last_success_at) }} — too old to rely on
         </span>
         <span v-else class="fc-roster__ok">
-          synced {{ ago(p.last_success_at) }}
+          synced {{ formatRelative(p.last_success_at) }}
         </span>
       </div>
 
@@ -47,7 +47,7 @@
           {{ p.last_count }} membership{{ p.last_count === 1 ? '' : 's' }} found
         </template>
         <template v-else-if="p.last_attempt_at">
-          tried {{ ago(p.last_attempt_at) }}, no successful sync yet
+          tried {{ formatRelative(p.last_attempt_at) }}, no successful sync yet
         </template>
       </div>
 
@@ -68,18 +68,12 @@
 <script setup>
 import { onMounted } from 'vue'
 
+import { formatRelative } from '../../utils/date.js'
 import { useMembershipSyncStore } from '../../stores/membershipSync.js'
 import MaintenanceTile from '../common/MaintenanceTile.vue'
 
 const store = useMembershipSyncStore()
 
-function ago (iso) {
-  const diff = (Date.now() - new Date(iso).getTime()) / 1000
-  if (diff < 3600) return `${Math.max(1, Math.floor(diff / 60))}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
-}
-
 async function refresh () {
   await store.syncNow()
   await store.load()