diff --git a/console/atest-ui/src/views/TestSuite.vue b/console/atest-ui/src/views/TestSuite.vue
index 32510338..1cec2070 100644
--- a/console/atest-ui/src/views/TestSuite.vue
+++ b/console/atest-ui/src/views/TestSuite.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { reactive, ref, watch } from 'vue'
-import { Edit, CopyDocument, Delete, View } from '@element-plus/icons-vue'
+import { Edit, CopyDocument, Delete, View, Setting, Link, Plus, Check, Download } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Suite, TestCase, Pair } from './types'
 import { NewSuggestedAPIsQuery, GetHTTPMethods, SwaggerSuggestion } from './types'
@@ -21,8 +21,6 @@ const props = defineProps({
   name: String
 })
 const emit = defineEmits(['updated'])
-let querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name, props.name!)
-const querySwaggers = SwaggerSuggestion()
 
 const suite = ref({
   name: '',
@@ -36,9 +34,9 @@ const suite = ref({
       protofile: '',
       serverReflection: false
     },
-      secure: {
-        insecure: true
-      }
+    secure: {
+      insecure: true
+    }
   },
   proxy: {
     http: '',
@@ -47,6 +45,9 @@ const suite = ref({
   }
 } as Suite)
 const shareLink = ref('')
+const querySuggestedAPIs = ref(NewSuggestedAPIsQuery(Cache.GetCurrentStore().name, props.name!))
+const querySwaggers = ref(SwaggerSuggestion())
+
 function load() {
   const store = Cache.GetCurrentStore()
   if (!props.name || store.name === '') return
@@ -62,16 +63,16 @@ function load() {
         } as Pair)
       }
       if (!suite.value.proxy) {
-          suite.value.proxy = {
-            http: '',
-            https: '',
-            no: ''
-          }
+        suite.value.proxy = {
+          http: '',
+          https: '',
+          no: ''
+        }
       }
       if (!suite.value.spec.secure) {
-          suite.value.spec.secure = {
-            insecure: false
-          }
+        suite.value.spec.secure = {
+          insecure: false
+        }
       }
 
       shareLink.value = `${window.location.href}api/v1/suites/${e.name}/yaml?x-store-name=${store.name}`
@@ -151,7 +152,7 @@ const rules = reactive<FormRules<Suite>>({
 
 function openNewTestCaseDialog() {
   dialogVisible.value = true
-  querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.name!)
+  querySuggestedAPIs.value = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.name!)
 }
 Magic.Keys(openNewTestCaseDialog, ['Alt+N', 'Alt+dead'])
 
@@ -162,17 +163,16 @@ const submitTestCaseForm = async (formEl: FormInstance | undefined) => {
       suiteCreatingLoading.value = true
 
       API.CreateTestCase({
-          suiteName: props.name,
-          name: testCaseForm.name,
-          request: testCaseForm.request
-        }, () => {
-          suiteCreatingLoading.value = false
-          emit('updated', props.name, testCaseForm.name)
-        }, (e) => {
-          suiteCreatingLoading.value = false
-          ElMessage.error('Oops, ' + e)
-        }
-      )
+        suiteName: props.name,
+        name: testCaseForm.name,
+        request: testCaseForm.request
+      }, () => {
+        suiteCreatingLoading.value = false
+        emit('updated', props.name, testCaseForm.name)
+      }, (e) => {
+        suiteCreatingLoading.value = false
+        ElMessage.error('Oops, ' + e)
+      })
 
       dialogVisible.value = false
     }
