diff --git a/lang/default.json b/lang/default.json
index f9f9383492..4519f2ec2d 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "Confirm"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops! This comment has been deleted by author"
+  },
   "NAidKb": {
     "defaultMessage": "Notifications"
   },
diff --git a/lang/en.json b/lang/en.json
index 6e1b2e17cf..b879cf5330 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "Confirm"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops! This comment has been deleted by author"
+  },
   "NAidKb": {
     "defaultMessage": "Notifications"
   },
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 03e2b5dd86..8ca9ad5eaf 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "确认"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops！该评论已被原作者删除"
+  },
   "NAidKb": {
     "defaultMessage": "通知"
   },
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 52d14b8db3..d94bdfffd9 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "確認"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops！該評論已被原作者刪除"
+  },
   "NAidKb": {
     "defaultMessage": "通知"
   },
diff --git a/src/components/CommentBeta/Content/index.tsx b/src/components/CommentBeta/Content/index.tsx
index 984d54a2ee..eec5ed4e1e 100644
--- a/src/components/CommentBeta/Content/index.tsx
+++ b/src/components/CommentBeta/Content/index.tsx
@@ -61,6 +61,7 @@ const Content = ({
   const contentClasses = classNames({
     [styles.content]: true,
     [size ? styles[`size${capitalizeFirstLetter(size)}`] : '']: !!size,
+    [styles.inactive]: state === 'archived',
   })
 
   if (state === 'collapsed' || state === 'banned' || isBlocked) {
@@ -104,7 +105,7 @@ const Content = ({
 
   if (state === 'archived') {
     return (
-      <p className={`${contentClasses} inactive`}>
+      <p className={contentClasses}>
         <FormattedMessage
           defaultMessage="This {type} has been deleted by the author"
           id="fDdcbi"
diff --git a/src/components/CommentBeta/Content/styles.module.css b/src/components/CommentBeta/Content/styles.module.css
index 5b686e9f2b..0a53f775b6 100644
--- a/src/components/CommentBeta/Content/styles.module.css
+++ b/src/components/CommentBeta/Content/styles.module.css
@@ -1,12 +1,6 @@
 .content {
   &.inactive {
-    @mixin flex-center-space-between;
-
     color: var(--color-grey);
-
-    & button {
-      margin: 0 0 0 var(--spacing-tight);
-    }
   }
 }
 
diff --git a/src/components/Notice/NoticeComment.tsx b/src/components/Notice/NoticeComment.tsx
index 3afeaa4f8a..93e9e67c59 100644
--- a/src/components/Notice/NoticeComment.tsx
+++ b/src/components/Notice/NoticeComment.tsx
@@ -1,7 +1,8 @@
 import gql from 'graphql-tag'
+import { FormattedMessage } from 'react-intl'
 
 import { toPath } from '~/common/utils'
-import { LinkWrapper } from '~/components'
+import { LinkWrapper, toast } from '~/components'
 import CommentContent from '~/components/Comment/Content'
 import { NoticeCommentFragment } from '~/gql/graphql'
 
@@ -54,8 +55,28 @@ const NoticeComment = ({
     return null
   }
 
+  if (comment.state === 'archived') {
+    return (
+      <button
+        onClick={() => {
+          toast.success({
+            message: (
+              <FormattedMessage
+                defaultMessage="Oops! This comment has been deleted by author"
+                id="N8ISx8"
+              />
+            ),
+          })
+        }}
+      >
+        <section>
+          <NoticeContentDigest content={comment.content || ''} />
+        </section>
+      </button>
+    )
+  }
   const path =
-    comment.state === 'active'
+    comment.state === 'active' || comment.state === 'collapsed'
       ? toPath({
           page: 'commentDetail',
           comment,
@@ -63,7 +84,6 @@ const NoticeComment = ({
           circle,
         })
       : { href: '' }
-
   return (
     <LinkWrapper {...path}>
       <section>
diff --git a/src/views/ArticleDetail/Comments/CommentDetail/index.tsx b/src/views/ArticleDetail/Comments/CommentDetail/index.tsx
index e23693d932..5927c1d104 100644
--- a/src/views/ArticleDetail/Comments/CommentDetail/index.tsx
+++ b/src/views/ArticleDetail/Comments/CommentDetail/index.tsx
@@ -10,6 +10,7 @@ import { CommentDetailQuery } from '~/gql/graphql'
 
 import { Placeholder } from '../Placeholder'
 import { COMMENT_DETAIL } from './gql'
+import styles from './styles.module.css'
 
 const CommentDetail = () => {
   /**
@@ -110,7 +111,7 @@ const CommentDetail = () => {
   const comment = data?.node as ThreadCommentType
 
   return (
-    <section>
+    <section className={styles.container}>
       <ThreadCommentBeta
         comment={comment}
         type="article"
diff --git a/src/views/ArticleDetail/Comments/CommentDetail/styles.module.css b/src/views/ArticleDetail/Comments/CommentDetail/styles.module.css
new file mode 100644
index 0000000000..ac6915ef52
--- /dev/null
+++ b/src/views/ArticleDetail/Comments/CommentDetail/styles.module.css
@@ -0,0 +1,5 @@
+.container {
+  @media (--sm-up) {
+    width: 22.5rem;
+  }
+}