diff --git a/apollo-portal/src/main/resources/static/config/diff.html b/apollo-portal/src/main/resources/static/config/diff.html
index 0bd2adb8922..b2aac9c9a00 100644
--- a/apollo-portal/src/main/resources/static/config/diff.html
+++ b/apollo-portal/src/main/resources/static/config/diff.html
@@ -128,28 +128,26 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                             </div>
                             <div class="col-sm-12 diff-content">
                                 <!--表格对比 properties mode-->
-                                <table class="table table-bordered table-striped table-hover table-fixed" ng-show="isTableDiff">
+                                <table class="table table-bordered table-striped table-hover" ng-show="isTableDiff">
                                 <thead>
                                         <tr>
-                                            <td width="10%">Key</td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces">
+                                            <th>Key</th>
+                                            <th ng-repeat="cluster in syncData.syncToNamespaces">
                                                 Value ( {{'Common.Environment' | translate }} : <label ng-bind="cluster.env"></label> , {{'Common.Cluster' | translate }} : <label ng-bind="cluster.clusterName"></label> )
-                                            </td>
-                                            <td ng-show="showCommentDiff" ng-repeat="cluster in syncData.syncToNamespaces">
+                                            </th>
+                                            <th ng-show="showCommentDiff" ng-repeat="cluster in syncData.syncToNamespaces">
                                                 Comment ( {{'Common.Environment' | translate }} : <label ng-bind="cluster.env"></label> , {{'Common.Cluster' | translate }} : <label ng-bind="cluster.clusterName"></label> )
-                                            </td>
+                                            </th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey" ng-if="(searchKey === '' || key.indexOf(searchKey) !== -1 ) && (!onlyShowDiffKeys || (onlyShowDiffKeys && !allNamespaceValueEqualed[key]))">
                                             <td width="15%" ng-bind="key"></td>
                                             <td ng-bind="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"></td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces.slice(1)">
-                                                <span ng-if="itemsKeyedByCluster[cluster.compositedKey]" >
-                                                    <apollodiff  old-str="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"
-                                                                 new-str="(itemsKeyedByCluster[cluster.compositedKey] || {}).value"
-                                                                 apollo-id="'clusterDiff:' + key + ':' + cluster.compositedKey">
-                                                    </apollodiff>
+                                            <td ng-repeat="cluster in syncData.syncToNamespaces.slice(1)" class="cursor-pointer"
+                                                ng-click="showTextDiff((itemsKeyedByCluster[syncData.firstClusterKey] || {}).value, (itemsKeyedByCluster[cluster.compositedKey] || {}).value)">
+                                                <span ng-if="itemsKeyedByCluster[cluster.compositedKey]"
+                                                      ng-bind="(itemsKeyedByCluster[cluster.compositedKey] || {}).value">
                                                 </span>
                                             </td>
                                             <td ng-show="showCommentDiff"
@@ -171,7 +169,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
             </div>
         </section>
 
-        <showtextmodal text="text" />
+        <showtextmodal text="text" enable-text-diff='1' old-str="oldStr" new-str="newStr"/>
     </div>
 
 
diff --git a/apollo-portal/src/main/resources/static/config/history.html b/apollo-portal/src/main/resources/static/config/history.html
index cf6d0420e0e..fb81125339d 100644
--- a/apollo-portal/src/main/resources/static/config/history.html
+++ b/apollo-portal/src/main/resources/static/config/history.html
@@ -188,14 +188,10 @@ <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                                                 <span
                                                     ng-bind="change.entity.firstEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
-                                            <td class="cursor-pointer left-overflow" width="35%"
-                                                ng-click="showText(change.entity.secondEntity.value)">
-                                                <span>
-                                                    <apollodiff  old-str="change.entity.firstEntity.value"
-                                                                 new-str="change.entity.secondEntity.value"
-                                                                 apollo-id="'diff:' + change.entity.firstEntity.key">
-                                                    </apollodiff>
-                                                </span>
+                                            <td class="cursor-pointer" width="35%"
+                                                ng-click="showTextDiff(change.entity.firstEntity.value, change.entity.secondEntity.value)">
+                                                <span ng-bind="change.entity.secondEntity.value | limitTo: 250"></span>
+                                                <span ng-bind="change.entity.secondEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -313,7 +309,7 @@ <h4 class="text-center empty-container" ng-show="!isConfigHidden">
             </div>
         </section>
 
