diff --git a/core/core-frontend/src/store/modules/appearance.ts b/core/core-frontend/src/store/modules/appearance.ts
index a440927a6a..0e51626fc6 100644
--- a/core/core-frontend/src/store/modules/appearance.ts
+++ b/core/core-frontend/src/store/modules/appearance.ts
@@ -318,6 +318,7 @@ export const useAppearanceStore = defineStore('appearanceStore', {
         document.documentElement.style.setProperty('--ed-color-primary', '#3370FF')
         document.documentElement.style.removeProperty('--ed-color-primary-light-3')
         document.documentElement.style.removeProperty('--ed-color-primary-light-5')
+        document.documentElement.style.removeProperty('--ed-color-primary_b50')
         document.documentElement.style.removeProperty('--ed-color-primary-1a')
         document.documentElement.style.removeProperty('--ed-color-primary-33')
         document.documentElement.style.removeProperty('--ed-color-primary-99')
diff --git a/core/core-frontend/src/views/workbranch/TemplateBranchItem.vue b/core/core-frontend/src/views/workbranch/TemplateBranchItem.vue
index e1bf4132b0..92da4f46bf 100644
--- a/core/core-frontend/src/views/workbranch/TemplateBranchItem.vue
+++ b/core/core-frontend/src/views/workbranch/TemplateBranchItem.vue
@@ -72,41 +72,45 @@ const templateInnerPreview = () => {
   border: 1px solid #d9d9d9;
   border-radius: 6px;
   display: flex;
-  flex-wrap: wrap;
-  min-width: 181px;
+  flex-direction: column;
   width: calc(20% - 16px);
-  height: 141px;
   margin-left: 16px;
+  height: auto;
   position: relative;
+  padding-bottom: 39px;
   margin-bottom: 16px;
 
   .photo {
+    box-sizing: border-box;
     padding: 4px;
     padding-bottom: 0;
-    height: 101px;
+    aspect-ratio: 1.774 / 1;
     width: 100%;
-    .img {
+    overflow: hidden;
+
+    img {
       width: 100%;
       height: 100%;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      display: block;
+      object-fit: cover;
     }
   }
 
   .apply {
+    box-sizing: border-box;
     padding: 8px 12px;
     background: #fff;
     border-top: 1px solid #d9d9d9;
-    position: absolute;
     width: 100%;
-    left: 0;
-    bottom: 0;
     height: 39px;
     display: flex;
     flex-wrap: wrap;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     justify-content: space-between;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 
     .ed-button {
       min-width: 73px;
@@ -147,4 +151,22 @@ const templateInnerPreview = () => {
 .fix-height {
   height: 39px !important;
 }
+
+@media screen and (max-width: 1420px) {
+  .template {
+    width: calc(25% - 16px);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .template {
+    width: calc(33.3333% - 16px);
+  }
+}
+
+@media screen and (max-width: 920px) {
+  .template {
+    width: calc(50% - 16px);
+  }
+}
 </style>
diff --git a/core/core-frontend/src/views/workbranch/TemplateBranchItemSkeleton.vue b/core/core-frontend/src/views/workbranch/TemplateBranchItemSkeleton.vue
index 3c5458e29c..1a7fca9861 100644
--- a/core/core-frontend/src/views/workbranch/TemplateBranchItemSkeleton.vue
+++ b/core/core-frontend/src/views/workbranch/TemplateBranchItemSkeleton.vue
@@ -17,22 +17,25 @@
   border: 1px solid #d9d9d9;
   border-radius: 6px;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   min-width: 181px;
   width: calc(20% - 16px);
-  height: 141px;
+  height: auto;
   margin-left: 16px;
-  position: relative;
   margin-bottom: 16px;
 
   .photo {
+    box-sizing: border-box;
     padding: 4px;
     padding-bottom: 0;
-    height: 101px;
+    aspect-ratio: 1.774 / 1;
     width: 100%;
+    overflow: hidden;
+
     .img {
       width: 100%;
       height: 100%;
+      display: block;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       background: #eff0f199;
@@ -40,13 +43,11 @@
   }
 
   .apply {
+    box-sizing: border-box;
     padding: 8px 12px;
     background: #fff;
     border-top: 1px solid #d9d9d9;
-    position: absolute;
     width: 100%;
-    left: 0;
-    bottom: 0;
     height: 39px;
     display: flex;
     flex-wrap: wrap;
@@ -67,4 +68,22 @@
     }
   }
 }
+
+@media screen and (max-width: 1420px) {
+  .template {
+    width: calc(25% - 16px);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .template {
+    width: calc(33.3333% - 16px);
+  }
+}
+
+@media screen and (max-width: 920px) {
+  .template {
+    width: calc(50% - 16px);
+  }
+}
 </style>
diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue
index 976c1bf1f5..4832897053 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -151,6 +151,10 @@ const initTemplateShow = () => {
       state.hasResult = true
     }
   })
+
+  state.marketTemplatePreviewShowList = state.marketTemplatePreviewShowList
+    .filter(ele => ele.showFlag)
+    .slice(0, 5)
 }
 
 const templateShowCur = templateItem => {
@@ -416,7 +420,6 @@ loadShareBase()
             <div class="template-list" v-show="state.networkStatus && state.hasResult">
               <template-branch-item
                 v-for="(template, index) in state.marketTemplatePreviewShowList"
-                v-show="template['showFlag']"
                 :key="index"
                 :template="template"
                 :base-url="state.baseUrl"