@@ -238,11 +238,11 @@ const apiSpecKinds = [
 ]
 
 const handleAPISelect = (item: TestCase) => {
-    testCaseForm.method = item.request.method
-    if (testCaseForm.name === '') {
-        testCaseForm.name = item.name
-    }
-    testCaseForm.request = item.request
+  testCaseForm.method = item.request.method
+  if (testCaseForm.name === '') {
+    testCaseForm.name = item.name
+  }
+  testCaseForm.request = item.request
 }
 
 function paramChange() {
@@ -295,238 +295,786 @@ const renameTestSuite = (name: string) => {
 </script>
 
 <template>
-  <div class="common-layout">
-    <el-form :rules="rules"
+  <div class="test-suite-container">
+    <!-- Header Section -->
+    <div class="header-section">
+      <div class="suite-title">
+        <h2 class="title-text">{{ t('tip.testsuite') }}</h2>
+        <EditButton :value="suite.name" @changed="renameTestSuite" class="edit-button"/>
+      </div>
+      <div class="suite-actions">
+        <el-button 
+          type="primary" 
+          :icon="Plus" 
+          @click="openNewTestCaseDialog"
+          test-id="open-new-case-dialog"
+          class="primary-action"
+        >
+          {{ t('button.newtestcase') }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- Main Form -->
+    <el-form 
+      :rules="rules"
       ref="testSuiteFormRef"
       :model="suite"
-      label-width="auto">
-      {{ t('tip.testsuite') }}<EditButton :value="suite.name" @changed="renameTestSuite"/>
-
-      <el-form-item :label="t('tip.apiAddress')" prop="api">
-        <HistoryInput placeholder="API" v-model="suite.api" group="apiAddress" />
-      </el-form-item>
-      <table style="width: 100%">
-        <tr>
-          <td>
-            <el-select
-              v-model="suite.spec.kind"
-              class="m-2"
-              placeholder="API Spec Kind"
-              size="default"
-            >
-              <el-option
-                v-for="item in apiSpecKinds"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </td>
-          <td>
+      label-width="140px"
+      class="main-form"
+    >
+      <!-- API Configuration Card -->
+      <div class="config-card">
+        <div class="card-header">
+          <h3 class="card-title">
+            <el-icon><Setting /></el-icon>
+            API Configuration
+          </h3>
+        </div>
+        <div class="card-content">
+          <el-form-item :label="t('tip.apiAddress')" prop="api" class="form-item">
+            <HistoryInput 
+              placeholder="Enter API address" 
+              v-model="suite.api" 
+              group="apiAddress"
+              class="full-width-input"
+            />
+          </el-form-item>
+          
+          <div class="spec-row">
+            <el-form-item label="API Spec" class="spec-kind">
+              <el-select
+                v-model="suite.spec.kind"
+                placeholder="Select API Spec Kind"
+                size="default"
+                class="spec-select"
+              >
+                <el-option
+                  v-for="item in apiSpecKinds"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="Spec URL" class="spec-url">
               <el-autocomplete
-                  v-model="suite.spec.url"
-                  :fetch-suggestions="querySwaggers"
+                v-model="suite.spec.url"
+                :fetch-suggestions="querySwaggers.value"
+                placeholder="Enter specification URL"
+                class="full-width-input"
               />
-          </td>
-        </tr>
-      </table>
-
-      <el-collapse>
-        <el-collapse-item :title="t('title.parameter')">
-          <el-table :data="suite.param" style="width: 100%">
-            <el-table-column :label="t('field.key')" width="180">
-              <template #default="scope">
-                <el-input v-model="scope.row.key" :placeholder="t('field.key')" @change="paramChange" />
+            </el-form-item>
+          </div>
+        </div>
+      </div>
+
+      <!-- Advanced Configuration -->
+      <div class="config-card">
+        <div class="card-header">
+          <h3 class="card-title">Advanced Configuration</h3>
+        </div>
+        <div class="card-content">
+          <el-collapse class="custom-collapse">
+            <el-collapse-item name="parameters">
+              <template #title>
+                <div class="collapse-title">
+                  <el-icon><Edit /></el-icon>
+                  {{ t('title.parameter') }}
+                </div>
               </template>
-            </el-table-column>
-            <el-table-column :label="t('field.value')">
-              <template #default="scope">
-                <div style="display: flex; align-items: center">
-                  <el-input v-model="scope.row.value" :placeholder="t('field.value')" />
+              <div class="parameters-section">
+                <el-table :data="suite.param" class="params-table">
+                  <el-table-column :label="t('field.key')" width="200">
+                    <template #default="scope">
+                      <el-input 
+                        v-model="scope.row.key" 
+                        :placeholder="t('field.key')" 
+                        @change="paramChange"
+                        class="param-input"
+                      />
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="t('field.value')">
+                    <template #default="scope">
+                      <el-input 
+                        v-model="scope.row.value" 
+                        :placeholder="t('field.value')"
+                        class="param-input"
+                      />
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </el-collapse-item>
+
+            <el-collapse-item v-if="suite.spec.rpc" name="rpc">
+              <template #title>
+                <div class="collapse-title">
+                  <el-icon><Setting /></el-icon>
+                  RPC Configuration
                 </div>
               </template>
-            </el-table-column>
-          </el-table>
-        </el-collapse-item>
-          <el-collapse-item v-if="suite.spec.rpc">
-              <div>
-                  <span>{{ t('title.refelction') }}</span>
+              <div class="rpc-section">
+                <div class="rpc-item">
+                  <label class="rpc-label">{{ t('title.refelction') }}</label>
                   <el-switch v-model="suite.spec.rpc.serverReflection" />
-              </div>
-              <div>
-                  <span>{{ t('title.protoContent') }}</span>
+                </div>
+                <div class="rpc-item">
+                  <label class="rpc-label">{{ t('title.protoContent') }}</label>
                   <el-input
-                      v-model="suite.spec.rpc.raw"
-                      :autosize="{ minRows: 4, maxRows: 8 }"
-                      type="textarea"
+                    v-model="suite.spec.rpc.raw"
+                    :autosize="{ minRows: 4, maxRows: 8 }"
+                    type="textarea"
+                    class="proto-textarea"
                   />
+                </div>
+                <div class="rpc-item">
+                  <label class="rpc-label">{{ t('title.protoImport') }}</label>
+                  <el-input v-model="suite.spec.rpc.import" class="proto-input" />
+                </div>
+                <div class="rpc-item">
+                  <label class="rpc-label">{{ t('title.protoFile') }}</label>
+                  <el-input v-model="suite.spec.rpc.protofile" class="proto-input" />
+                </div>
               </div>
-              <div>
-                  <span>{{ t('title.protoImport') }}</span>
-                  <el-input class="mx-1" v-model="suite.spec.rpc.import"></el-input>
-              </div>
-              <div>
-                  <span>{{ t('title.protoFile') }}</span>
-                  <el-input class="mx-1" v-model="suite.spec.rpc.protofile"></el-input>
+            </el-collapse-item>
+
+            <el-collapse-item name="security">
+              <template #title>
+                <div class="collapse-title">
+                  <el-icon><View /></el-icon>
+                  {{ t('title.secure') }}
+                </div>
+              </template>
+              <div class="security-section">
+                <el-switch 
+                  v-model="suite.spec.secure.insecure" 
+                  active-text="Insecure" 
+                  inactive-text="Secure" 
+                  inline-prompt
+                  class="security-switch"
+                />
               </div>
-          </el-collapse-item>
-          <el-collapse-item :title="t('title.secure')">
-              <el-switch v-model="suite.spec.secure.insecure" active-text="Insecure" inactive-text="Secure" inline-prompt/>
-          </el-collapse-item>
-        <el-collapse-item :title="t('title.proxy')">
-          <div>
-            <el-form-item :label="t('proxy.http')" prop="proxy.http">
-              <el-input class="mx-1" v-model="suite.proxy.http" placeholder="HTTP Proxy"></el-input>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item :label="t('proxy.https')" prop="proxy.http">
-              <el-input class="mx-1" v-model="suite.proxy.https" placeholder="HTTPS Proxy"></el-input>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item :label="t('proxy.no')">
-              <el-input class="mx-1" v-model="suite.proxy.no" placeholder="No Proxy"></el-input>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
+            </el-collapse-item>
 
-      <div class="button-container">
-          Share link: <el-input readonly v-model="shareLink" style="width: 80%" />
+            <el-collapse-item name="proxy">
+              <template #title>
+                <div class="collapse-title">
+                  <el-icon><Link /></el-icon>
+                  {{ t('title.proxy') }}
+                </div>
+              </template>
+              <div class="proxy-section">
+                <el-form-item :label="t('proxy.http')" prop="proxy.http">
+                  <el-input 
+                    v-model="suite.proxy.http" 
+                    placeholder="HTTP Proxy URL"
+                    class="proxy-input"
+                  />
+                </el-form-item>
+                <el-form-item :label="t('proxy.https')" prop="proxy.https">
+                  <el-input 
+                    v-model="suite.proxy.https" 
+                    placeholder="HTTPS Proxy URL"
+                    class="proxy-input"
+                  />
+                </el-form-item>
+                <el-form-item :label="t('proxy.no')">
+                  <el-input 
+                    v-model="suite.proxy.no" 
+                    placeholder="No Proxy URLs"
+                    class="proxy-input"
+                  />
+                </el-form-item>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
       </div>
-      <div class="button-container">
-        <Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" v-if="!Cache.GetCurrentStore().readOnly">{{
-          t('button.save')
-        }}</Button>
-        <Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" disabled v-if="Cache.GetCurrentStore().readOnly">{{
-          t('button.save')
-        }}</Button>
-        <Button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
-          t('button.delete')
-        }}</Button>
-        <Button type="primary" @click="convert" test-id="convert">{{
-          t('button.export')
-        }}</Button>
-        <Button
-          type="primary"
-          @click="openDuplicateDialog"
-          :icon="CopyDocument"
-          test-id="duplicate"
-          >{{ t('button.duplicate') }}</Button
-        >
-        <Button type="primary" @click="viewYaml" :icon="View" test-id="view-yaml">{{
-          t('button.viewYaml')
-        }}</Button>
+
+      <!-- Share Link Section -->
+      <div class="config-card">
+        <div class="card-header">
+          <h3 class="card-title">
+            <el-icon><Link /></el-icon>
+            Share Link
+          </h3>
+        </div>
+        <div class="card-content">
+          <el-input 
+            readonly 
+            v-model="shareLink" 
+            class="share-input"
+            placeholder="Share link will appear here"
+          >
+            <template #append>
+              <el-button :icon="CopyDocument" @click="navigator.clipboard.writeText(shareLink)">
+                Copy
+              </el-button>
+            </template>
+          </el-input>
+        </div>
       </div>
