diff --git a/package.json b/package.json
index baa15ae7..aa9a42d1 100644
--- a/package.json
+++ b/package.json
@@ -41,10 +41,14 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@swc/helpers": "~0.5.0",
     "@tailwindcss/forms": "^0.5.3",
+    "@tiptap/extension-image": "^2.2.4",
     "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-mention": "^2.2.1",
+    "@tiptap/extension-underline": "^2.2.4",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/suggestion": "^2.2.1",
     "apexcharts": "^3.41.0",
     "axios": "^1.4.0",
     "bcryptjs": "^2.4.3",
@@ -59,6 +63,7 @@
     "firebase": "^10.7.1",
     "firebase-admin": "^12.0.0",
     "formik": "^2.4.1",
+    "fuse.js": "^7.0.0",
     "immer": "^10.0.2",
     "ioredis": "^5.3.2",
     "jsonwebtoken": "^9.0.0",
@@ -81,6 +86,7 @@
     "react-icons": "^4.9.0",
     "read-excel-file": "^5.6.1",
     "resend": "^1.0.0",
+    "tippy.js": "^6.3.7",
     "tslib": "^2.3.0",
     "zod": "^3.21.4",
     "zustand": "^4.3.8"
diff --git a/packages/be-gateway/src/routes/comment/index.ts b/packages/be-gateway/src/routes/comment/index.ts
new file mode 100644
index 00000000..9b45be0c
--- /dev/null
+++ b/packages/be-gateway/src/routes/comment/index.ts
@@ -0,0 +1,129 @@
+import { Request, Response } from 'express'
+import { CommentRepository } from '@shared/models'
+import { Comment } from '@prisma/client'
+import {
+  BaseController,
+  Controller,
+  Res,
+  Req,
+  Body,
+  Next,
+  ExpressResponse,
+  Get,
+  Post,
+  Put,
+  Delete
+} from '../../core'
+import { pusherServer } from '../../lib/pusher-server'
+import { AuthRequest } from '../../types'
+
+@Controller('/comment')
+export default class TaskComment extends BaseController {
+  name: string
+  commentRepo: CommentRepository
+  constructor() {
+    super()
+    this.name = 'comment'
+    this.commentRepo = new CommentRepository()
+  }
+
+  @Get('')
+  async getCommentByObjectId(@Res() res: Response, @Req() req: Request) {
+    const { taskId } = req.query as { taskId: string }
+
+    try {
+      const results = await this.commentRepo.mdCommentGetAllByTask(taskId)
+      // results.sort((a, b) => (a.createdAt < b.createdAt ? 1 : 0))
+      res.json({ status: 200, data: results })
+    } catch (error) {
+      res.json({
+        status: 500,
+        err: error,
+        data: []
+      })
+    }
+  }
+
+  @Post('')
+  createComment(
+    @Body() body: Omit<Comment, 'id'>,
+    @Res() res: ExpressResponse,
+    @Req() req: AuthRequest
+  ) {
+    this.commentRepo
+      .mdCommentAdd(body)
+      .then(result => {
+        const { taskId } = body as Comment
+        const eventName = `event-send-task-comment-${taskId}`
+
+        console.log(`trigger event ${eventName} `, body)
+
+        pusherServer.trigger('team-collab', eventName, {
+          ...result
+        })
+
+        res.json({ status: 200, data: result })
+      })
+      .catch(error => {
+        console.log({ error })
+        res.json({
+          status: 500,
+          err: error
+        })
+      })
+  }
+
+  @Put('')
+  updateComment(@Res() res: Response, @Req() req: AuthRequest, @Next() next) {
+    const body = req.body as Comment
+    const { id, ...rest } = body
+    this.commentRepo
+      .mdCommentUpdate(id, rest)
+      .then(result => {
+        const { taskId } = result as Comment
+        const eventName = `event-update-task-comment-${taskId}`
+
+        console.log(`trigger event ${eventName} `, body)
+
+        pusherServer.trigger('team-collab', eventName, {
+          ...result
+        })
+
+        res.json({ status: 200, data: result })
+      })
+      .catch(error => {
+        console.log({ error })
+        res.json({
+          status: 500,
+          err: error
+        })
+      })
+  }
+
+  @Delete('')
+  async commentDelete(@Req() req: Request, @Res() res: Response) {
+    try {
+      const { id, taskId, updatedBy } = req.query as {
+        id: string
+        taskId: string
+        updatedBy: string
+      }
+      const result = await this.commentRepo.mdCommentDel(id)
+      const eventName = `event-delete-task-comment-${taskId}`
+
+      console.log(`trigger event ${eventName} `, id)
+
+      pusherServer.trigger('team-collab', eventName, {
+        id,
+        triggerBy: updatedBy
+      })
+
+      res.json({ status: 200, data: result })
+    } catch (error) {
+      res.json({
+        status: 500,
+        err: error
+      })
+    }
+  }
+}
diff --git a/packages/be-gateway/src/routes/index.ts b/packages/be-gateway/src/routes/index.ts
index 86db9f18..ef2f0437 100644
--- a/packages/be-gateway/src/routes/index.ts
+++ b/packages/be-gateway/src/routes/index.ts
@@ -14,6 +14,7 @@ import buzzerRouter from './buzzer'
 import meetingRouter from './meeting'
 import { authMiddleware } from '../middlewares'
 import ActivityRouter from './activity'
+import CommentRouer from './comment'
 
 // import "./test";
 import ProjectController from './project/project.controller'
