diff --git a/src/views/dicom-show/dicom-study.vue b/src/views/dicom-show/dicom-study.vue
index 3955faef..dc72218a 100644
--- a/src/views/dicom-show/dicom-study.vue
+++ b/src/views/dicom-show/dicom-study.vue
@@ -53,6 +53,7 @@
                                 <div class="frame_list">
                                   <div v-for="(instance, idx) in item.instanceInfoList" :key="instance.Id"
                                     class="frame_content"
+                                    :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                                     :style="{ 'margin-bottom': idx < item.instanceInfoList.length - 1 ? '5px' : '0px' }"
                                     @click="showMultiFrames(item, index, instance)">
                                     <div>
@@ -72,17 +73,17 @@
                                   </div>
                                 </div>
                                 <i slot="reference" class="el-icon-connection" style="font-size: 15px;cursor: pointer;"
-                                  @click="popperClick(seriesList, item)" />
+                                  @click.stop="popperClick(seriesList, item)" />
                               </el-popover>
                             </div>
                           </div>
-                          <div v-show="item.instanceCount" style="padding: 1px;">
+                          <div v-if="item.instanceCount" style="padding: 1px;">
                             {{ item.modality }}: {{ item.instanceCount }} image
                           </div>
-                          <div v-show="!item.keySeries && item.sliceThickness" style="padding: 1px;">
+                          <div v-if="!item.keySeries && item.sliceThickness" style="padding: 1px;">
                             T: {{ parseFloat(item.sliceThickness).toFixed(2) }}
                           </div>
-                          <div v-show="!item.keySeries && item.description"
+                          <div v-if="!item.keySeries && item.description"
                             style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                             {{ item.description }}
                           </div>
