diff --git a/src/components/common/CharacterFloatCard.tsx b/src/components/common/CharacterFloatCard.tsx
index b7688585..301fdbf4 100644
--- a/src/components/common/CharacterFloatCard.tsx
+++ b/src/components/common/CharacterFloatCard.tsx
@@ -42,7 +42,7 @@ export const CharacterFloatCard: React.FC<{
 
   return (
     <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
+      <div className="inline" ref={refs.setReference} {...getReferenceProps()}>
         {children}
       </div>
       {isMounted && (
diff --git a/src/components/ui/Mention.tsx b/src/components/ui/Mention.tsx
index b03c9124..86fb4ac6 100644
--- a/src/components/ui/Mention.tsx
+++ b/src/components/ui/Mention.tsx
@@ -2,21 +2,39 @@ import React from "react"
 import { CharacterFloatCard } from "../common/CharacterFloatCard"
 import { UniLink } from "./UniLink"
 import { getSiteLink } from "~/lib/helpers"
+import { useGetSite } from "~/queries/site"
 
 export const Mention: React.FC<{
   id: string
-}> = ({ id }) => {
-  const siteId = id?.replace(/^user-content-/, "")
-  return (
-    <CharacterFloatCard siteId={siteId}>
-      <UniLink
-        href={getSiteLink({
-          subdomain: siteId,
-        })}
-        className="inline-block"
-      >
-        @{siteId}
-      </UniLink>
-    </CharacterFloatCard>
-  )
+  children?: any
+}> = ({ id, children }) => {
+  let siteId
+  if (
+    children?.[0] &&
+    typeof children[0] === "string" &&
+    children[0].startsWith("@")
+  ) {
+    siteId = children[0].replace(/^@/, "")
+  } else if (id) {
+    siteId = id.replace(/^user-content-/, "")
+  }
+
+  const site = useGetSite(siteId)
+
+  if (siteId && site.data) {
+    return (
+      <CharacterFloatCard siteId={siteId}>
+        <UniLink
+          href={getSiteLink({
+            subdomain: siteId,
+          })}
+          className="inline-block"
+        >
+          @{siteId}
+        </UniLink>
+      </CharacterFloatCard>
+    )
+  } else {
+    return <>{children}</>
+  }
 }
diff --git a/src/editor/Mention.tsx b/src/editor/Mention.tsx
index 8e963842..e15c20bc 100644
--- a/src/editor/Mention.tsx
+++ b/src/editor/Mention.tsx
@@ -5,6 +5,6 @@ export const Mention: ICommand = {
   label: "Mention",
   icon: "i-mingcute:at-line",
   execute: ({ view }) => {
-    wrapExecute({ view, prepend: "::mention{#", append: "}" })
+    wrapExecute({ view, prepend: "@", append: "" })
   },
 }
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index 98ad5fcc..e1da6c99 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -70,6 +70,8 @@ export const renderPageContent = (
     tree: null,
   }
 
+  content = content.replace(/(@\w+)/g, "<mention>$1</mention>")
+
   let contentHTML = ""
   let result: any = null
   try {