diff --git a/src/components/common/CharacterCard.tsx b/src/components/common/CharacterCard.tsx
index 773247e9..1d3f85bf 100644
--- a/src/components/common/CharacterCard.tsx
+++ b/src/components/common/CharacterCard.tsx
@@ -1,14 +1,12 @@
 import { useTranslation } from "next-i18next"
-import { useEffect, useState } from "react"
 
 import { FollowingButton } from "~/components/common/FollowingButton"
 import { FollowingCount } from "~/components/common/FollowingCount"
 import { Titles } from "~/components/common/Titles"
 import { Avatar } from "~/components/ui/Avatar"
 import { useDate } from "~/hooks/useDate"
-import type { ExpandedCharacter } from "~/lib/types"
 import { cn } from "~/lib/utils"
-import * as siteModel from "~/models/site.model"
+import { useGetCharacterCard } from "~/queries/site"
 
 export const CharacterCard: React.FC<{
   siteId?: string
@@ -27,25 +25,14 @@ export const CharacterCard: React.FC<{
   simple,
   style,
 }) => {
-  const [firstOpen, setFirstOpen] = useState("")
-  const [site, setSite] = useState<ExpandedCharacter>()
   const date = useDate()
   const { t } = useTranslation("common")
 
-  useEffect(() => {
-    if (open && (firstOpen !== (siteId || address) || !site)) {
-      if (siteId || address) {
-        setFirstOpen(siteId || address || "")
-        if (siteId) {
-          siteModel.getSite(siteId).then((site) => setSite(site))
-        } else if (address) {
-          siteModel.getSiteByAddress(address).then((site) => setSite(site))
-        }
-      } else {
-        setSite(undefined)
-      }
-    }
-  }, [open, firstOpen, siteId, address, site])
+  const { data: site } = useGetCharacterCard({
+    siteId,
+    address,
+    enabled: open || false,
+  })
 
   return (
     <span
diff --git a/src/queries/site.ts b/src/queries/site.ts
index d5ba56dd..c9292444 100644
--- a/src/queries/site.ts
+++ b/src/queries/site.ts
@@ -401,3 +401,29 @@ export const useGetGreenfieldId = (cid?: string) => {
     return siteModel.getGreenfieldId(cid)
   })
 }
+
+export const useGetCharacterCard = ({
+  siteId,
+  address,
+  enabled,
+}: {
+  siteId?: string
+  address?: string
+  enabled: boolean
+}) => {
+  return useQuery(
+    ["useGetCharacterCard", { siteId, address }],
+    async () => {
+      if (siteId) {
+        return siteModel.getSite(siteId)
+      } else if (address) {
+        return siteModel.getSiteByAddress(address)
+      } else {
+        return null
+      }
+    },
+    {
+      enabled,
+    },
+  )
+}