diff --git a/src/app/feed/route.tsx b/src/app/feed/route.tsx
index 360d5fd117..f8211b5457 100644
--- a/src/app/feed/route.tsx
+++ b/src/app/feed/route.tsx
@@ -5,7 +5,7 @@ import type { AggregateRoot } from '@mx-space/api-client'
 import { InsertRule } from '~/components/ui/markdown/parsers/ins'
 import { MarkRule } from '~/components/ui/markdown/parsers/mark'
 import { MentionRule } from '~/components/ui/markdown/parsers/mention'
-import { SpoilderRule } from '~/components/ui/markdown/parsers/spoiler'
+import { SpoilerRule } from '~/components/ui/markdown/parsers/spoiler'
 import { escapeXml } from '~/lib/helper.server'
 import { getQueryClient } from '~/lib/query-client.server'
 import { apiClient } from '~/lib/request'
@@ -73,7 +73,7 @@ ${ReactDOM.renderToString(
         ),
       },
       additionalParserRules: {
-        spoilder: SpoilderRule,
+        spoilder: SpoilerRule,
         mention: MentionRule,
 
         mark: MarkRule,
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
index fcc6ce12e8..caf6c1b58f 100644
--- a/src/components/ui/markdown/Markdown.tsx
+++ b/src/components/ui/markdown/Markdown.tsx
@@ -22,7 +22,7 @@ import { InsertRule } from './parsers/ins'
 import { KateXRule } from './parsers/katex'
 import { MarkRule } from './parsers/mark'
 import { MentionRule } from './parsers/mention'
-import { SpoilderRule } from './parsers/spoiler'
+import { SpoilerRule } from './parsers/spoiler'
 import {
   MParagraph,
   MTable,
@@ -34,6 +34,7 @@ import { MDetails } from './renderers/collapse'
 import { MFootNote } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
 import { MarkdownImage } from './renderers/image'
+import { MTag } from './renderers/tag'
 
 const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))
 
@@ -89,11 +90,15 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           footer: MFootNote,
           details: MDetails,
           img: MarkdownImage,
+          tag: MTag,
 
           // for custom react component
+          // Tag: MTag,
+
           LinkCard,
           Gallery,
           script: allowsScript ? Script : undefined,
+
           ...overrides,
         },
 
@@ -221,7 +226,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           ...renderers,
         },
         additionalParserRules: {
-          spoilder: SpoilderRule,
+          spoilder: SpoilerRule,
           mention: MentionRule,
 
           mark: MarkRule,
diff --git a/src/components/ui/markdown/parsers/spoiler.tsx b/src/components/ui/markdown/parsers/spoiler.tsx
index 946939bc80..a4493419a7 100644
--- a/src/components/ui/markdown/parsers/spoiler.tsx
+++ b/src/components/ui/markdown/parsers/spoiler.tsx
@@ -1,13 +1,13 @@
-import type { MarkdownToJSX } from 'markdown-to-jsx'
+import React from 'react'
 import {
-  Priority,
   parseCaptureInline,
+  Priority,
   simpleInlineRegex,
 } from 'markdown-to-jsx'
-import React from 'react'
+import type { MarkdownToJSX } from 'markdown-to-jsx'
 
-// ||Spoilder||
-export const SpoilderRule: MarkdownToJSX.Rule = {
+// ||Spoiler||
+export const SpoilerRule: MarkdownToJSX.Rule = {
   match: simpleInlineRegex(
     /^\|\|((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)\|\|/,
   ),
diff --git a/src/components/ui/markdown/renderers/tag.tsx b/src/components/ui/markdown/renderers/tag.tsx
new file mode 100644
index 0000000000..0fa3e30e7f
--- /dev/null
+++ b/src/components/ui/markdown/renderers/tag.tsx
@@ -0,0 +1,8 @@
+// @ts-nocheck
+import { Tag } from '../../tag/Tag'
+
+export const MTag: Component = ({ children }) => {
+  const text = children?.[0]
+  if (typeof text !== 'string') return null
+  return <Tag text={children[0]} />
+}
diff --git a/src/components/ui/tag/Tag.tsx b/src/components/ui/tag/Tag.tsx
new file mode 100644
index 0000000000..9098a5f90d
--- /dev/null
+++ b/src/components/ui/tag/Tag.tsx
@@ -0,0 +1,35 @@
+import { memo } from 'react'
+
+import { useIsDark } from '~/hooks/common/use-is-dark'
+import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color'
+
+import { MotionButtonBase } from '../button'
+
+export const Tag = memo(function Tag<T>(props: {
+  onClick?: (passProps: T) => void
+  text: string
+  passProps: T
+  count?: number
+}) {
+  const { text, count, passProps, onClick } = props
+  const { dark, light } = getColorScheme(stringToHue(text))
+  const isDark = useIsDark()
+
+  const bgColor = isDark ? dark.background : light.background
+  const Tag = onClick ? MotionButtonBase : 'span'
+  return (
+    <Tag
+      onClick={() => {
+        onClick?.(passProps)
+      }}
+      key={text}
+      className="space-x-1 rounded-md px-3 py-2"
+      style={{
+        backgroundColor: addAlphaToHSL(bgColor, 0.7),
+      }}
+    >
+      <span>{text}</span>
+      {!!count && <span className="self-end text-xs">({count})</span>}
+    </Tag>
+  )
+})
diff --git a/src/components/widgets/post/PostTagsFAB.tsx b/src/components/widgets/post/PostTagsFAB.tsx
index 38944d3e41..2084fb1904 100644
--- a/src/components/widgets/post/PostTagsFAB.tsx
+++ b/src/components/widgets/post/PostTagsFAB.tsx
@@ -6,12 +6,10 @@ import Link from 'next/link'
 import type { TagModel } from '@mx-space/api-client'
 
 import { EmptyIcon } from '~/components/icons/empty'
-import { MotionButtonBase } from '~/components/ui/button'
 import { FABPortable } from '~/components/ui/fab'
 import { TimelineList } from '~/components/ui/list/TimelineList'
 import { Loading } from '~/components/ui/loading'
-import { useIsDark } from '~/hooks/common/use-is-dark'
-import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color'
+import { Tag } from '~/components/ui/tag/Tag'
 import { apiClient } from '~/lib/request'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
@@ -52,37 +50,22 @@ const TagsModal = () => {
   return (
     <div className="flex flex-wrap gap-3">
       {data.map((tag) => {
-        return <Tag key={tag.name} {...tag} onClick={handleTagClick} />
+        return <TagInternal key={tag.name} {...tag} onClick={handleTagClick} />
       })}
     </div>
   )
 }
 
-const Tag = memo(function Tag(
+const TagInternal = memo(function TagInternal(
   props: TagModel & {
     onClick?: (tag: TagModel) => void
   },
 ) {
   const { count, name } = props
 
-  const { dark, light } = getColorScheme(stringToHue(name))
-  const isDark = useIsDark()
-
-  const bgColor = isDark ? dark.background : light.background
   return (
-    <MotionButtonBase
-      onClick={() => {
-        props.onClick?.(props)
-      }}
-      key={name}
-      className="space-x-1 rounded-md px-3 py-2"
-      style={{
-        backgroundColor: addAlphaToHSL(bgColor, 0.7),
-      }}
-    >
-      <span>{name}</span>
-      <span className="self-end text-xs">({count})</span>
-    </MotionButtonBase>
+    // @ts-ignore
+    <Tag count={count} text={name} onClick={props.onClick} passProps={props} />
   )
 })