diff --git a/src/components/bubble/index.vue b/src/components/bubble/index.vue
index 9057e65278d4417093344d5f658cf8b191469141..fc868c65db98e5d374b02804c2093d769e3b7301 100644
--- a/src/components/bubble/index.vue
+++ b/src/components/bubble/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, VNode, h } from 'vue';
+import { VNode } from 'vue';
 import type { CSSProperties } from 'vue';
 
 type Style = Record<'avatar' | 'content', CSSProperties>;
@@ -15,7 +15,7 @@ interface BubbleProps {
   contentRender?: (content: string) => VNode;
 }
 
-const props = withDefaults(defineProps<BubbleProps>(), {
+withDefaults(defineProps<BubbleProps>(), {
   loading: false,
   placement: 'start',
   shape: 'corner',
@@ -72,6 +72,7 @@ const props = withDefaults(defineProps<BubbleProps>(), {
     justify-content: center;
     align-items: center;
     font-size: 12px;
+    line-height: 20px;
 
     span {
       padding: 0 8px;
diff --git a/src/views/api/components/PluginCard.vue b/src/views/api/components/PluginCard.vue
index eb16dbf9c35d4db8737d8060994651fe0e1c9826..b5d52a604ad78aeb5e747dd88b457e7d663abb1c 100644
--- a/src/views/api/components/PluginCard.vue
+++ b/src/views/api/components/PluginCard.vue
@@ -66,6 +66,7 @@ const props = defineProps<CardInfo>();
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 80%;
+        font-weight: 700;
       }
     }
   }
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
index eb9647c35096e83170482ee28aaa030360243f61..918dd6798b6c038a3371200f9bc1c434253752f4 100644
--- a/src/views/app/index.vue
+++ b/src/views/app/index.vue
@@ -403,5 +403,12 @@ img {
   --o-tabs-item-padding: 5px 16px 0 5px;
   --o-tabs-line-height: 32px;
   --o-tabs-color_active: rgb(99, 149, 253);
+  .el-tabs__header {
+    .el-tabs__nav-wrap {
+      .el-tabs__item {
+        height: 32px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/app/style.scss b/src/views/app/style.scss
index 2e26280cdec845183e8fe8f4af38ae358354551c..9435ec9ec2623862af1c7876dbbb85898c8aa8c8 100644
--- a/src/views/app/style.scss
+++ b/src/views/app/style.scss
@@ -62,7 +62,6 @@
       }
     }
     .appCenterCardContainer {
-      padding-top: 4px;
       width: 1340px;
       .appCenterCardBox {
         padding-top: 16px;
diff --git a/src/views/createapp/components/AgentAppConfig.vue b/src/views/createapp/components/AgentAppConfig.vue
index 21b2087ffbb6c81e4d957e76d6c9bb932df41d11..743158e71bd7040f4cc963260cf29cf24c4d887a 100644
--- a/src/views/createapp/components/AgentAppConfig.vue
+++ b/src/views/createapp/components/AgentAppConfig.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CaretRight, CirclePlus } from '@element-plus/icons-vue';
+import { CaretRight, CirclePlus, CaretBottom } from '@element-plus/icons-vue';
 import AppInitalPreview from '@/views/dialogue/components/AppInitalPreview.vue';
 import { ref, reactive, onMounted, watch, computed } from 'vue';
 import { ElMessage, FormRules, UploadProps } from 'element-plus';
@@ -299,6 +299,7 @@ onMounted(async () => {
               <el-select
                 v-model="createAppForm.model"
                 style="width: 100%"
+                :suffix-icon="CaretBottom"
                 :placeholder="t('app.modelSelected_input')"
               >
                 <el-option
@@ -379,7 +380,7 @@ onMounted(async () => {
             </el-form-item>
           </el-collapse-item>
 
-          <el-collapse-item name="ability">
+          <el-collapse-item class="ability-and-permissions" name="ability">
             <template #title>
               <span class="collapse-title">
                 {{ t('app.ability_Configuration') }}
@@ -431,7 +432,7 @@ onMounted(async () => {
             </el-form-item>
           </el-collapse-item>
 
-          <el-collapse-item name="permissions">
+          <el-collapse-item class="ability-and-permissions" name="permissions">
             <template #title>
               <span class="collapse-title">
                 {{ t('app.permissionConfiguration') }}
@@ -517,8 +518,7 @@ onMounted(async () => {
       align-items: center;
       font-weight: 700;
       color: var(--o-text-color-primary);
-      margin-bottom: 10px;
-      padding-left: 6px;
+      margin: 0 0 8px 8px;
       cursor: pointer;
       font-size: 16px;
     }
@@ -546,6 +546,9 @@ onMounted(async () => {
           top: 25%;
         }
       }
+      :deep(.el-collapse-item__header) {
+        margin-bottom: 8px;
+      }
 
       .hide-header {
         :deep(.el-collapse-item__header) {
@@ -553,6 +556,12 @@ onMounted(async () => {
         }
       }
 
+      .ability-and-permissions {
+        :deep(.el-collapse-item__header) {
+          margin-bottom: 16px;
+        }
+      }
+
       .collapse-title {
         margin-left: 6px;
         color: var(--o-text-color-primary);
diff --git a/src/views/createapp/components/DebugApp.vue b/src/views/createapp/components/DebugApp.vue
index ed95d9917ca57a2332f200af07849ab91311adbb..393e614b0d74448fed055203d63baba1d22cd159 100644
--- a/src/views/createapp/components/DebugApp.vue
+++ b/src/views/createapp/components/DebugApp.vue
@@ -387,11 +387,11 @@ watch(
               }"
             >
               <template #content>
-                <span class="custom-content">
+                <div class="custom-content">
                   你好，我是
-                  <span class="gradient-text">{{ config.name }}</span>
+                  <div class="gradient-text">{{ config.name }}</div>
                   ，很高兴为您服务
-                </span>
+                </div>
               </template>
               <template #footer>
                 <div class="description">{{ config.description }}</div>
@@ -620,7 +620,9 @@ watch(
 
         .custom-content {
           font-size: 24px;
+          line-height: 32px;
           font-weight: 700;
+          display: flex;
 
           .gradient-text {
             background: linear-gradient(
@@ -635,7 +637,9 @@ watch(
         }
 
         .description {
+          font-size: 16px;
           border-top: 1px solid var(--o-border-color-light);
+          color: rgb(78, 88, 101);
           display: flex;
           justify-content: space-between;
           align-items: center;
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index 004886797c0ced6e5107e371d1262b861d3b4b8c..956cac38cf35787f36f529aa84e7f82fba1287ae 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -109,11 +109,12 @@ onMounted(() => {
       <div class="wrapper">
         <div class="search">
           <el-input
+            class="search-input"
             v-model="searchKeyword"
-            type="search"
             :placeholder="t('common.search')"
-            :suffix-icon="Search"
             @change="queryMcpList"
+            :suffix-icon="Search"
+            clearable
           ></el-input>
         </div>
 
@@ -174,6 +175,19 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
 
+    .search {
+      .search-input {
+        :deep(.el-input__suffix-inner) {
+          display: flex;
+          flex-direction: row-reverse;
+          .el-icon:not(:last-child) {
+            border-left: 1px solid var(--el-border-color);
+            padding-left: 8px;
+          }
+        }
+      }
+    }
+
     .mcp-list {
       flex: 1;
       overflow: scroll;
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 12361dce33bf5c90d8aad9b487d1735aca48b879..36dcc4671bb93feaaf12315ddfcab066569f8e86 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -264,7 +264,6 @@ watch(
           font-size: 16px;
           line-height: 24px;
           margin-top: 8px;
-          margin-bottom: 20px;
           color: var(--o-text-color-secondary);
         }
         .preMainContentLink {