-        <showtextmodal text="text"></showtextmodal>
+        <showtextmodal text="text" new-str="newStr" old-str="oldStr" enable-text-diff="enableTextDiff"></showtextmodal>
 
         <rollbackmodal app-id="pageContext.appId" env="pageContext.env" cluster="pageContext.clusterName">
         </rollbackmodal>
diff --git a/apollo-portal/src/main/resources/static/i18n/en.json b/apollo-portal/src/main/resources/static/i18n/en.json
index 69ae8e5e4cf..7cab764e0c6 100644
--- a/apollo-portal/src/main/resources/static/i18n/en.json
+++ b/apollo-portal/src/main/resources/static/i18n/en.json
@@ -297,6 +297,7 @@
   "Component.Publish.NoPublishedValue": "Unreleased values",
   "Component.Publish.ModifyUser": "Modifier",
   "Component.Publish.ModifyTime": "Modified Time",
+  "Component.Publish.ModifyRecord": "Record",
   "Component.Publish.NewAdded": "New",
   "Component.Publish.NewAddedTips": "New Configuration",
   "Component.Publish.Modified": "Modified",
diff --git a/apollo-portal/src/main/resources/static/i18n/zh-CN.json b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
index f9f82e28dfe..8c00fee807f 100644
--- a/apollo-portal/src/main/resources/static/i18n/zh-CN.json
+++ b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
@@ -297,6 +297,7 @@
   "Component.Publish.NoPublishedValue": "待发布的值",
   "Component.Publish.ModifyUser": "修改人",
   "Component.Publish.ModifyTime": "修改时间",