-      <div class="button-container">
-        <Button
-          type="primary"
-          @click="openNewTestCaseDialog"
-          :icon="Edit"
-          test-id="open-new-case-dialog"
-          >{{ t('button.newtestcase') }}</Button
-        >
+
+      <!-- Action Buttons -->
+     <div class="actions-section">
+  <div class="primary-actions">
+    <Button 
+      type="primary" 
+      @click="updateTestSuiteForm(testSuiteFormRef)" 
+      :disabled="Cache.GetCurrentStore().readOnly"
+      class="save-button"
+    >
+      {{ t('button.save') }}
+    </Button>
+  </div>
+        
+        <div class="secondary-actions">
+    <Button 
+      type="info" 
+      @click="convert" 
+      test-id="convert"
+    >
+      Export to JMeter
+    </Button>
+    <Button
+      type="info"
+      @click="openDuplicateDialog"
+      test-id="duplicate"
+    >
+      Duplicate Suite
+    </Button>
+    <Button 
+      type="info" 
+      @click="viewYaml" 
+      test-id="view-yaml"
+    >
+      View YAML
+    </Button>
+    <Button 
+      type="danger" 
+      @click="del" 
+      test-id="suite-del-but"
+      class="delete-button"
+    >
+      Delete Suite
+    </Button>
+        </div>
       </div>
     </el-form>
   </div>
 