@@ -203,7 +204,8 @@ export default {
       isReading: null,
       activeSeriesId: null,
       isPacs: false,
-      isComparison: false
+      isComparison: false,
+      activeInstanceId: null
     }
   },
   created: function () {
@@ -536,6 +538,7 @@ export default {
     showSeriesImage(e, seriesIndex, series) {
       if (this.isComparison) return false
       this.activeSeriesId = series.seriesId
+      this.activeInstanceId = null
       workSpeedclose(true)
       // if (seriesIndex === this.currentSeriesIndex) return
       const element = e.currentTarget
@@ -584,6 +587,7 @@ export default {
     },
     showMultiFrames(series, seriesIndex, instanceInfo) {
       this.currentSeriesIndex = seriesIndex
+      this.activeInstanceId = instanceInfo.Id
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
@@ -1193,6 +1197,10 @@ export default {
   border-color: #213a54 !important;
   background-color: #213a54;
 }
+.frame_content_active {
+  border-color: #213a54 !important;
+  background-color: #213a54;
+}
 
 /* .viewerRightSidePanel {
     width: 300px;
diff --git a/src/views/dicom-show/dicom-visit.vue b/src/views/dicom-show/dicom-visit.vue
index 6eeb249e..e4f303ac 100644
--- a/src/views/dicom-show/dicom-visit.vue
+++ b/src/views/dicom-show/dicom-visit.vue
@@ -19,25 +19,26 @@
                       <el-collapse-item v-for="(study, index) in studyList" :key="`${study.StudyId}`"
                         :name="`${study.StudyId}`">
                         <template slot="title">
-
-                          <div class="text-desc">
-                            {{ study.StudyCode }}
-                          </div>
+                          <div class="collapse-title-wrapper">
+                            <div class="text-desc">
+                              {{ study.StudyCode }}
+                            </div>
                           <!-- <div v-show="study.Description" class="text-desc">
                             {{ study.Description }}
                           </div> -->
-                          <el-tooltip v-show="study.Description" class="item" effect="dark" :content="study.Description"
+                          <!-- <el-tooltip v-show="study.Description" class="item" effect="dark" :content="study.Description"
                             placement="bottom">
-                            <div v-show="study.Description"
+                            <div v-if="study.Description"
                               style="width: 50px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                               {{ study.Description }}
                             </div>
-                          </el-tooltip>
-                          <div v-show="study.SeriesCount" class="text-desc">
-                            {{ study.Modalities }} : {{ study.SeriesCount }} Series
+                          </el-tooltip> -->
+                            <div v-if="study.SeriesCount" class="text-desc collapse-title-extra">
+                              {{ study.Modalities }} : {{ study.SeriesCount }} Series
+                            </div>
                           </div>
                         </template>
-                        <div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
+                        <div v-if="study.Description" class="text-desc" style="background-color: #1f1f1f;">
                           {{ study.Description }}
                         </div>
                         <div v-for="(series, i) in study.SeriesList" :key="i"
@@ -65,6 +66,7 @@
                                     <div class="frame_list">
                                       <div v-for="(instance, idx) in series.instanceInfoList" :key="instance.Id"
                                         class="frame_content"
+                                        :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                                         :style="{ 'margin-bottom': idx < series.instanceInfoList.length - 1 ? '5px' : '0px' }"
                                         @click="showMultiFrames(index, series, i, instance)">
                                         <!-- <div>
@@ -97,7 +99,7 @@
                                     </div>
                                     <i slot="reference" class="el-icon-connection"
                                       style="font-size: 15px;cursor: pointer;"
-                                      @click="popperClick(studyList, series)" />
+                                      @click.stop="popperClick(studyList, series)" />
                                   </el-popover>
                                 </div>
 
@@ -166,16 +168,17 @@
                         <el-collapse-item :key="`${study.StudyId}`" :name="`${study.StudyId}`"
                           v-if="study.VisitName === item.VisitName">
                           <template slot="title">
-
-                            <div class="text-desc">
-                              {{ study.StudyCode }}
-                            </div>
+                            <div class="collapse-title-wrapper">
+                              <div class="text-desc">
+                                {{ study.StudyCode }}
+                              </div>
                             <!-- <div v-show="study.Description" class="text-desc">
                         {{ study.Description }}
                       </div> -->
 
-                            <div v-show="study.SeriesCount" class="text-desc">
-                              {{ study.Modalities }} : {{ study.SeriesCount }} Series
+                              <div v-show="study.SeriesCount" class="text-desc collapse-title-extra">
+                                {{ study.Modalities }} : {{ study.SeriesCount }} Series
+                              </div>
                             </div>
                           </template>
                           <div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
@@ -207,6 +210,7 @@
                                           <div class="frame_list">
                                             <div v-for="(instance, idx) in seriesItem.instanceInfoList"
                                               :key="instance.Id" class="frame_content"
+                                              :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                                               :style="{ 'margin-bottom': idx < seriesItem.instanceInfoList.length - 1 ? '5px' : '0px' }"
                                               @click="showMultiFrames(studyIndex, seriesItem, index, instance)">
                                               <div>
@@ -327,7 +331,8 @@ export default {
       isFromCRCUpload: false,
       visitTaskId: null,
       page: '',
-      activeSeriesId: null
+      activeSeriesId: null,
+      activeInstanceId: null
     }
   },
   mounted() {
@@ -522,6 +527,7 @@ export default {
     },
     showSeriesImage(e, studyIndex, seriesIndex, series) {
       this.activeSeriesId = series.seriesId
+      this.activeInstanceId = null
       workSpeedclose(true)
       const element = e.currentTarget
       const elements = document.querySelectorAll('[series-type]')
@@ -563,6 +569,7 @@ export default {
     },
     showMultiFrames(studyIndex, series, seriesIndex, instanceInfo) {
       this.currentSeriesIndex = seriesIndex
+      this.activeInstanceId = instanceInfo.Id
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
@@ -886,6 +893,7 @@ export default {
     },
     showRelationSeriesImage(e, series, studyIndex, index) {
       this.activeSeriesId = series.seriesId
+      this.activeInstanceId = null
       workSpeedclose(true)
       this.currentRelationIndex = index
       const element = e.currentTarget
@@ -1105,6 +1113,7 @@ export default {
   padding: 0;
   margin-right: 2px;
   color: #D0D0D0;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
@@ -1113,6 +1122,8 @@ export default {
   word-break: break-all;
   display: table;
   width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
   border: 1px solid #3e3f3a;
 }
 
@@ -1219,12 +1230,24 @@ export default {
 
 .viewerContainer .el-collapse {
   border: none;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 .viewerContainer .el-collapse-item {
   background-color: #585453 !important;
   color: #ddd;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
 
+.viewerContainer .el-collapse-item__wrap {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 .viewerContainer .el-collapse-item__content {
@@ -1237,9 +1260,42 @@ export default {
   background-color: #585453 !important;
   color: #ddd;
   border-bottom-color: #5a5a5a;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   padding-left: 5px;
-  height: 40px;
+  height: auto;
+  min-height: 30px;
   line-height: 20px;
+  align-items: flex-start;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.viewerContainer .collapse-title-wrapper {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 6px;
+  row-gap: 2px;
+  line-height: 16px;
+  padding-right: 8px;
+}
+
+.viewerContainer .collapse-title-wrapper .text-desc {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.viewerContainer .collapse-title-wrapper .collapse-title-extra {
+  flex: 0 1 auto;
+  text-align: left;
 }
 
 .instance_frame_wrapper {
@@ -1282,6 +1338,10 @@ export default {
   border-color: #213a54 !important;
   background-color: #213a54;
 }
+.frame_content_active {
+  border-color: #213a54 !important;
+  background-color: #213a54;
+}
 
 /* .viewerRightSidePanel {
     width: 300px;
diff --git a/src/views/trials/trials-panel/trial-summary/data-sync/components/StudyList.vue b/src/views/trials/trials-panel/trial-summary/data-sync/components/StudyList.vue
index 36febec1..8827eba7 100644
--- a/src/views/trials/trials-panel/trial-summary/data-sync/components/StudyList.vue
+++ b/src/views/trials/trials-panel/trial-summary/data-sync/components/StudyList.vue
@@ -90,15 +90,69 @@
       <el-table v-loading="loading" v-adaptive="{ bottomOffset: 60 }" height="100" :data="list"
         class="table" @sort-change="handleSortByColumn" :default-sort="{ prop: 'CreateTime', order: 'descending' }">
         <el-table-column type="index" width="50" />
-        <el-table-column :label="$t('trials:data-sync:studyList:subjectCode')" prop="SubjectCode" min-width="90" show-overflow-tooltip sortable="custom"/>
-        <el-table-column :label="$t('trials:data-sync:studyList:visitName')" prop="VisitName" min-width="90" show-overflow-tooltip sortable="custom"/>
-        <el-table-column :label="$t('trials:data-sync:studyList:studyCode')" prop="StudyCode" min-width="90" show-overflow-tooltip sortable="custom"/>
-        <el-table-column :label="$t('trials:data-sync:studyList:fileCount')" prop="FileCount" min-width="90" show-overflow-tooltip/>
-        <el-table-column :label="$t('trials:data-sync:studyList:uploadRegion')" prop="UploadRegion" min-width="60" show-overflow-tooltip />
-        <el-table-column :label="$t('trials:data-sync:studyList:createTime')" prop="CreateTime" min-width="90" show-overflow-tooltip />
-        <el-table-column :label="$t('trials:data-sync:studyList:targetRegion')" prop="TargetRegion" min-width="60" show-overflow-tooltip />
-        <el-table-column :label="$t('trials:data-sync:studyList:syncFinishedTime')" prop="SyncFinishedTime" min-width="90" show-overflow-tooltip/>
-        <el-table-column :label="$t('trials:data-sync:studyList:isSync')" prop="IsSync" min-width="90" show-overflow-tooltip sortable="custom">
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:subjectCode')" 
+          prop="SubjectCode" 
+          min-width="90" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:visitName')" 
+          prop="VisitName" 
+          min-width="90" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:studyCode')" 
+          prop="StudyCode" 
+          min-width="90" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:fileCount')" 
+          prop="FileCount" 
+          min-width="90" 
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:uploadRegion')" 
+          prop="UploadRegion" 
+          min-width="60" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:createTime')" 
+          prop="CreateTime" 
+          min-width="90" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:targetRegion')" 
+          prop="TargetRegion" 
+          min-width="60" 
+          show-overflow-tooltip 
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:syncFinishedTime')" 
+          prop="SyncFinishedTime" 
+          min-width="90" 
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column 
+          :label="$t('trials:data-sync:studyList:isSync')" 
+          prop="IsSync" 
+          min-width="90" 
+          show-overflow-tooltip 
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.IsSync" type="success">
               {{ $fd('YesOrNo', scope.row.IsSync) }}