+  "Component.Publish.ModifyRecord": "修改记录",
   "Component.Publish.NewAdded": "新",
   "Component.Publish.NewAddedTips": "新增的配置",
   "Component.Publish.Modified": "改",
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
index 7354ac670cb..8272ba7d28d 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
+++ b/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
@@ -38,7 +38,7 @@ diff_item_module.controller("DiffItemController",
             $scope.backToAppHomePage = backToAppHomePage;
             $scope.switchSelect = switchSelect;
 
-            $scope.showText = showText;
+            $scope.showTextDiff = showTextDiff;
 
             $scope.itemsKeyedByKey = {};
             $scope.allNamespaceValueEqualed = {};
@@ -195,8 +195,9 @@ diff_item_module.controller("DiffItemController",
                 o.checked = !o.checked;
             }
 
-            function showText(text) {
-                $scope.text = text;
+            function showTextDiff(oldStr, newStr) {
+                $scope.oldStr = oldStr;
+                $scope.newStr = newStr;
                 AppUtil.showModal('#showTextModal');
             }
         }]);
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js
index 028cb554b04..45302596938 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js
+++ b/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js
@@ -53,6 +53,7 @@ function releaseHistoryController($scope, $location, $translate, AppUtil, EventM
     $scope.switchConfigViewType = switchConfigViewType;
     $scope.findReleaseHistory = findReleaseHistory;
     $scope.showText = showText;
+    $scope.showTextDiff = showTextDiff;
 
     EventManager.subscribe(EventManager.EventType.REFRESH_RELEASE_HISTORY, function () {
         location.reload(true);
@@ -207,8 +208,16 @@ function releaseHistoryController($scope, $location, $translate, AppUtil, EventM
     }
 
     function showText(text) {
+        $scope.enableTextDiff = false;
         $scope.text = text;
         AppUtil.showModal("#showTextModal");
     }
+
+    function showTextDiff(oldStr, newStr) {
+        $scope.enableTextDiff = true;
+        $scope.oldStr = oldStr;
+        $scope.newStr = newStr;
+        AppUtil.showModal('#showTextModal');
+    }
 }
 
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js
index 89d82a4e97b..9b285c9a8a2 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js
+++ b/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js
@@ -34,6 +34,7 @@ function releaseModalDirective($translate, toastr, AppUtil, EventManager, Releas
 
             scope.releaseBtnDisabled = false;
             scope.releaseChangeViewType = 'compareWithPublishedValue';
+            scope.isComparePublished = true;
             scope.releaseComment = '';
             scope.isEmergencyPublish = false;
 
@@ -170,6 +171,9 @@ function releaseModalDirective($translate, toastr, AppUtil, EventManager, Releas
 
             function switchReleaseChangeViewType(type) {
                 scope.releaseChangeViewType = type;
+                scope.isCompareMaster = type === 'compareWithMasterValue';
+                scope.isComparePublished = type === 'compareWithPublishedValue';
+                scope.isNoCompare = type === 'release';
             }
         }
     }
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
index ff55de3dc1c..f023a03ef07 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
+++ b/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
@@ -74,7 +74,10 @@ function showTextModalDirective(AppUtil) {
         transclude: true,
         replace: true,
         scope: {
-            text: '='
+            text: '=',
+            oldStr: '=',
+            newStr: '=',
+            enableTextDiff: '='
         },
         link: function (scope) {
             scope.$watch('text', init);
diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
index b396156c687..7d90f4b6fe9 100644
--- a/apollo-portal/src/main/resources/static/styles/common-style.css
+++ b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -95,7 +95,7 @@ p, td, span {
     color: #797979;
 }
 
-pre {
+pre .pre{
     white-space: pre-wrap; /* Since CSS 2.1 */
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
     white-space: -pre-wrap; /* Opera 4-6 */
@@ -103,10 +103,6 @@ pre {
     word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 
-.pre {
-    white-space: pre;
-}
-
 .hover:hover {
     background: #f5f5f5;
     cursor: pointer
@@ -1185,4 +1181,8 @@ table th {
 
 .table-fixed{
     table-layout: fixed;
+}
+
+.block {
+    display: block;
 }
\ No newline at end of file
diff --git a/apollo-portal/src/main/resources/static/views/component/diff.html b/apollo-portal/src/main/resources/static/views/component/diff.html
index 0caebc37bd7..938819c001a 100644
--- a/apollo-portal/src/main/resources/static/views/component/diff.html
+++ b/apollo-portal/src/main/resources/static/views/component/diff.html
@@ -1,4 +1,4 @@
-<pre class="no-radius pre" id="{{apolloId}}">
+<pre class="no-radius" id="{{apolloId}}" style="margin:0">
 <!--
   ~ Copyright 2024 Apollo Authors
   ~
diff --git a/apollo-portal/src/main/resources/static/views/component/release-modal.html b/apollo-portal/src/main/resources/static/views/component/release-modal.html
index ce90ca7ea81..bedaee73652 100644
--- a/apollo-portal/src/main/resources/static/views/component/release-modal.html
+++ b/apollo-portal/src/main/resources/static/views/component/release-modal.html
@@ -72,20 +72,17 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                             ng-if="toReleaseNamespace.isPropertiesFormat && !toReleaseNamespace.isBranch">
                             <thead>
                                 <tr>
-                                    <th>
+                                    <th width="12%">
                                         {{'Component.Publish.Key' | translate }}
                                     </th>
                                     <th>
                                         {{'Component.Publish.PublishedValue' | translate }}
                                     </th>
-                                    <th width="40%">
+                                    <th width="50%">
                                         {{'Component.Publish.NoPublishedValue' | translate }}
                                     </th>
-                                    <th>
-                                        {{'Component.Publish.ModifyUser' | translate }}
-                                    </th>
-                                    <th>
-                                        {{'Component.Publish.ModifyTime' | translate }}
+                                    <th width="12%">
+                                        {{'Component.Publish.ModifyRecord' | translate }}
                                     </th>
                                 </tr>
                             </thead>
@@ -109,12 +106,12 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                         <span ng-bind="config.oldValue"></span>
                                     </td>
                                     <td width="25%" title="{{config.newValue}}" class="left-overflow">
-                                        <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'unpublishedDiffPublished:'+config.item.key"></apollodiff>
-                                    </td>
-                                    <td width="15%" ng-bind="config.item.dataChangeLastModifiedBy">
+                                        <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'diffWithPublished:'+config.item.key"></apollodiff>
                                     </td>
-                                    <td width="15%"
-                                        ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
+                                    <td width="15%">
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedBy"></span>
+                                        <span class="block"  ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd'"></span>
+                                        <span class="block"  ng-bind="config.item.dataChangeLastModifiedTime | date: 'HH:mm:ss'"></span>
                                     </td>
                                 </tr>
                             </tbody>
@@ -129,20 +126,16 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <th width="12%">
                                         {{'Component.Publish.Key' | translate }}
                                     </th>
-                                    <th>
+                                    <th ng-if="isCompareMaster || isNoCompare">
                                         {{'Component.Publish.MasterValue' | translate }}
                                     </th>
-                                    <th>
+                                    <th ng-if="isComparePublished || isNoCompare">
                                         {{'Component.Publish.GrayPublishedValue' | translate }}
                                     </th>
-                                    <th>
-                                        {{'Component.Publish.GrayNoPublishedValue' | translate }}
-                                    </th>
-                                    <th width="10%">
-                                        {{'Component.Publish.ModifyUser' | translate }}
-                                    </th>
+                                    <th ng-if="isNoCompare">{{'Component.Publish.GrayNoPublishedValue' | translate }}</th>
+                                    <th ng-if="!isNoCompare" width="50%">{{'Component.Publish.GrayNoPublishedValue' | translate }}</th>
                                     <th width="12%">
-                                        {{'Component.Publish.ModifyTime' | translate }}
+                                        {{'Component.Publish.ModifyRecord' | translate }}
                                     </th>
                                 </tr>
                             </thead>
@@ -154,25 +147,25 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                         <span class="label label-danger"
                                             ng-show="config.isDeleted">{{'Component.Publish.Deleted' | translate }}</span>
                                     </td>
-                                    <td width="20%" title="{{config.masterReleaseValue}}">
+                                    <td width="20%" title="{{config.masterReleaseValue}}" ng-if="isCompareMaster || isNoCompare">
                                         <span ng-bind="config.masterReleaseValue"></span>
                                     </td>
-                                    <td width="20%" title="{{config.oldValue}}">
+                                    <td width="20%" title="{{config.oldValue}}" ng-if="isComparePublished || isNoCompare">
                                         <span ng-bind="config.oldValue"></span>
                                     </td>
                                     <td width="20%" title="{{config.newValue}}" class="left-overflow">
-                                        <span ng-if="releaseChangeViewType=='compareWithMasterValue'">
-                                            <apollodiff old-str="config.masterReleaseValue" new-str="config.newValue" apollo-id="'grayDiffMaster:' + config.item.key"></apollodiff>
+                                        <span ng-if="isCompareMaster">
+                                            <apollodiff old-str="config.masterReleaseValue" new-str="config.newValue" apollo-id="'grayDiffWithMaster:' + config.item.key"></apollodiff>
                                         </span>
-                                        <span ng-if="releaseChangeViewType=='compareWithPublishedValue'">
-                                            <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'grayDiffPublished:' + config.item.key"></apollodiff>
+                                        <span ng-if="isComparePublished">
+                                            <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'grayDiffWithPublished:' + config.item.key"></apollodiff>
                                         </span>
-                                        <span ng-if="releaseChangeViewType=='release'" ng-bind="config.newValue"></span>
-                                    </td>
-                                    <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
+                                        <span ng-if="isNoCompare" ng-bind="config.newValue"></span>
                                     </td>
-                                    <td width="15%"
-                                        ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
+                                    <td>
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedBy"></span>
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd'"></span>
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedTime | date: 'HH:mm:ss'"></span>
                                     </td>
                                 </tr>
                             </tbody>
@@ -184,26 +177,17 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                toReleaseNamespace.isBranch && toReleaseNamespace.mergeAndPublish">
                             <thead>
                                 <tr>
-                                    <th>
+                                    <th width="12%">
                                         {{'Component.Publish.Key' | translate }}
                                     </th>
-                                    <th ng-if="toReleaseNamespace.isBranch">
+                                    <th>
                                         {{'Component.Publish.MasterValue' | translate }}
                                     </th>
-                                    <th width="40%" ng-if="toReleaseNamespace.isBranch && toReleaseNamespace.mergeAndPublish">
+                                    <th width="50%">
                                         {{'Component.Publish.GrayValue' | translate }}
                                     </th>
-                                    <th ng-if="!toReleaseNamespace.isBranch || !toReleaseNamespace.mergeAndPublish">
-                                        {{'Component.Publish.PublishedValue' | translate }}
-                                    </th>
-                                    <th ng-if="!toReleaseNamespace.isBranch || !toReleaseNamespace.mergeAndPublish">
-                                        {{'Component.Publish.NoPublishedValue' | translate }}
-                                    </th>
-                                    <th>
-                                        {{'Component.Publish.ModifyUser' | translate }}
-                                    </th>
-                                    <th>
-                                        {{'Component.Publish.ModifyTime' | translate }}
+                                    <th width="12%">
+                                        {{'Component.Publish.ModifyRecord' | translate }}
                                     </th>
                                 </tr>
                             </thead>
@@ -218,10 +202,10 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <td width="25%" title="{{config.item.value}}" class="left-overflow">
                                         <apollodiff old-str="config.masterReleaseValue" new-str="config.item.value" apollo-id="'grayDiffMasterReleased:' + config.item.key"></apollodiff>
                                     </td>
-                                    <td width="15%" ng-bind="config.item.dataChangeLastModifiedBy">
-                                    </td>
-                                    <td width="15%"
-                                        ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
+                                    <td width="15%">
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedBy"></span>
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd'"></span>
+                                        <span class="block" ng-bind="config.item.dataChangeLastModifiedTime | date: 'HH:mm:ss'"></span>
                                     </td>
                                 </tr>
                             </tbody>
@@ -282,7 +266,7 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                 <div class="form-group">
                     <label class="col-sm-2 control-label">{{'Component.Publish.ReleaseComment' | translate }}</label>
                     <div class="col-sm-10" valdr-form-group>
-                        <textarea rows="4" name="comment" class="form-control" style="margin-top: 15px;"
+                        <textarea rows="2" name="comment" class="form-control"
                             ng-model="releaseComment" placeholder="Add an optional extended description..."></textarea>
                     </div>
                 </div>
diff --git a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html b/apollo-portal/src/main/resources/static/views/component/show-text-modal.html
index 9a740dc1324..90c54df36fe 100644
--- a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html
+++ b/apollo-portal/src/main/resources/static/views/component/show-text-modal.html
@@ -23,11 +23,13 @@
 
                 <h4 class="modal-title">{{'Component.ShowText.Title' | translate }}</h4>
             </div>
-            <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="!jsonObject" ng-bind="text">
-            </pre>
-            <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="jsonObject"
-                ng-bind="jsonObject | json:4 | jsonBigIntFilter">
-            </pre>
+            <div ng-show="!enableTextDiff">
+                <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="!jsonObject" ng-bind="text"></pre>
+                <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="jsonObject" ng-bind="jsonObject | json:4 | jsonBigIntFilter"></pre>
+            </div>
+            <span ng-show="enableTextDiff">
+                <apollodiff old-str="oldStr" new-str="newStr" apollo-id="'textDiff'"> </apollodiff>
+            </span>
         </div>
     </div>
 </div>