-  <el-dialog v-model="dialogVisible" :title="t('title.createTestCase')" width="40%" draggable>
+  <!-- Create Test Case Dialog -->
+  <el-dialog 
+    v-model="dialogVisible" 
+    :title="t('title.createTestCase')" 
+    width="500px" 
+    draggable
+    class="create-dialog"
+  >
+    <el-form
+      :rules="rules"
+      :model="testCaseForm"
+      ref="testcaseFormRef"
+      status-icon
+      label-width="80px"
+      class="dialog-form"
+    >
+      <el-form-item :label="t('field.name')" prop="name">
+        <el-input 
+          v-model="testCaseForm.name" 
+          test-id="case-form-name"
+          placeholder="Enter test case name"
+        />
+      </el-form-item>
+      <el-form-item
+        label="Method"
+        prop="method"
+        v-if="suite.spec.kind !== 'tRPC' && suite.spec.kind !== 'gRPC'"
+      >
+        <el-select
+          v-model="testCaseForm.request.method"
+          placeholder="Select HTTP Method"
+          test-id="case-form-method"
+          class="method-select"
+        >
+          <el-option
+            v-for="item in GetHTTPMethods()"
+            :key="item.value"
+            :label="item.key"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="API" prop="api">
+        <el-autocomplete
+          v-model="testCaseForm.request.api"
+          :fetch-suggestions="querySuggestedAPIs.value"
+          @select="handleAPISelect"
+          placeholder="Enter API endpoint"
+          test-id="case-form-api"
+          class="api-autocomplete"
+        >
+          <template #default="{ item }">
+            <div class="api-suggestion">
+              <span class="method-badge">{{ item.request.method }}</span>
+              <span class="api-path">{{ item.request.api }}</span>
+            </div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+    </el-form>
+    
     <template #footer>
