diff --git a/moon/apps/web/components/ClView/ApproveItem.tsx b/moon/apps/web/components/ClView/ApproveItem.tsx
new file mode 100644
index 000000000..c1ce2bdb8
--- /dev/null
+++ b/moon/apps/web/components/ClView/ApproveItem.tsx
@@ -0,0 +1,47 @@
+import { ConversationItem } from '@gitmono/types/generated'
+import { ConditionalWrap } from '@gitmono/ui'
+
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+
+import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { MemberAvatar } from '../MemberAvatar'
+import HandleTime from './components/HandleTime'
+import { UserLinkByName } from './components/UserLinkByName'
+
+interface ApproveItemProps {
+  conv: ConversationItem
+}
+
+const ApproveItem = ({ conv }: ApproveItemProps) => {
+  const { data: member } = useGetOrganizationMember({ username: conv.username })
+
+  return (
+    <>
+      <div className='flex items-center space-x-2'>
+        <div className='cursor-pointer'>
+          <ConditionalWrap
+            condition={true}
+            wrap={(c) => (
+              <MemberHovercard username={conv?.username}>
+                <UserLinkByName username={conv?.username} className='relative'>
+                  {c}
+                </UserLinkByName>
+              </MemberHovercard>
+            )}
+          >
+            {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
+          </ConditionalWrap>
+        </div>
+        <div>
+          <span className='font-semibold'>{conv.username}</span>
+          <span className='text-gray-600'> approved this change list</span>
+        </div>
+        <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <HandleTime created_at={conv.created_at} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ApproveItem
diff --git a/moon/apps/web/components/ClView/TimelineItems.tsx b/moon/apps/web/components/ClView/TimelineItems.tsx
index 0ce2bc653..4b5e99284 100644
--- a/moon/apps/web/components/ClView/TimelineItems.tsx
+++ b/moon/apps/web/components/ClView/TimelineItems.tsx
@@ -23,6 +23,7 @@ import ReviewComment from '@/components/ClView/ReviewComment'
 import { CommonDetailData } from '@/utils/types'
 
 import { SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
+import ApproveItem from './ApproveItem'
 import AssigneeItem from './AssigneeItem'
 import CloseItem from './CloseItem'
 import EditItem from './EditItem'
@@ -109,6 +110,10 @@ const TimelineItems = React.memo<{
               children = <ReviewComment reviewers={reviewers} conv={conv} id={id} whoamI={type} editorRef={editorRef} />
             }
             break
+          case 'Approve':
+            icon = <CheckCircleIcon size={24} className='text-green-500' />
+            children = <ApproveItem conv={conv} />
+            break
           case 'Merged':
             icon = <FeedMergedIcon size={24} className='text-purple-500' />
             children = <MergedItem conv={conv} />