diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx
index f2753aba8..838e418f9 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx
@@ -8,7 +8,7 @@ import {
   TranslationStore,
   TypesPullReqActivity
 } from '@/views'
-import { Avatar, AvatarFallback, Layout, Text } from '@components/index'
+import { Avatar, AvatarFallback, Layout } from '@components/index'
 import { DiffFile, DiffModeEnum, DiffView, DiffViewProps, SplitSide } from '@git-diff-view/react'
 import { getInitials, timeAgo } from '@utils/utils'
 import { DiffBlock } from 'diff2html/lib/types'
@@ -49,7 +49,6 @@ interface PullRequestDiffviewerProps {
   useTranslationStore: () => TranslationStore
   commentId?: string
   onCopyClick?: (commentId?: number) => void
-  onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void
   suggestionsBatch?: CommitSuggestion[]
   onCommitSuggestion?: (suggestion: CommitSuggestion) => void
   addSuggestionToBatch?: (suggestion: CommitSuggestion) => void
@@ -79,7 +78,6 @@ const PullRequestDiffViewer = ({
   useTranslationStore,
   commentId,
   onCopyClick,
-  onCommentSaveAndStatusChange,
   suggestionsBatch,
   onCommitSuggestion,
   addSuggestionToBatch,
@@ -342,7 +340,7 @@ const PullRequestDiffViewer = ({
       if (!threads) return <></>
 
       return (
-        <div className="w- rounded border bg-background">
+        <div className="rounded border bg-background">
           {threads.map(thread => {
             const parent = thread.parent
             const componentId = `activity-code-${parent?.id}`
@@ -356,20 +354,28 @@ const PullRequestDiffViewer = ({
                 parentCommentId={parent.id}
                 handleSaveComment={handleSaveComment}
                 isLast={true}
-                contentClassName="px-4 py-2 w-[calc(100%-38px)]"
+                contentClassName="w-[calc(100%-38px)]"
                 header={[]}
                 currentUser={currentUser}
                 isComment
-                replyBoxClassName="py-4"
+                replyBoxClassName="p-4"
                 hideReplyHere={hideReplyHeres[parent?.id]}
                 setHideReplyHere={state => toggleReplyBox(state, parent?.id)}
                 isResolved={!!parent.payload?.resolved}
                 toggleConversationStatus={toggleConversationStatus}
-                onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                 onQuoteReply={handleQuoteReply}
                 quoteReplyText={quoteReplies[parent.id]?.text || ''}
+                contentHeader={
+                  !!parent.payload?.resolved && (
+                    <div className="flex items-center gap-x-1">
+                      {/* TODO: need to identify the author who resolved the conversation */}
+                      <span className="text-foreground-8 font-medium">{parent.author}</span>
+                      <span className="text-foreground-4">marked this conversation as resolved</span>
+                    </div>
+                  )
+                }
                 content={
-                  <div className="flex-col">
+                  <div className="flex-col px-4 pt-4">
                     <PullRequestTimelineItem
                       titleClassName="!flex max-w-full"
                       parentCommentId={parent.id}
@@ -389,9 +395,7 @@ const PullRequestDiffViewer = ({
                       icon={
                         <Avatar className="size-6 rounded-full p-0">
                           <AvatarFallback>
-                            <Text size={1} color="tertiaryBackground">
-                              {parentInitials}
-                            </Text>
+                            <span className="text-12 text-foreground-3">{parentInitials}</span>
                           </AvatarFallback>
                         </Avatar>
                       }
@@ -399,12 +403,12 @@ const PullRequestDiffViewer = ({
                         {
                           name: parent.author,
                           description: (
-                            <Layout.Horizontal>
-                              <span className="text-foreground-3">{timeAgo(parent?.created as number)}</span>
+                            <Layout.Horizontal className="text-foreground-4">
+                              <span>{timeAgo(parent?.created as number)}</span>
                               {parent?.deleted ? (
                                 <>
-                                  <span className="text-foreground-3">&nbsp;|&nbsp;</span>
-                                  <span className="text-foreground-3">{t('views:pullRequests.deleted')} </span>
+                                  <span>&nbsp;|&nbsp;</span>
+                                  <span>{t('views:pullRequests.deleted')} </span>
                                 </>
                               ) : null}
                             </Layout.Horizontal>
@@ -474,9 +478,7 @@ const PullRequestDiffViewer = ({
                               icon={
                                 <Avatar className="size-6 rounded-full p-0">
                                   <AvatarFallback>
-                                    <Text size={1} color="tertiaryBackground">
-                                      {replyInitials}
-                                    </Text>
+                                    <span className="text-12 text-foreground-3">{replyInitials}</span>
                                   </AvatarFallback>
                                 </Avatar>
                               }
@@ -484,12 +486,12 @@ const PullRequestDiffViewer = ({
                                 {
                                   name: reply.author,
                                   description: (
-                                    <Layout.Horizontal>
-                                      <span className="text-foreground-3">{timeAgo(reply?.created as number)}</span>
+                                    <Layout.Horizontal className="text-foreground-4">
+                                      <span>{timeAgo(reply?.created as number)}</span>
                                       {reply?.deleted ? (
                                         <>
-                                          <span className="text-foreground-3">&nbsp;|&nbsp;</span>
-                                          <span className="text-foreground-3">{t('views:pullRequests.deleted')} </span>
+                                          <span>&nbsp;|&nbsp;</span>
+                                          <span>{t('views:pullRequests.deleted')} </span>
                                         </>
                                       ) : null}
                                     </Layout.Horizontal>
@@ -505,7 +507,6 @@ const PullRequestDiffViewer = ({
                                   <PullRequestCommentBox
                                     handleUpload={handleUpload}
                                     isEditMode
-                                    isResolved={!!parent?.payload?.resolved}
                                     onSaveComment={() => {
                                       if (reply?.id) {
                                         updateComment?.(reply?.id, editComments[replyComponentId])
@@ -520,7 +521,6 @@ const PullRequestDiffViewer = ({
                                     setComment={text =>
                                       setEditComments(prev => ({ ...prev, [replyComponentId]: text }))
                                     }
-                                    onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                                   />
                                 ) : (
                                   <PRCommentView
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-overview.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-overview.tsx
index 30c83e21f..27b6feeb8 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-overview.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-overview.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react'
 
-import { Avatar, AvatarFallback, Icon, Layout, Text } from '@components/index'
+import { Avatar, AvatarFallback, Icon, Layout } from '@components/index'
 import { DiffModeEnum } from '@git-diff-view/react'
 import { getInitials } from '@utils/stringUtils'
 import { timeAgo } from '@utils/utils'
@@ -50,7 +50,6 @@ interface PullRequestOverviewProps extends RoutingProps {
   repoId: string
   diffData?: { text: string; numAdditions?: number; numDeletions?: number; data?: string; title: string; lang: string }
   onCopyClick: (commentId?: number) => void
-  onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void
   suggestionsBatch: CommitSuggestion[]
   onCommitSuggestion: (suggestion: CommitSuggestion) => void
   addSuggestionToBatch: (suggestion: CommitSuggestion) => void
@@ -82,7 +81,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
   useTranslationStore,
   onCopyClick,
   handleUpload,
-  onCommentSaveAndStatusChange,
   suggestionsBatch,
   onCommitSuggestion,
   addSuggestionToBatch,
@@ -93,7 +91,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
   toCommitDetails
 }) => {
   const { t } = useTranslationStore()
-
   const {
     // mode,
     // setMode,
@@ -254,7 +251,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                       currentUser={currentUser?.display_name}
                       replyBoxClassName="p-4"
                       toggleConversationStatus={toggleConversationStatus}
-                      onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                       isResolved={!!payload?.resolved}
                       icon={<Icon name="pr-review" size={12} />}
                       isLast={(data && data?.length - 1 === index) ?? false}
@@ -264,13 +260,11 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                         {
                           avatar: (
                             <Avatar className="size-6 rounded-full p-0">
-                              {/* <AvatarImage src={AvatarUrl} /> */}
-
                               <AvatarFallback>
-                                <Text size={1} color="tertiaryBackground">
+                                <span className="text-12 text-foreground-3">
                                   {/* TODO: fix fallback string */}
                                   {getInitials((payload?.author as PayloadAuthor)?.display_name || '')}
-                                </Text>
+                                </span>
                               </AvatarFallback>
                             </Avatar>
                           ),
@@ -279,13 +273,9 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                           description: payload?.created && `reviewed ${timeAgo(payload?.created)}`
                         }
                       ]}
+                      contentHeader={<span>{(payload?.code_comment as PayloadCodeComment)?.path}</span>}
                       content={
-                        <div className="flex flex-col pt-2">
-                          <div className="flex w-full items-center justify-between px-4 pb-2">
-                            <Text size={3} color="primary">
-                              {(payload?.code_comment as PayloadCodeComment)?.path}
-                            </Text>
-                          </div>
+                        <div className="flex flex-col">
                           {startingLine ? (
                             <div className="bg-[--diff-hunk-lineNumber--]">
                               <div className="ml-16 w-full px-8 py-1">{startingLine}</div>
@@ -334,13 +324,10 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                     contentClassName="border-transparent"
                                     replyBoxClassName="p-4"
                                     toggleConversationStatus={toggleConversationStatus}
-                                    onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                                     icon={
                                       <Avatar className="size-6 rounded-full p-0">
-                                        {/* <AvatarImage src={AvatarUrl} /> */}
-
                                         <AvatarFallback>
-                                          <Text size={1} color="tertiaryBackground">
+                                          <span className="text-12 text-foreground-3">
                                             {/* TODO: fix fallback string */}
                                             {getInitials(
                                               (
@@ -348,7 +335,7 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                                   ?.author as PayloadAuthor
                                               )?.display_name || ''
                                             )}
-                                          </Text>
+                                          </span>
                                         </AvatarFallback>
                                       </Avatar>
                                     }
@@ -360,16 +347,12 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                         )?.display_name,
                                         // TODO: fix comment to tell between comment or code comment?
                                         description: (
-                                          <Layout.Horizontal>
-                                            <span className="text-foreground-3">
-                                              {timeAgo((commentItem as unknown as PayloadCreated)?.created)}
-                                            </span>
+                                          <Layout.Horizontal className="text-foreground-4">
+                                            <span>{timeAgo((commentItem as unknown as PayloadCreated)?.created)}</span>
                                             {commentItem?.deleted ? (
                                               <>
-                                                <span className="text-foreground-3">&nbsp;|&nbsp;</span>
-                                                <span className="text-foreground-3">
-                                                  {t('views:pullRequests.deleted')}{' '}
-                                                </span>
+                                                <span>&nbsp;|&nbsp;</span>
+                                                <span>{t('views:pullRequests.deleted')}</span>
                                               </>
                                             ) : null}
                                           </Layout.Horizontal>
@@ -385,7 +368,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                         <PullRequestCommentBox
                                           isEditMode
                                           handleUpload={handleUpload}
-                                          isResolved={!!payload?.resolved}
                                           onSaveComment={() => {
                                             if (commentItem?.id) {
                                               handleUpdateComment?.(commentItem?.id, editComments[componentId])
@@ -400,8 +382,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                           setComment={text =>
                                             setEditComments(prev => ({ ...prev, [componentId]: text }))
                                           }
-                                          onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
-                                          parentCommentId={payload?.id}
                                         />
                                       ) : (
                                         <PRCommentView
@@ -442,18 +422,15 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                     replyBoxClassName="p-4"
                     isResolved={!!payload?.resolved}
                     toggleConversationStatus={toggleConversationStatus}
-                    onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                     header={[
                       {
                         avatar: (
                           <Avatar className="size-6 rounded-full p-0">
-                            {/* <AvatarImage src={AvatarUrl} /> */}
-
                             <AvatarFallback>
-                              <Text size={1} color="tertiaryBackground">
+                              <span className="text-12 text-foreground-3">
                                 {/* TODO: fix fallback string */}
                                 {getInitials((payload?.author as PayloadAuthor)?.display_name || '')}
-                              </Text>
+                              </span>
                             </AvatarFallback>
                           </Avatar>
                         ),
@@ -485,7 +462,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                 onQuoteReply={handleQuoteReply}
                                 parentCommentId={payload?.id}
                                 toggleConversationStatus={toggleConversationStatus}
-                                onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
                                 titleClassName="!flex max-w-full"
                                 currentUser={currentUser?.display_name}
                                 isLast={commentItems.length - 1 === idx}
@@ -502,10 +478,8 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                 key={`${commentItem.id}-${commentItem.author}-pr-comment`}
                                 icon={
                                   <Avatar className="size-6 rounded-full p-0">
-                                    {/* <AvatarImage src={AvatarUrl} /> */}
-
                                     <AvatarFallback>
-                                      <Text size={1} color="tertiaryBackground">
+                                      <span className="text-12 text-foreground-3">
                                         {/* TODO: fix fallback string */}
                                         {getInitials(
                                           (
@@ -513,7 +487,7 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                               ?.author as PayloadAuthor
                                           ).display_name || ''
                                         )}
-                                      </Text>
+                                      </span>
                                     </AvatarFallback>
                                   </Avatar>
                                 }
@@ -549,7 +523,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                     <PullRequestCommentBox
                                       handleUpload={handleUpload}
                                       isEditMode
-                                      isResolved={!!payload?.resolved}
                                       onSaveComment={() => {
                                         if (commentItem?.id) {
                                           handleUpdateComment?.(commentItem?.id, editComments[componentId])
@@ -562,8 +535,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
                                       }}
                                       comment={editComments[componentId]}
                                       setComment={text => setEditComments(prev => ({ ...prev, [componentId]: text }))}
-                                      onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
-                                      parentCommentId={payload?.id}
                                     />
                                   ) : (
                                     <PRCommentView
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-timeline-item.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-timeline-item.tsx
index aad947292..c0b5048a2 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-timeline-item.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-timeline-item.tsx
@@ -1,4 +1,4 @@
-import { FC, memo, ReactNode, useEffect, useState } from 'react'
+import { Children, FC, memo, ReactElement, ReactNode, useEffect, useState } from 'react'
 
 import {
   Avatar,
@@ -32,6 +32,7 @@ interface TimelineItemProps {
   parentCommentId?: number
   commentId?: number
   currentUser?: string
+  contentHeader?: ReactNode
   content?: ReactNode
   icon?: ReactNode
   isLast: boolean
@@ -140,16 +141,8 @@ const ItemHeader: FC<ItemHeaderProps> = memo(
       <div className="inline-flex w-full items-center justify-between gap-1.5">
         <div className="inline-flex items-center gap-1.5">
           {avatar && <div>{avatar}</div>}
-          {name && (
-            <Text size={2} color="primary" weight="medium">
-              {name}
-            </Text>
-          )}
-          {description && (
-            <Text size={2} color="tertiaryBackground">
-              {description}
-            </Text>
-          )}
+          {name && <span className="text-14 text-foreground-8 font-medium">{name}</span>}
+          {description && <span className="text-14 text-foreground-4">{description}</span>}
         </div>
         {selectStatus && (
           <div className="justify-end">
@@ -167,6 +160,7 @@ ItemHeader.displayName = 'ItemHeader'
 
 const PullRequestTimelineItem: FC<TimelineItemProps> = ({
   header,
+  contentHeader,
   content,
   icon,
   isLast,
@@ -197,11 +191,42 @@ const PullRequestTimelineItem: FC<TimelineItemProps> = ({
   quoteReplyText
 }) => {
   const [comment, setComment] = useState('')
+  const [isExpanded, setIsExpanded] = useState(!isResolved)
 
   useEffect(() => {
     if (quoteReplyText) setComment(quoteReplyText)
   }, [quoteReplyText])
 
+  useEffect(() => {
+    if (isResolved) {
+      setIsExpanded(false)
+    }
+  }, [isResolved])
+
+  const renderContent = () => {
+    if (!content) return null
+
+    // Show full content if not resolved or expanded
+    if (!isResolved || isExpanded) {
+      return content
+    }
+
+    // For resolved comments with contentHeader, hide all content when collapsed
+    if (contentHeader) {
+      return null
+    }
+
+    // For resolved comments without contentHeader, show only the first comment
+    const contentElement = content as ReactElement
+    if (contentElement.props?.children?.length) {
+      // If content is an array of comments, take the first one
+      const [firstComment] = Children.toArray(contentElement.props.children)
+      return <div className="px-4 pt-4 [&_[data-connector]]:hidden">{firstComment}</div>
+    }
+    // If content is a single element, return as is
+    return content
+  }
+
   return (
     <div id={id}>
       <NodeGroup.Root>
@@ -209,25 +234,57 @@ const PullRequestTimelineItem: FC<TimelineItemProps> = ({
         <NodeGroup.Title className={titleClassName}>
           {/* Ensure that header has at least one item */}
           {header.length > 0 && (
-            <ItemHeader
-              isDeleted={isDeleted}
-              onEditClick={onEditClick}
-              onCopyClick={onCopyClick}
-              isComment={isComment}
-              isNotCodeComment={isNotCodeComment}
-              handleDeleteComment={handleDeleteComment}
-              commentId={commentId}
-              {...header[0]}
-              onQuoteReply={() => {
-                setHideReplyHere?.(true)
-                if (parentCommentId) onQuoteReply?.(parentCommentId, data ?? '')
-              }}
-            />
+            <div className="flex w-full items-center justify-between gap-x-2">
+              <ItemHeader
+                isDeleted={isDeleted}
+                onEditClick={onEditClick}
+                onCopyClick={onCopyClick}
+                isComment={isComment}
+                isNotCodeComment={isNotCodeComment}
+                handleDeleteComment={handleDeleteComment}
+                commentId={commentId}
+                {...header[0]}
+                onQuoteReply={() => {
+                  setHideReplyHere?.(true)
+                  if (parentCommentId) onQuoteReply?.(parentCommentId, data ?? '')
+                }}
+              />
+              {isResolved && !contentHeader && (
+                <Button
+                  className="h-auto gap-x-1.5 px-4 font-normal text-foreground-2 hover:text-foreground-8"
+                  variant="custom"
+                  onClick={() => setIsExpanded(prev => !prev)}
+                >
+                  <Icon name={isExpanded ? 'collapse-comment' : 'expand-comment'} size={14} />
+                  {isExpanded ? 'Hide resolved' : 'Show resolved'}
+                </Button>
+              )}
+            </div>
           )}
         </NodeGroup.Title>
         {content && (
           <NodeGroup.Content>
-            <Card.Root className={cn('rounded-md bg-transparent', contentClassName)}>
+            <Card.Root className={cn('rounded-md bg-transparent overflow-hidden', contentClassName)}>
+              {contentHeader && (
+                <div
+                  className={cn('flex w-full items-center justify-between p-4 bg-background-2', {
+                    'pr-1.5': isResolved
+                  })}
+                >
+                  {contentHeader}
+                  {isResolved && (
+                    <Button
+                      className="h-auto gap-x-1.5 px-2.5 font-normal text-foreground-2 hover:text-foreground-8"
+                      variant="custom"
+                      onClick={() => setIsExpanded(prev => !prev)}
+                    >
+                      <Icon name={isExpanded ? 'collapse-comment' : 'expand-comment'} size={14} />
+                      {isExpanded ? 'Hide resolved' : 'Show resolved'}
+                    </Button>
+                  )}
+                </div>
+              )}
+
               {isEditMode ? (
                 <PullRequestCommentBox
                   handleUpload={handleUpload}
@@ -244,9 +301,9 @@ const PullRequestTimelineItem: FC<TimelineItemProps> = ({
                   setComment={setComment}
                 />
               ) : (
-                content
+                renderContent()
               )}
-              {!hideReplySection && (
+              {!hideReplySection && (!isResolved || isExpanded) && (
                 <>
                   {hideReplyHere ? (
                     <PullRequestCommentBox
@@ -267,9 +324,7 @@ const PullRequestTimelineItem: FC<TimelineItemProps> = ({
                       {currentUser ? (
                         <Avatar className="size-6 rounded-full p-0">
                           <AvatarFallback>
-                            <Text size={1} color="tertiaryBackground">
-                              {getInitials(currentUser ?? '', 2)}
-                            </Text>
+                            <span className="text-12 text-foreground-3">{getInitials(currentUser ?? '', 2)}</span>
                           </AvatarFallback>
                         </Avatar>
                       ) : null}
@@ -287,7 +342,7 @@ const PullRequestTimelineItem: FC<TimelineItemProps> = ({
                   )}
                   <div className={cn('flex gap-3 border-t', replyBoxClassName)}>
                     <Button
-                      variant={'outline'}
+                      variant="outline"
                       onClick={() => {
                         toggleConversationStatus?.(isResolved ? 'active' : 'resolved', parentCommentId)
                       }}