-      <span class="dialog-footer">
-        <el-form
-          :rules="rules"
-          :model="testCaseForm"
-          ref="testcaseFormRef"
-          status-icon
-          label-width="60px"
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button
+          type="primary"
+          @click="submitTestCaseForm(testcaseFormRef)"
+          :loading="suiteCreatingLoading"
+          test-id="case-form-submit"
         >
-          <el-form-item :label="t('field.name')" prop="name">
-            <el-input v-model="testCaseForm.name" test-id="case-form-name" />
-          </el-form-item>
-          <el-form-item
-            label="Method"
-            prop="method"
-            v-if="suite.spec.kind !== 'tRPC' && suite.spec.kind !== 'gRPC'"
-          >
-            <el-select
-              v-model="testCaseForm.request.method"
-              class="m-2"
-              placeholder="Method"
-              size="middle"
-              test-id="case-form-method"
-            >
-              <el-option
-                v-for="item in GetHTTPMethods()"
-                :key="item.value"
-                :label="item.key"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="API" prop="api">
-            <el-autocomplete
-              v-model="testCaseForm.request.api"
-              :fetch-suggestions="querySuggestedAPIs"
-              @select="handleAPISelect"
-              placeholder="API Address"
-              style="width: 100%; margin-left: 5px; margin-right: 5px"
-              test-id="case-form-api"
-            >
-              <template #default="{ item }">
-                <div class="value">{{ item.request.method }}</div>
-                <span class="link">{{ item.request.api }}</span>
-              </template>
-            </el-autocomplete>
-          </el-form-item>
-          <el-form-item>
-            <Button
-              type="primary"
-              @click="submitTestCaseForm(testcaseFormRef)"
-              v-loading="suiteCreatingLoading"
-              test-id="case-form-submit"
-              >{{ t('button.submit') }}</Button
-            >
-          </el-form-item>
-        </el-form>
-      </span>
+          {{ t('button.submit') }}
+        </el-button>
+      </div>
     </template>
   </el-dialog>
 
+  <!-- YAML Viewer Dialog -->
   <el-dialog
     v-model="yamlDialogVisible"
     :title="t('button.viewYaml')"
     :fullscreen="isFullScreen"
-    width="40%"
+    width="70%"
     draggable
+    class="yaml-dialog"
   >
-    <Button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px">
-      <p>{{ isFullScreen ? t('button.cancelFullScreen') : t('button.fullScreen') }}</p>
-    </Button>
-    <el-scrollbar>
-      <Codemirror v-model="yamlFormat" />
-    </el-scrollbar>
+    <div class="yaml-controls">
+      <el-button 
+        type="primary" 
+        @click="isFullScreen = !isFullScreen"
+        :icon="isFullScreen ? 'Minus' : 'Plus'"
+      >
+        {{ isFullScreen ? t('button.cancelFullScreen') : t('button.fullScreen') }}
+      </el-button>
+    </div>
+    <div class="yaml-content">
+      <Codemirror v-model="yamlFormat" class="yaml-editor" />
+    </div>
   </el-dialog>
 
-  <el-drawer v-model="testSuiteDuplicateDialog">
-    <template #default>
-      New Test Suite Name:<el-input v-model="targetSuiteDuplicateName" />
-    </template>
+  <!-- Duplicate Suite Drawer -->
+  <el-drawer v-model="testSuiteDuplicateDialog" title="Duplicate Test Suite" size="400px">
+    <div class="duplicate-content">
+      <el-form label-width="120px">
+        <el-form-item label="New Name:">
+          <el-input 
+            v-model="targetSuiteDuplicateName" 
+            placeholder="Enter new suite name"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
     <template #footer>
