diff --git a/web/src/components/ArchivedMemo.tsx b/web/src/components/ArchivedMemo.tsx
index 0914a2be..22036791 100644
--- a/web/src/components/ArchivedMemo.tsx
+++ b/web/src/components/ArchivedMemo.tsx
@@ -67,7 +67,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
         </div>
       </div>
       <MemoContent content={memo.content} />
-      <MemoResources memo={memo} />
+      <MemoResources resourceList={memo.resourceList} />
     </div>
   );
 };
diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx
index b94d48f1..00125945 100644
--- a/web/src/components/DailyMemo.tsx
+++ b/web/src/components/DailyMemo.tsx
@@ -21,7 +21,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
       </div>
       <div className="memo-container">
         <MemoContent content={memo.content} displayConfig={displayConfig} />
-        <MemoResources memo={memo} />
+        <MemoResources resourceList={memo.resourceList} />
       </div>
       <div className="split-line"></div>
     </div>
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index c4604b4d..2f4ff850 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -243,7 +243,7 @@ const Memo: React.FC<Props> = (props: Props) => {
         onMemoContentClick={handleMemoContentClick}
         onMemoContentDoubleClick={handleMemoContentDoubleClick}
       />
-      <MemoResources memo={memo} />
+      <MemoResources resourceList={memo.resourceList} />
     </div>
   );
 };
diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx
index 9f3659c1..529d2be3 100644
--- a/web/src/components/MemoCardDialog.tsx
+++ b/web/src/components/MemoCardDialog.tsx
@@ -195,7 +195,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="memo-container">
           <MemoContent displayConfig={{ enableExpand: false }} content={memo.content} onMemoContentClick={handleMemoContentClick} />
-          <MemoResources memo={memo} />
+          <MemoResources resourceList={memo.resourceList} />
         </div>
         <div className="layer-container"></div>
         {linkMemos.map((_, idx) => {
diff --git a/web/src/components/MemoResources.tsx b/web/src/components/MemoResources.tsx
index e8aee8dc..58918c43 100644
--- a/web/src/components/MemoResources.tsx
+++ b/web/src/components/MemoResources.tsx
@@ -3,13 +3,14 @@ import Icon from "./Icon";
 import "../less/memo-resources.less";
 
 interface Props {
-  memo: Memo;
+  className?: string;
+  resourceList: Resource[];
 }
 
 const MemoResources: React.FC<Props> = (props: Props) => {
-  const { memo } = props;
-  const imageList = memo.resourceList.filter((resource) => resource.type.includes("image"));
-  const otherResourceList = memo.resourceList.filter((resource) => !resource.type.includes("image"));
+  const { className, resourceList } = props;
+  const imageList = resourceList.filter((resource) => resource.type.includes("image"));
+  const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
 
   const handlPreviewBtnClick = (resource: Resource) => {
     const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
@@ -21,7 +22,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   });
 
   return (
-    <div className="resource-wrapper">
+    <div className={`resource-wrapper  ${className || ""}`}>
       {imageList.length > 0 && (
         <div className="images-wrapper">
           {imageList.map((resource, index) => (
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index eb4f89aa..f8438902 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -88,7 +88,7 @@ const Explore = () => {
                     </a>
                   </div>
                   <MemoContent className="memo-content" content={memo.content} onMemoContentClick={() => undefined} />
-                  <MemoResources memo={memo} />
+                  <MemoResources resourceList={memo.resourceList} />
                 </div>
               );
             })}
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 7b920c43..17275e17 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -148,7 +148,7 @@ const MemoDetail = () => {
                 />
               </div>
               <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
-              <MemoResources memo={state.memo} />
+              <MemoResources resourceList={state.memo.resourceList} />
             </div>
           </main>
         )}