diff --git a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx
index 9f192e84..2839254b 100644
--- a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx
+++ b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx
@@ -11,7 +11,7 @@ const dataArr = [
     {
         _id: "3",
         diff: {
-            updated: ["2022-06-21T07:56:31.370Z", "2022-08-09T03:11:12.129Z"],
+            updated: [["2022-06-21T07:56:31.370Z", "safsd"], "2022-08-09T03:11:12.129Z"],
             deployment_id: ["test_id"],
         },
         user: "test user",
@@ -33,6 +33,26 @@ const dataArr = [
         createdAt: "2022-08-09T03:11:12.811Z",
         updatedAt: "2022-08-09T03:11:12.811Z",
         __v: 0,
+        renderDiff: () => (
+            <div>
+                <h3>Custom Render Diff</h3>
+                <p>User: test user</p>
+                <p>Reason: Apsara Component Migration</p>
+                <p>Version: 2</p>
+                <div>
+                    <strong>Updated:</strong>
+                    <ul>
+                    {["2022-06-21T07:56:31.370Z", "2022-08-09T03:11:12.129Z"].map((date, index) => (
+                        <li key={index}>{date}</li>
+                    ))}
+                    </ul>
+                </div>
+                <div>
+                    <strong>Deployment ID:</strong>
+                    <p>test_id</p>
+                </div>
+            </div>
+        ),
     },
     {
         _id: "1",
diff --git a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx
index d306e7b5..4c1803b5 100644
--- a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx
+++ b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx
@@ -99,7 +99,7 @@ const DiffTimelineBlock = ({ timelineBlockData }: any) => {
                         </React.Fragment>
                     )}
                 </div>
-                {!R.isEmpty(timelineBlockData.diff) && (
+                {(!R.isEmpty(timelineBlockData.diff) || timelineBlockData.renderDiff) && (
                     <Collapsible.Root open={isActive}>
                         <CollapsibleHeader onClick={() => setIsActive(!isActive)}>
                             <Icon size={12} name={isActive ? "removeOutlineBox" : "addOutlineBox"} />
@@ -108,7 +108,11 @@ const DiffTimelineBlock = ({ timelineBlockData }: any) => {
                             </span>
                         </CollapsibleHeader>
                         <CollapsibleContent>
-                            <DiffTable diff={timelineBlockData.diff} />
+                            {timelineBlockData.renderDiff ?
+                                timelineBlockData.renderDiff()
+                                :
+                                <DiffTable diff={timelineBlockData.diff} />}
+                            
                         </CollapsibleContent>
                     </Collapsible.Root>
                 )}