diff --git a/web/app/components/datasets/documents/detail/completed/common/dot.tsx b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
new file mode 100644
index 0000000000..c791b93e2d
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Dot = () => {
+  return (
+    <div className='text-text-quaternary text-xs font-medium'>·</div>
+  )
+}
+
+Dot.displayName = 'Dot'
+
+export default React.memo(Dot)
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
new file mode 100644
index 0000000000..9517d38f1e
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Tag = ({ text }: { text: string }) => {
+  return (
+    <div className='inline-flex items-center gap-x-0.5'>
+      <span className='text-text-quaternary text-xs font-medium'>#</span>
+      <span className='text-text-tertiary text-xs'>{text}</span>
+    </div>
+  )
+}
+
+Tag.displayName = 'Tag'
+
+export default React.memo(Tag)