diff --git a/next/components/postDetail/postDiscussion.js b/next/components/postDetail/postDiscussion.js
index 1a1e9129..dcc28c1e 100644
--- a/next/components/postDetail/postDiscussion.js
+++ b/next/components/postDetail/postDiscussion.js
@@ -15,7 +15,6 @@ import {
   removeToast,
 } from "store/reducers/toastSlice";
 import { timeDuration } from "frontedUtils";
-import ExternalLink from "@osn/common-ui/es/ExternalLink";
 import { findNetworkConfig } from "services/util";
 import HeaderWithNumber from "@/components/postDetail/numberHeader";
 import encodeAddressByChain from "../../frontedUtils/chain/addr";
@@ -27,7 +26,7 @@ import {
   MarkdownPreviewer,
   renderMentionIdentityUserPlugin,
 } from "@osn/previewer";
-import { MentionIdentityUser, RichEditor } from "@osn/common-ui";
+import { IpfsSquare, MentionIdentityUser, RichEditor } from "@osn/common-ui";
 import { useSuggestions } from "./suggestions";
 
 const Item = styled.div`
@@ -194,15 +193,12 @@ export default function PostDiscussion({
               />
               <div>{timeDuration(item.createdAt)}</div>
             </DividerWrapper>
-            {item?.pinHash ? (
-              <ExternalLink
-                href={`${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${item.pinHash}`}
-              >
-                <Square />
-              </ExternalLink>
-            ) : (
-              <Square noHover={true} />
-            )}
+            <IpfsSquare
+              href={
+                item?.pinHash &&
+                `${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${item.pinHash}`
+              }
+            />
           </InfoWrapper>
           <ContentWrapper>
             <Content>
diff --git a/next/components/postDetail/postVotesItem.js b/next/components/postDetail/postVotesItem.js
index 4319b310..c8d5fc10 100644
--- a/next/components/postDetail/postVotesItem.js
+++ b/next/components/postDetail/postVotesItem.js
@@ -1,8 +1,7 @@
 import { Fragment } from "react";
-import styled, { css } from "styled-components";
-import ExternalLink from "@osn/common-ui/es/ExternalLink";
+import styled from "styled-components";
 import Ellipsis from "@/components/ellipsis";
-import { Flex } from "@osn/common-ui";
+import { Flex, IpfsSquare } from "@osn/common-ui";
 import ValueDisplay from "@/components/valueDisplay";
 import Voter from "@/components/role/voter";
 import { Tooltip } from "@osn/common-ui";
@@ -49,20 +48,6 @@ const BalanceWrapper = styled.div`
   }
 `;
 
-const Square = styled.div`
-  width: 20px;
-  height: 20px;
-  background: url("/imgs/icons/ipfs.svg");
-  ${(p) =>
-    !p.noHover &&
-    css`
-      cursor: pointer;
-      :hover {
-        background: url("/imgs/icons/ipfs-active.svg");
-      }
-    `}
-`;
-
 const EqualWrapper = styled.div`
   width: 33%;
   display: flex;
@@ -215,15 +200,12 @@ export default function PostVotesItem({
                 ) : null
               }
             />
-            {data?.pinHash ? (
-              <ExternalLink
-                href={`${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${data.pinHash}`}
-              >
-                <Square />
-              </ExternalLink>
-            ) : (
-              <Square noHover={true} />
-            )}
+            <IpfsSquare
+              href={
+                data?.pinHash &&
+                `${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${data.pinHash}`
+              }
+            />
           </BalanceWrapper>
         </EqualWrapper>
       </InfoWrapper>