-      <Button type="primary" @click="duplicateTestSuite">{{ t('button.ok') }}</Button>
+      <div class="drawer-footer">
+        <el-button @click="testSuiteDuplicateDialog = false">Cancel</el-button>
+        <el-button type="primary" @click="duplicateTestSuite">
+          {{ t('button.ok') }}
+        </el-button>
+      </div>
     </template>
   </el-drawer>
 </template>
 
 <style scoped>
-.button-container {
+.test-suite-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+ 
+  min-height: 100vh;
+}
+
+.header-section {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  padding: 24px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.suite-title {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.title-text {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+
+  background-clip: text;
+}
+
+.edit-button {
+  margin-left: 12px;
+}
+
+.primary-action {
+  padding: 12px 24px;
+  font-weight: 600;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.primary-action:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
+}
+
+.main-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.config-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.config-card:hover {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}
+
+.card-header {
+  padding: 20px 24px;
+  background: #409eff;
+  color: white;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-content {
+  padding: 24px;
+}
+
+.form-item {
+  margin-bottom: 20px;
+}
+
+.full-width-input {
+  width: 100%;
+}
+
+.spec-row {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 20px;
+  align-items: end;
+}
+
+.spec-select {
+  width: 100%;
+}
+
+.custom-collapse {
+  border: none;
+  background: transparent;
+}
+
+.custom-collapse :deep(.el-collapse-item__header) {
+  background: #f8f9fa;
+  border: none;
+  border-radius: 8px;
   margin-bottom: 8px;
+  padding: 16px;
+  font-weight: 600;
+}
+
+.custom-collapse :deep(.el-collapse-item__content) {
+  padding: 20px 16px;
+  background: #fafbfc;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.collapse-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.parameters-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.params-table {
+  width: 100%;
+}
+
+.param-input {
+  border-radius: 6px;
+}
+
+.rpc-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.rpc-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rpc-label {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+.proto-textarea, .proto-input {
+  border-radius: 6px;
+}
+
+.security-section {
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+}
+
+.security-switch {
+  font-size: 16px;
+}
+
+.proxy-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.proxy-input {
+  border-radius: 6px;
+}
+
+.share-input {
+  border-radius: 8px;
+}
+
+.share-input :deep(.el-input__wrapper) {
+  border-radius: 8px 0 0 8px;
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.primary-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.save-button {
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.save-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
+}
+
+.secondary-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.secondary-actions .el-button {
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+.secondary-actions .el-button:hover {
+  transform: translateY(-1px);
+}
+
+.delete-button {
+  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
+}
+
+.delete-button:hover {
+  box-shadow: 0 6px 20px rgba(245, 108, 108, 0.4);
+}
+
+.create-dialog :deep(.el-dialog) {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.create-dialog :deep(.el-dialog__header) {
+
+  color: white;
+  padding: 20px 24px;
+}
+
+.dialog-form {
+  padding: 20px 0;
+}
+
+.method-select, .api-autocomplete {
+  width: 100%;
+}
+
+.api-suggestion {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.method-badge {
+  background: #409eff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 60px;
+  text-align: center;
+}
+
+.api-path {
+  color: #606266;
+  font-family: monospace;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.yaml-dialog :deep(.el-dialog) {
+  border-radius: 16px;
+}
+
+.yaml-controls {
+  margin-bottom: 16px;
+}
+
+.yaml-content {
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.yaml-editor {
+  min-height: 400px;
+}
+
+.duplicate-content {
+  padding: 20px 0;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .test-suite-container {
+    padding: 16px;
+  }
+  
+  .header-section {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+  }
+  
+  .spec-row {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .secondary-actions {
+    flex-direction: column;
+  }
+  
+  .create-dialog {
+    width: 90% !important;
+  }
+}
+
+/* Animation for smooth transitions */
+.config-card {
+  animation: slideInUp 0.6s ease-out;
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Custom scrollbar */
+:deep(.el-scrollbar__wrap) {
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 transparent;
+}
+
+:deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 6px;
+}
+
+:deep(.el-scrollbar__wrap::-webkit-scrollbar-track) {
+  background: transparent;
 }
 
-.button-container > .Button + .Button {
-  margin-left: 0px;
+:deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb) {
+  background-color: #c1c1c1;
+  border-radius: 3px;
 }
-</style>
+</style>
\ No newline at end of file