diff --git a/packages/react/src/components/Attachments/PinnedAttachment.js b/packages/react/src/components/Attachments/PinnedAttachment.js
index ae694b2a6..0255cb9ea 100644
--- a/packages/react/src/components/Attachments/PinnedAttachment.js
+++ b/packages/react/src/components/Attachments/PinnedAttachment.js
@@ -1,18 +1,46 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import { Avatar } from '../Avatar';
+import RCContext from '../../context/RCInstance';
 
-const PinnedAttachment = ({ attachment }) => (
-  <Box
-    style={{
-      borderInlineStart: '1px solid currentColor',
-      paddingLeft: '0.8rem',
-    }}
-  >
-    <Box>{attachment?.author_name}</Box>
-    <Box>{attachment?.text}</Box>
-  </Box>
-);
+const PinnedAttachment = ({ attachment }) => {
+  const { RCInstance } = useContext(RCContext);
+  const getUserAvatarUrl = (authorIcon) => {
+    const host = RCInstance.getHost();
+    const URL = `${host}${authorIcon}`;
+    return URL;
+  };
+  return (
+    <Box
+      style={{
+        borderInlineStart: '1px solid currentColor',
+        paddingLeft: '0.8rem',
+      }}
+    >
+      <Box
+        style={{
+          display: 'flex',
+          gap: '0.3rem',
+        }}
+      >
+        <Avatar
+          url={getUserAvatarUrl(attachment?.author_icon)}
+          alt="avatar"
+          size="1.2em"
+        />
+        <Box>{attachment?.author_name}</Box>
+      </Box>
+      <Box
+        style={{
+          marginTop: '0.7rem',
+        }}
+      >
+        {attachment?.text}
+      </Box>
+    </Box>
+  );
+};
 
 export default PinnedAttachment;