@@ -42,6 +43,7 @@ router.use(
     TestController,
     ProjectController,
     ActivityRouter,
+    CommentRouer,
     EventController,
     ProjectViewController,
     PermissionController,
diff --git a/packages/shared-models/src/lib/_prisma.ts b/packages/shared-models/src/lib/_prisma.ts
index 3cd821ad..b36e1e41 100644
--- a/packages/shared-models/src/lib/_prisma.ts
+++ b/packages/shared-models/src/lib/_prisma.ts
@@ -20,3 +20,4 @@ export const taskAutomation = pmClient.taskAutomation
 export const fileStorageModel = pmClient.fileStorage
 export const visionModel = pmClient.vision
 export const activityModel = pmClient.activity
+export const commentModel = pmClient.comment
diff --git a/packages/shared-models/src/lib/comment.repository.ts b/packages/shared-models/src/lib/comment.repository.ts
new file mode 100644
index 00000000..b75289b8
--- /dev/null
+++ b/packages/shared-models/src/lib/comment.repository.ts
@@ -0,0 +1,50 @@
+import { Comment } from '@prisma/client'
+import { pmClient } from './_prisma'
+
+const mdComment = pmClient.comment
+export class CommentRepository {
+  async mdCommentAdd(data: Omit<Comment, 'id'>) {
+    return mdComment.create({
+      data
+    })
+  }
+
+  async mdCommentAddMany(data: Omit<Comment, 'id'>[]) {
+    return mdComment.createMany({
+      data
+    })
+  }
+
+  async mdCommentDel(id: string) {
+    return mdComment.delete({
+      where: {
+        id
+      }
+    })
+  }
+
+  async mdCommentUpdate(id: string, data: Omit<Comment, 'id'>) {
+    return mdComment.update({
+      where: {
+        id
+      },
+      data: data
+    })
+  }
+
+  async mdCommentGetAllByTask(taskId: string) {
+    return mdComment.findMany({
+      where: {
+        taskId: taskId
+      }
+    })
+  }
+
+  async mdCommentGetAllByProject(projectId: string) {
+    return mdComment.findMany({
+      where: {
+        projectId: projectId
+      }
+    })
+  }
+}
diff --git a/packages/shared-models/src/lib/index.ts b/packages/shared-models/src/lib/index.ts
index d7f95101..277737a4 100644
--- a/packages/shared-models/src/lib/index.ts
+++ b/packages/shared-models/src/lib/index.ts
@@ -18,3 +18,4 @@ export * from './taskAutomation'
 export * from './storage'
 export * from './activity'
 export * from './scheduler.repository'
+export * from './comment.repository'
diff --git a/packages/shared-models/src/prisma/schema.prisma b/packages/shared-models/src/prisma/schema.prisma
index eccaae89..74af58b6 100644
--- a/packages/shared-models/src/prisma/schema.prisma
+++ b/packages/shared-models/src/prisma/schema.prisma
@@ -403,3 +403,15 @@ model Activity {
   updatedAt  DateTime?
   updatedBy  String?
 }
+
+model Comment {
+  id          String     @id @default(auto()) @map("_id") @db.ObjectId
+  taskId      String     @db.ObjectId
+  projectId   String     @db.ObjectId
+
+  content     String
+
+  createdBy  String
+  createdAt  DateTime
+  updatedAt  DateTime
+}
diff --git a/packages/shared-ui/src/components/Controls/RichTextEditorControl/MentionList.css b/packages/shared-ui/src/components/Controls/RichTextEditorControl/MentionList.css
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/shared-ui/src/components/Controls/RichTextEditorControl/MentionList.tsx b/packages/shared-ui/src/components/Controls/RichTextEditorControl/MentionList.tsx
new file mode 100644
index 00000000..1ff8a980
--- /dev/null
+++ b/packages/shared-ui/src/components/Controls/RichTextEditorControl/MentionList.tsx
@@ -0,0 +1,102 @@
+import { SuggestionProps } from '@tiptap/suggestion'
+import {
+  ReactElement,
+  Ref,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState
+} from 'react'
+
+import MemberAvatar from '@/components/MemberAvatar'
+
+export type TItemBase = {
+  id: string
+  label: string
+}
+type TMemberMentionProps<I> = SuggestionProps<I>
+type TMemberMentionRef = Ref<{ onKeyDown: ({ event }: { event: any }) => void }>
+
+const Mention = <I,>(
+  props: TMemberMentionProps<I & TItemBase>,
+  ref: TMemberMentionRef
+) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const selectItem = (index: number) => {
+    const item = props.items[index]
+
+    if (item) {
+      const { id, label } = item
+      props.command({ id, label })
+    }
+  }
+
+  const upHandler = () => {
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length
+    )
+  }
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length)
+  }
+
+  const enterHandler = () => {
+    selectItem(selectedIndex)
+  }
+
+  useEffect(() => setSelectedIndex(0), [props.items])
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === 'ArrowUp') {
+        upHandler()
+        return true
+      }
+
+      if (event.key === 'ArrowDown') {
+        downHandler()
+        return true
+      }
+
+      if (event.key === 'Enter') {
+        enterHandler()
+        return true
+      }
+
+      return false
+    }
+  }))
+
+  return (
+    <div className="items border-gray-200">
+      {props.items?.length ? (
+        props.items?.map((item, index) => (
+          <button
+            className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
+            key={index}
+            onClick={() => {
+              selectItem(index)
+            }}>
+            <div className="flex gap-3 items-start">
+              <MemberAvatar uid={item.id || ''} noName={true} />
+              <div className="flex flex-col">
+                {item.label}
+                <span className="italic text-gray-600 text-xs">
+                  {item?.email}
+                </span>
+              </div>
+            </div>
+          </button>
+        ))
+      ) : (
+        <div className="item">No result</div>
+      )}
+    </div>
+  )
+}
+
+export default forwardRef(Mention) as <I>(
+  p: TMemberMentionProps<I & TItemBase> & { r: TMemberMentionRef }
+) => ReactElement
diff --git a/packages/shared-ui/src/components/Controls/RichTextEditorControl/index.tsx b/packages/shared-ui/src/components/Controls/RichTextEditorControl/index.tsx
new file mode 100644
index 00000000..2c0ee715
--- /dev/null
+++ b/packages/shared-ui/src/components/Controls/RichTextEditorControl/index.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react'
+import { TextareaProps } from '../type'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
+import Underline from '@tiptap/extension-underline'
+import Image from '@tiptap/extension-image'
+
+import { RiImageAddFill } from 'react-icons/ri'
+import { Extension } from '@tiptap/core'
+// import { keymap } from '@tiptap/pm/keymap'
+// import { baseKeymap } from '@tiptap/pm/commands'
+
+import './style.css'
+import { Text } from '@tiptap/extension-text'
+
+const DisableEscape = Extension.create({
+  addKeyboardShortcuts() {
+    return {
+      Escape: () => true
+    }
+  }
+})
+
+// const KeyEventHandler = Extension.create({
+//   name: 'KeyEventHandler',
+//
+//   addProseMirrorPlugins() {
+//     return [
+//       keymap(baseKeymap),
+//       keymap({
+//         'Shift-a': () => {
+//           console.log('Shift-a pressed')
+//           return true
+//         }
+//       })
+//     ]
+//   }
+// })
+
+export default function RichTextEditor({
+  title,
+  value,
+  helper,
+  error,
+  required,
+  disabled,
+  readOnly,
+  extensions = [],
+  onCtrlEnter,
+  onCtrlEsc
+}: TextareaProps) {
+  const classes = ['form-control']
+
+  disabled && classes.push('disabled')
+  required && classes.push('required')
+  readOnly && classes.push('readonly')
+  error && classes.push('error')
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: false }),
+      Bold,
+      Italic,
+      Underline,
+      Image,
+      ...extensions,
+      DisableEscape,
+      // KeyEventHandler,
+      Text.extend({
+        addKeyboardShortcuts() {
+          return {
+            'Control-Enter': () => {
+              const html = this.editor.getHTML()
+              html && onCtrlEnter && onCtrlEnter(html)
+              this.editor.commands.clearContent()
+              return true
+            },
+            'Control-Escape': () => {
+              console.log('Control-escape pressed')
+              onCtrlEsc && onCtrlEsc()
+              return true
+            }
+          }
+        }
+      })
+    ],
+    editable: !readOnly,
+    content: value
+  })
+
+  useEffect(() => {
+    value &&
+      editor?.commands.setContent(value, false, { preserveWhitespace: 'full' })
+  }, [value, editor])
+
+  useEffect(() => {
+    editor?.setEditable(!readOnly, true)
+  }, [readOnly, editor])
+
+  if (!editor) {
+    return null
+  }
+
+  const marks = () => {
+    return (
+      <div className="flex gap-2 mb-3 ml-1 mr-1 pb-3 border-b border-b-gray-400 color">
+        <button
+          className={`mark ${editor.isActive('bold') ? 'mark-active' : ''}`}
+          style={{ fontStyle: 'bold' }}
+          onClick={() => {
+            editor.chain().focus().toggleBold().run()
+          }}
+          type="button">
+          B
+        </button>
+        <button
+          className={`mark ${editor.isActive('italic') ? 'mark-active' : ''}`}
+          onClick={() => {
+            editor.chain().focus().toggleItalic().run()
+          }}
+          type="button"
+          style={{ fontStyle: 'italic' }}>
+          I
+        </button>
+        <button
+          className={`mark ${
+            editor.isActive('underline') ? 'mark-active' : ''
+          }`}
+          type="button"
+          onClick={() => {
+            editor.chain().focus().toggleUnderline().run()
+          }}
+          style={{ textDecoration: 'underline' }}>
+          U
+        </button>
+        <RiImageAddFill
+          size={24}
+          onClick={() => {
+            const url = window.prompt('URL')
+
+            if (url) {
+              editor.chain().focus().setImage({ src: url }).run()
+            }
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.join(' ')}>
+      {title ? <label>{title}</label> : null}
+      <div className="relative form-control-wrapper inline-flex w-full ">
+        <div className="form-input">
+          {!readOnly ? marks() : null}
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+      {helper && !error ? (
+        <p className="mt-2 text-sm text-gray-500">{helper}</p>
+      ) : null}
+      {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
+    </div>
+  )
+}
diff --git a/packages/shared-ui/src/components/Controls/RichTextEditorControl/style.css b/packages/shared-ui/src/components/Controls/RichTextEditorControl/style.css
new file mode 100644
index 00000000..7510afc5
--- /dev/null
+++ b/packages/shared-ui/src/components/Controls/RichTextEditorControl/style.css
@@ -0,0 +1,50 @@
+.tiptap {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.mention {
+  border: 1px solid #000;
+  border-radius: 0.4rem;
+  box-decoration-break: clone;
+  padding: 0.1rem 0.3rem;
+}
+
+.mark {
+  min-width: 2rem;
+  border: 0.5px solid #bfbfbf;
+  border-radius: 5px;
+  padding: 1px;
+}
+
+.mark-active {
+  background-color: #bfbfbf;
+}
+
+.items {
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.9rem;
+  overflow: hidden;
+  padding: 0.2rem;
+  position: relative;
+  pointer-events: auto;
+}
+
+.item {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.4rem;
+  display: block;
+  margin: 0;
+  padding: 0.2rem 0.4rem;
+  text-align: left;
+  width: 100%;
+
+  &.is-selected {
+    border-color: #000;
+  }
+}
diff --git a/packages/shared-ui/src/components/Controls/RichTextEditorControl/suggestionBase.ts b/packages/shared-ui/src/components/Controls/RichTextEditorControl/suggestionBase.ts
new file mode 100644
index 00000000..006bd787
--- /dev/null
+++ b/packages/shared-ui/src/components/Controls/RichTextEditorControl/suggestionBase.ts
@@ -0,0 +1,75 @@
+import { ReactRenderer } from '@tiptap/react'
+import tippy, { Instance } from 'tippy.js'
+import MentionList from './MentionList'
+import { type TRichTextEditorMention } from '../type'
+import { SuggestionOptions } from '@tiptap/suggestion'
+import Fuse from 'fuse.js'
+
+export const getMentionSuggestion = <T>(
+  items: (TRichTextEditorMention & T)[]
+): Partial<SuggestionOptions> => ({
+  items: ({ query }): TRichTextEditorMention[] => {
+    if (!query) return items
+
+    const fuse = new Fuse(items, {
+      keys: ['label', 'email']
+    })
+    const searchResults = fuse.search(query.toLowerCase())
+    return searchResults.map(({ item }) => item)
+  },
+
+  render: () => {
+    let component: ReactRenderer
+    let popup: Instance[]
+
+    return {
+      onStart: props => {
+        component = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor
+        })
+
+        if (!props.clientRect) {
+          return
+        }
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start'
+        })
+      },
+
+      onUpdate(props) {
+        component.updateProps(props)
+
+        if (!props.clientRect) {
+          return
+        }
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        })
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      }
+    }
+  }
+})
diff --git a/packages/shared-ui/src/components/Controls/TextareaControl/index.tsx b/packages/shared-ui/src/components/Controls/TextareaControl/index.tsx
index e1aea566..c309d7ce 100644
--- a/packages/shared-ui/src/components/Controls/TextareaControl/index.tsx
+++ b/packages/shared-ui/src/components/Controls/TextareaControl/index.tsx
@@ -1,15 +1,22 @@
-import { ChangeEvent, useEffect, useState } from "react";
-import { TextareaProps } from "../type";
+import { ChangeEvent, useEffect, useState } from 'react'
+import { TextareaProps } from '../type'
 
 export default function TextareaControl({
-  title, value, name,
-  onChange, placeholder,
-  onEnter,
-  helper, error,
-  required, disabled, readOnly,
-  rows = 4, cols,
+  title,
+  value,
+  name,
+  onChange,
+  placeholder,
+  onShiftEnter,
+  helper,
+  error,
+  required,
+  disabled,
+  readOnly,
+  rows = 4,
+  cols
 }: TextareaProps) {
-  const classes = ["form-control"]
+  const classes = ['form-control']
   const [val, setValue] = useState(value)
 
   const onInputChange = (ev: ChangeEvent<HTMLTextAreaElement>) => {
@@ -20,34 +27,38 @@ export default function TextareaControl({
     setValue(value)
   }, [value])
 
-  disabled && classes.push("disabled")
-  required && classes.push("required")
-  readOnly && classes.push("readonly")
-  error && classes.push("error")
+  disabled && classes.push('disabled')
+  required && classes.push('required')
+  readOnly && classes.push('readonly')
+  error && classes.push('error')
 
-  return <div className={classes.join(" ")}>
-    {title ? <label>{title}</label> : null}
-    <div className="relative form-control-wrapper inline-flex w-full">
-      <textarea
-        value={val}
-        name={name}
-        cols={cols}
-        rows={rows}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onInputChange}
-        onKeyUp={(ev) => {
-          const target = ev.target as HTMLTextAreaElement
-          if (ev.key === 'Enter' && !ev.shiftKey) {
-            onEnter && onEnter(target.value, target)
-            console.log('pressed Enter')
-          }
-        }}
-        placeholder={placeholder}
-        className="form-input"
-      />
+  return (
+    <div className={classes.join(' ')}>
+      {title ? <label>{title}</label> : null}
+      <div className="relative form-control-wrapper inline-flex w-full">
+        <textarea
+          value={val}
+          name={name}
+          cols={cols}
+          rows={rows}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={onInputChange}
+          onKeyUp={ev => {
+            const target = ev.target as HTMLTextAreaElement
+            if (ev.key === 'Enter' && !ev.shiftKey) {
+              onShiftEnter && onShiftEnter(target.value, target)
+              console.log('pressed Enter')
+            }
+          }}
+          placeholder={placeholder}
+          className="form-input"
+        />
+      </div>
+      {helper && !error ? (
+        <p className="mt-2 text-sm text-gray-500">{helper}</p>
+      ) : null}
+      {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
     </div>
-    {helper && !error ? <p className="mt-2 text-sm text-gray-500">{helper}</p> : null}
-    {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
-  </div>
+  )
 }
diff --git a/packages/shared-ui/src/components/Controls/index.tsx b/packages/shared-ui/src/components/Controls/index.tsx
index 58af55f9..bc10e462 100644
--- a/packages/shared-ui/src/components/Controls/index.tsx
+++ b/packages/shared-ui/src/components/Controls/index.tsx
@@ -1,15 +1,19 @@
-import InputControl from './InputControl';
-import TextareaControl from './TextareaControl';
-import TextEditorControl from './TextEditorControl';
-import ListControl from './ListControl';
-import PopoverControl from "./PopoverControl"
-import CheckboxControl from './CheckboxControl';
-import RangeControl from './Range';
+import InputControl from './InputControl'
+import TextareaControl from './TextareaControl'
+import TextEditorControl from './TextEditorControl'
+import ListControl from './ListControl'
+import PopoverControl from './PopoverControl'
+import CheckboxControl from './CheckboxControl'
+import RangeControl from './Range'
+import RichTextEditorControl from './RichTextEditorControl'
+import { getMentionSuggestion } from './RichTextEditorControl/suggestionBase'
 
-export const Input = InputControl;
-export const Textarea = TextareaControl;
-export const TextEditor = TextEditorControl;
-export const List = ListControl;
+export const Input = InputControl
+export const Textarea = TextareaControl
+export const TextEditor = TextEditorControl
+export const List = ListControl
 export const Popover = PopoverControl
-export const Checkbox = CheckboxControl;
-export const Range = RangeControl;
+export const Checkbox = CheckboxControl
+export const Range = RangeControl
+export const RichTextEditor = RichTextEditorControl
+export { getMentionSuggestion }
diff --git a/packages/shared-ui/src/components/Controls/type.ts b/packages/shared-ui/src/components/Controls/type.ts
index 8ed5f927..01cf7576 100644
--- a/packages/shared-ui/src/components/Controls/type.ts
+++ b/packages/shared-ui/src/components/Controls/type.ts
@@ -1,4 +1,5 @@
 import { ChangeEvent, FocusEvent } from 'react'
+import { Node, Mark } from '@tiptap/core'
 
 interface InputBaseProps {
   title: string
@@ -31,17 +32,24 @@ type RangerSliderBaseProps = Omit<
   step: number
 }
 type TextareaBaseProps = Omit<InputBaseProps, 'onChange' | 'onEnter'> & {
-  onChange: (ev: ChangeEvent<HTMLTextAreaElement>) => void
+  // onChange: (val: string) => void
   onBlur: (ev: FocusEvent<HTMLTextAreaElement>) => void
-  onEnter: (val: string, target: HTMLTextAreaElement) => void
+  onCtrlEnter?: (val: string) => void
+  onCtrlEsc?: () => void
   rows: number
   cols: number
+  extensions?: (Node | Mark)[]
 }
 
 type TexteditorBaseProps = Omit<InputBaseProps, 'onChange' | 'onEnter'> & {
   onChange: (ev: string) => void
 }
 
+export type TRichTextEditorMention = {
+  id: string
+  label: string
+}
+
 export type RangerSlider = Partial<RangerSliderBaseProps>
 export type InputProps = Partial<InputBaseProps>
 export type TextareaProps = Partial<TextareaBaseProps>
diff --git a/packages/ui-app/app/_events/useEventTaskComment.ts b/packages/ui-app/app/_events/useEventTaskComment.ts
new file mode 100644
index 00000000..74404a95
--- /dev/null
+++ b/packages/ui-app/app/_events/useEventTaskComment.ts
@@ -0,0 +1,63 @@
+import { useEffect } from 'react'
+import { usePusher } from './usePusher'
+import { useSearchParams } from 'next/navigation'
+import { Comment } from '@prisma/client'
+
+export const useEventSendTaskComment = (cb: (data: Comment) => void) => {
+  const searchParams = useSearchParams()
+  const taskId = searchParams.get('taskId')
+  const { channelTeamCollab } = usePusher()
+
+  useEffect(() => {
+    const eventName = `event-send-task-comment-${taskId}`
+
+    channelTeamCollab &&
+      channelTeamCollab.bind(eventName, (data: Comment) => {
+        cb && cb(data)
+      })
+
+    return () => {
+      channelTeamCollab && channelTeamCollab.unbind(eventName)
+    }
+  }, [channelTeamCollab, taskId, cb])
+}
+
+export const useEventUpdateTaskComment = (cb: (data: Comment) => void) => {
+  const searchParams = useSearchParams()
+  const taskId = searchParams.get('taskId')
+  const { channelTeamCollab } = usePusher()
+
+  useEffect(() => {
+    const eventName = `event-update-task-comment-${taskId}`
+
+    channelTeamCollab &&
+      channelTeamCollab.bind(eventName, (data: Comment) => {
+        cb && cb(data)
+      })
+
+    return () => {
+      channelTeamCollab && channelTeamCollab.unbind(eventName)
+    }
+  }, [channelTeamCollab, taskId, cb])
+}
+
+export const useEventDeleteTaskComment = (
+  cb: (data: { id: string }) => void
+) => {
+  const searchParams = useSearchParams()
+  const taskId = searchParams.get('taskId')
+  const { channelTeamCollab } = usePusher()
+
+  useEffect(() => {
+    const eventName = `event-delete-task-comment-${taskId}`
+
+    channelTeamCollab &&
+      channelTeamCollab.bind(eventName, (data: { id: string }) => {
+        cb && cb(data)
+      })
+
+    return () => {
+      channelTeamCollab && channelTeamCollab.unbind(eventName)
+    }
+  }, [channelTeamCollab, taskId, cb])
+}
diff --git a/packages/ui-app/app/_features/TaskComments/TaskComment.tsx b/packages/ui-app/app/_features/TaskComments/TaskComment.tsx
new file mode 100644
index 00000000..9129e308
--- /dev/null
+++ b/packages/ui-app/app/_features/TaskComments/TaskComment.tsx
@@ -0,0 +1,85 @@
+import { Form } from '@shared/ui'
+import MemberAvatar from '@/components/MemberAvatar'
+import './style.css'
+import { useEffect, useState } from 'react'
+import Mention from '@tiptap/extension-mention'
+import { UserMember, useMemberStore } from '@/store/member'
+
+interface ITaskCommentInputProps {
+  userId: string
+  initValue: string
+  readOnly: boolean
+  onValueSubmit: (s: string) => void
+  onCancel?: () => void
+  eraseAfterSubmit?: boolean
+}
+
+const TaskComment = ({
+  userId,
+  initValue,
+  readOnly = false,
+  onValueSubmit,
+  onCancel,
+  eraseAfterSubmit = false
+}: ITaskCommentInputProps) => {
+  const [value, setValue] = useState(initValue)
+
+  const { members } = useMemberStore()
+
+  useEffect(() => {
+    setValue(initValue)
+  }, [initValue])
+
+  const handleCancelClick = () => {
+    setValue(initValue)
+    onCancel && onCancel()
+  }
+
+  return (
+    <div className="flex gap-2 items-start">
+      <div className="mt-2">
+        <MemberAvatar uid={userId || ''} noName={true} />
+      </div>
+      <div className="w-full">
+        <Form.RichTextEditor
+          onCtrlEnter={v => {
+            onValueSubmit(v)
+            eraseAfterSubmit && setValue('')
+          }}
+          onCtrlEsc={handleCancelClick}
+          readOnly={readOnly}
+          extensions={[
+            Mention.extend({
+              addAttributes() {
+                return {
+                  ...this.parent(),
+                  value: {
+                    default: ''
+                  }
+                }
+              }
+            }).configure({
+              HTMLAttributes: {
+                class: 'mention'
+              },
+              suggestion: Form.getMentionSuggestion<{
+                id: string
+                label: string
+                email: string
+              }>(
+                members.map(({ id, name, email }) => ({
+                  id,
+                  label: name || id,
+                  email
+                }))
+              )
+            })
+          ]}
+          value={value}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default TaskComment
diff --git a/packages/ui-app/app/_features/TaskComments/TaskCommentContainer.tsx b/packages/ui-app/app/_features/TaskComments/TaskCommentContainer.tsx
new file mode 100644
index 00000000..a5c5679c
--- /dev/null
+++ b/packages/ui-app/app/_features/TaskComments/TaskCommentContainer.tsx
@@ -0,0 +1,43 @@
+import {
+  useEventDeleteTaskComment,
+  useEventSendTaskComment,
+  useEventUpdateTaskComment
+} from '@/events/useEventTaskComment'
+import { useCommentContext } from './context'
+
+import TaskCommentList from './TaskCommentList'
+import TaskCommentInput from './TaskCommentInput'
+
+import './style.css'
+
+export default function TaskCommentContainer() {
+  const { setComments } = useCommentContext()
+
+  useEventSendTaskComment(comment => {
+    const newComment = comment
+    setComments(prev =>
+      (prev?.length ? [newComment, ...prev] : [newComment]).filter(({ id }) =>
+        Boolean(id)
+      )
+    )
+  })
+
+  useEventUpdateTaskComment(comment => {
+    setComments(prev => {
+      const idx = prev.findIndex(({ id }) => id === comment.id)
+      prev[idx] = comment
+      return [...prev]
+    })
+  })
+
+  useEventDeleteTaskComment(({ id: idx }) => {
+    setComments(prev => prev.filter(({ id }) => id !== idx))
+  })
+
+  return (
+    <div className="task-comments">
+      <TaskCommentInput />
+      <TaskCommentList />
+    </div>
+  )
+}
diff --git a/packages/ui-app/app/_features/TaskComments/TaskCommentInput.tsx b/packages/ui-app/app/_features/TaskComments/TaskCommentInput.tsx
index e3752ebf..be0b145c 100644
--- a/packages/ui-app/app/_features/TaskComments/TaskCommentInput.tsx
+++ b/packages/ui-app/app/_features/TaskComments/TaskCommentInput.tsx
@@ -1,58 +1,27 @@
-import { Form } from '@shared/ui'
-import MemberAvatar from '@/components/MemberAvatar'
 import { useUser } from '@goalie/nextjs'
-import './style.css'
+import TaskComment from './TaskComment'
+import { useCommentContext } from './context'
+import { useCallback } from 'react'
 
 export default function TaskCommentInput() {
-  // const { taskId, addActivity } = useActivityContext()
   const { user } = useUser()
-  // const { tasks } = useTaskStore()
-  // const task = tasks.find(t => t.id === taskId)
-  //
-  // const { createdBy } = task || {}
-  // if (!createdBy) return null
-  //
-  // const addNewContent = (content: string) => {
-  //   const newComment: Omit<Activity, 'id'> = {
-  //     type: ActivityType.TASK_COMMENT_CREATED,
-  //     objectId: taskId,
-  //     objectType: ActivityObjectType.TASK,
-  //     createdAt: new Date(),
-  //     createdBy: createdBy,
-  //     updatedAt: null,
-  //     updatedBy: null,
-  //     data: {
-  //       content
-  //     }
-  //   }
-  //
-  //   activityCreate(taskId, newComment)
-  //     .then(res => {
-  //       const {
-  //         data: { data }
-  //       } = res
-  //       console.log({ addNewComment: data })
-  //       addActivity(data)
-  //     })
-  //     .catch(error => console.log({ addNewCommenterror: error }))
-  // }
-  //
-  const onEnter = (value: string, target: HTMLTextAreaElement) => {
-    console.log(value, target)
-    // addNewContent(value)
-    target.value = ''
-  }
+  const { addComment } = useCommentContext()
+  const userId = user?.id as string
+
+  const handleCommentSubmit = useCallback(
+    (content: string) => {
+      addComment(content)
+    },
+    [addComment]
+  )
 
   return (
-    <div className="flex items-start gap-2 mb-3">
-      <MemberAvatar uid={user?.id || ''} noName={true} />
-      <div className="w-full">
-        <Form.Textarea
-          placeholder="Write your comments"
-          onEnter={onEnter}
-          rows={1}
-        />
-      </div>
-    </div>
+    <TaskComment
+      userId={userId}
+      initValue=""
+      readOnly={false}
+      onValueSubmit={handleCommentSubmit}
+      eraseAfterSubmit
+    />
   )
 }
diff --git a/packages/ui-app/app/_features/TaskComments/TaskCommentList.tsx b/packages/ui-app/app/_features/TaskComments/TaskCommentList.tsx
new file mode 100644
index 00000000..fd0522ec
--- /dev/null
+++ b/packages/ui-app/app/_features/TaskComments/TaskCommentList.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import TaskCommentListItem from './TaskCommentListItem'
+import { useCommentContext } from './context'
+
+export default function TaskCommentList() {
+  const { loadComments, comments } = useCommentContext()
+
+  useEffect(() => {
+    loadComments()
+  }, [loadComments])
+
+  return (
+    <div className="flex flex-col">
+      {comments?.length
+        ? comments.map((comment, index) => (
+            <TaskCommentListItem
+              key={comment.id + index.toString()}
+              {...comment}
+            />
+          ))
+        : null}
+    </div>
+  )
+}
diff --git a/packages/ui-app/app/_features/TaskComments/TaskCommentListItem.tsx b/packages/ui-app/app/_features/TaskComments/TaskCommentListItem.tsx
new file mode 100644
index 00000000..23a201be
--- /dev/null
+++ b/packages/ui-app/app/_features/TaskComments/TaskCommentListItem.tsx
@@ -0,0 +1,68 @@
+import { Comment } from '@prisma/client'
+import TaskComment from './TaskComment'
+import { useState } from 'react'
+import { useUser } from '@goalie/nextjs'
+import { useCommentContext } from './context'
+
+interface ITaskCommentListItemProps extends Comment {}
+
+export default function TaskCommentListItem(
+  comment: ITaskCommentListItemProps
+) {
+  const { id, createdBy, content, createdAt } = comment
+  const [editable, setEditable] = useState(false)
+  const { user } = useUser()
+  const userId = user?.id
+  const { updateComment, removeComment } = useCommentContext()
+
+  const handleValueSubmit = (s: string) => {
+    const updatedAt = new Date()
+    updateComment({ ...comment, content: s, updatedAt })
+    setEditable(false)
+  }
+
+  const handleEditButtonClick = () => {
+    setEditable(true)
+  }
+
+  const handleCancelEvent = () => {
+    setEditable(false)
+  }
+
+  const handleDeleteButtonClick = () => {
+    removeComment(id)
+  }
+
+  return (
+    <div className="mt-4">
+      <TaskComment
+        userId={createdBy}
+        initValue={content}
+        readOnly={!editable}
+        onValueSubmit={handleValueSubmit}
+        onCancel={handleCancelEvent}
+      />
+      <div className="flex justify-start gap-2">
+        {!editable ? (
+          <div className="hover:underline cursor-pointer">
+            {new Date(createdAt).toLocaleString()}
+          </div>
+        ) : null}
+        {!editable && userId === createdBy ? (
+          <>
+            <div
+              className="underline cursor-pointer"
+              onClick={handleEditButtonClick}>
+              Edit
+            </div>
+            <div
+              className="underline cursor-pointer"
+              onClick={handleDeleteButtonClick}>
+              Delete
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui-app/app/_features/TaskComments/context.tsx b/packages/ui-app/app/_features/TaskComments/context.tsx
new file mode 100644
index 00000000..51a042e7
--- /dev/null
+++ b/packages/ui-app/app/_features/TaskComments/context.tsx
@@ -0,0 +1,169 @@
+import { useUrl } from '@/hooks/useUrl'
+import {
+  commentCreate,
+  commentDelete,
+  commentGetAllByTask,
+  commentUpdate
+} from '@/services/comment'
+import { useUser } from '@goalie/nextjs'
+import { Comment } from '@prisma/client'
+import { messageError } from '@shared/ui'
+import compareAsc from 'date-fns/compareAsc'
+import { useSearchParams } from 'next/navigation'
+import {
+  createContext,
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from 'react'
+
+interface ICommentContext {
+  comments: Comment[]
+  // taskId: string
+  // setTaskId: (taskId: string) => void
+  loadComments: () => void
+  addComment: (content: string) => void
+  updateComment: (comment: Comment) => void
+  removeComment: (commentId: string) => void
+  setComments: Dispatch<SetStateAction<Comment[]>>
+}
+
+const CommentContext = createContext<ICommentContext>({
+  // taskId: '',
+  // setTaskId: () => console.log(1),
+  comments: [] as Comment[],
+  loadComments: () => console.log(1),
+  addComment: () => console.log(1),
+  removeComment: () => console.log(1),
+  updateComment: () => console.log(1),
+  setComments: () => console.log(1)
+})
+
+export const CommentContextProvider = ({ children }: PropsWithChildren) => {
+  const sp = useSearchParams()
+  const taskId = sp.get('taskId')
+
+  const [comments, setComments] = useState<Comment[]>([] as Comment[])
+  const { user } = useUser()
+  const userId = user?.id
+  const { projectId } = useUrl()
+
+  const addComment = useCallback(
+    (content: string) => {
+      if (!userId || !taskId) return false
+      const now = new Date()
+      const comment: Omit<Comment, 'id'> = {
+        content,
+        createdBy: userId,
+        taskId,
+        projectId,
+        createdAt: now,
+        updatedAt: now
+      }
+
+      const newComment = { ...comment, id: '' }
+      setComments(prev => (prev?.length ? [newComment, ...prev] : [newComment]))
+
+      commentCreate(comment)
+        .then(res => {
+          const { status, error, data } = res.data
+          if (status !== 200) {
+            messageError(error)
+            return false
+          }
+
+          return true
+        })
+        .catch(error => messageError(error))
+      return true
+    },
+    [projectId, taskId, userId]
+  )
+
+  const loadComments = useCallback(() => {
+    taskId &&
+      commentGetAllByTask(taskId)
+        .then(res => {
+          const { data, status, error } = res.data
+          if (status !== 200) {
+            messageError(error)
+            return false
+          }
+
+          if (!Array.isArray(data)) throw Error
+          data.sort((a, b) =>
+            compareAsc(new Date(b.createdAt), new Date(a.createdAt))
+          )
+          setComments(data)
+          return true
+        })
+        .catch(error => {
+          messageError(error)
+        })
+  }, [taskId])
+
+  const updateComment = useCallback((comment: Comment) => {
+    setComments(prev => {
+      const idx = prev.findIndex(({ id }) => id === comment.id)
+      prev[idx] = comment
+      return [...prev]
+    })
+
+    commentUpdate(comment)
+      .then(res => {
+        const { status, error } = res.data
+
+        if (status !== 200) {
+          messageError(error)
+          return false
+        }
+
+        return true
+      })
+      .catch(error => messageError(error))
+  }, [])
+
+  const removeComment = useCallback(
+    (commentId: string) => {
+      setComments(prev => prev.filter(({ id }) => id !== commentId))
+      userId &&
+        taskId &&
+        commentDelete(commentId, taskId, userId)
+          .then(res => {
+            const { status, error } = res.data
+            if (status !== 200) {
+              messageError(error)
+              return false
+            }
+
+            return true
+          })
+          .catch(error => {
+            messageError(error)
+          })
+    },
+    [userId, taskId]
+  )
+
+  return (
+    <CommentContext.Provider
+      value={{
+        comments,
+        loadComments,
+        addComment,
+        updateComment,
+        removeComment,
+        setComments
+      }}>
+      {children}
+    </CommentContext.Provider>
+  )
+}
+
+export const useCommentContext = () => {
+  return { ...useContext(CommentContext) }
+}
diff --git a/packages/ui-app/app/_features/TaskComments/index.tsx b/packages/ui-app/app/_features/TaskComments/index.tsx
index 8fc4fe15..77fdd9a4 100644
--- a/packages/ui-app/app/_features/TaskComments/index.tsx
+++ b/packages/ui-app/app/_features/TaskComments/index.tsx
@@ -1,10 +1,10 @@
-import './style.css'
-import TaskCommentInput from './TaskCommentInput'
+import { CommentContextProvider } from './context'
+import TaskCommentContainer from './TaskCommentContainer'
 
 export default function TaskComments() {
   return (
-    <div className="task-comments">
-      <TaskCommentInput />
-    </div>
+    <CommentContextProvider>
+      <TaskCommentContainer />
+    </CommentContextProvider>
   )
 }
diff --git a/packages/ui-app/services/comment.ts b/packages/ui-app/services/comment.ts
new file mode 100644
index 00000000..919389d1
--- /dev/null
+++ b/packages/ui-app/services/comment.ts
@@ -0,0 +1,32 @@
+import { httpDel, httpGet, httpPost, httpPut } from './_req'
+import { Comment } from '@prisma/client'
+
+export const commentGetAllByTask = (taskId: string) => {
+  return httpGet(`/api/comment`, {
+    params: {
+      taskId
+    }
+  })
+}
+
+export const commentCreate = (comment: Partial<Comment>) => {
+  return httpPost('/api/comment', comment)
+}
+
+export const commentUpdate = (comment: Comment) => {
+  return httpPut('/api/comment', comment)
+}
+
+export const commentDelete = (
+  id: string,
+  taskId: string,
+  updatedBy: string
+) => {
+  return httpDel('/api/comment', {
+    params: {
+      id,
+      taskId,
+      updatedBy
+    }
+  })
+}
diff --git a/yarn.lock b/yarn.lock
index c99f82dd..28feb267 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5062,6 +5062,11 @@
   resolved "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.3.tgz"
   integrity sha512-SZRUSh07b/M0kJHNKnfBwBMWrZBEm/E2LrK1NbluwT3DBhE+gvwiEdBxgB32zKHNxaDEXUJwUIPNC3JSbKvPUA==
 
+"@tiptap/extension-image@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.2.4.tgz#55c267e9ff77e2bf3c514896331ad91d18da08c3"
+  integrity sha512-xOnqZpnP/fAfmK5AKmXplVQdXBtY5AoZ9B+qllH129aLABaDRzl3e14ZRHC8ahQawOmCe6AOCCXYUBXDOlY5Jg==
+
 "@tiptap/extension-italic@^2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.0.3.tgz"
@@ -5079,6 +5084,11 @@
   resolved "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.3.tgz"
   integrity sha512-p7cUsk0LpM1PfdAuFE8wYBNJ3gvA0UhNGR08Lo++rt9UaCeFLSN1SXRxg97c0oa5+Ski7SrCjIJ5Ynhz0viTjQ==
 
+"@tiptap/extension-mention@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.2.1.tgz#9b12831abf263e59d1627b3967a33e027e61db0b"
+  integrity sha512-6MIYlqHtjJSbKIKi8RvXZOGAHw/7Z+t+jTVy6QhYhVKyqcKsHBF5gNlFhsBEq/w6/iL3RKP3vSk5Jzyia5Ga+A==
+
 "@tiptap/extension-ordered-list@^2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.3.tgz"
@@ -5099,6 +5109,11 @@
   resolved "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.3.tgz"
   integrity sha512-LvzChcTCcPSMNLUjZe/A9SHXWGDHtvk73fR7CBqAeNU0MxhBPEBI03GFQ6RzW3xX0CmDmjpZoDxFMB+hDEtW1A==
 
+"@tiptap/extension-underline@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.2.4.tgz#7be1a616e16452dd17a9c6fd03e40636bc676972"
+  integrity sha512-jCHgIJMwtXlGHVy/j3L8/QvglHCikkHJw7YS5yf8E/8HlPh1tZfVy/IxdgacDOpUN30X+UPJZQDdVKymafgwdA==
+
 "@tiptap/pm@^2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@tiptap/pm/-/pm-2.0.3.tgz"
@@ -5156,6 +5171,11 @@
     "@tiptap/extension-strike" "^2.0.3"
     "@tiptap/extension-text" "^2.0.3"
 
+"@tiptap/suggestion@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.2.1.tgz#9201480a2f2944865cfd267b4c3fd0991921e925"
+  integrity sha512-DIT4zR5CoP0Q5n9BJj68EqmbFGzdyDgDon8yfX1NkynW8PtDrcfGhe5/31tcH6YuM6ZijqNV3fdCt+LPrVr/Nw==
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz"
@@ -9066,6 +9086,11 @@ functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 gaxios@^6.0.0, gaxios@^6.0.2, gaxios@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-6.1.1.tgz#549629f86a13e756b900f9ff7c94624670102938"
@@ -14164,7 +14189,7 @@ tiny-warning@^1.0.2:
 
 tippy.js@^6.3.7:
   version "6.3.7"
-  resolved "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
   dependencies:
     "@popperjs/core" "^2.9.0"