diff --git a/web/pages/link/[slug].tsx b/web/pages/link/[slug].tsx
index 119fec77..fa728c85 100644
--- a/web/pages/link/[slug].tsx
+++ b/web/pages/link/[slug].tsx
@@ -1,14 +1,17 @@
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { SEO } from 'web/components/SEO'
 import { Title } from 'web/components/title'
 import { claimManalink } from 'web/lib/firebase/api'
 import { useManalink } from 'web/lib/firebase/manalinks'
 import { ManalinkCard } from 'web/components/manalink-card'
 import { useUser } from 'web/hooks/use-user'
-import { firebaseLogin } from 'web/lib/firebase/users'
+import { firebaseLogin, getUser } from 'web/lib/firebase/users'
 import { Row } from 'web/components/layout/row'
 import { Button } from 'web/components/button'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
+import { User } from 'common/lib/user'
+import { Manalink } from 'common/manalink'
 
 export default function ClaimPage() {
   const user = useUser()
@@ -18,6 +21,8 @@ export default function ClaimPage() {
   const [claiming, setClaiming] = useState(false)
   const [error, setError] = useState<string | undefined>(undefined)
 
+  useReferral(user, manalink)
+
   if (!manalink) {
     return <></>
   }
@@ -76,3 +81,13 @@ export default function ClaimPage() {
     </>
   )
 }
+
+const useReferral = (user: User | undefined | null, manalink?: Manalink) => {
+  const [creator, setCreator] = useState<User | undefined>(undefined)
+
+  useEffect(() => {
+    if (manalink?.fromId) getUser(manalink.fromId).then(setCreator)
+  }, [manalink])
+
+  useSaveReferral(user, { defaultReferrer: creator?.username })
+}