diff --git a/frontend/src/performance/components/testPlan/AllTestPlan.vue b/frontend/src/performance/components/testPlan/AllTestPlan.vue
index 2f4e573ed9..f6ce5fa241 100644
--- a/frontend/src/performance/components/testPlan/AllTestPlan.vue
+++ b/frontend/src/performance/components/testPlan/AllTestPlan.vue
@@ -1,70 +1,79 @@
 <template>
   <div class="testplan-container">
-    <div>
-      <el-row>
-        <el-col :span="22" :offset="1">
-          <el-table
-            stripe
-            ref="multipleTable"
-            :data="tableData"
-            tooltip-effect="dark"
-            style="width: 100%"
-            @selection-change="handleSelectionChange">
-            <el-table-column
-              type="selection"
-              width="55">
-            </el-table-column>
-            <el-table-column
-              prop="name"
-              label="名称">
-            </el-table-column>
-            <el-table-column
-              prop="description"
-              label="描述"
-              show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column
-              prop="projectName"
-              label="所属项目">
-            </el-table-column>
-            <el-table-column
-              label="创建时间">
-              <template slot-scope="scope">
-                <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="updateTime"
-              label="更新时间">
-              <template slot-scope="scope">
-                <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="操作">
-              <template slot-scope="scope">
-                <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
-                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="22" :offset="1">
-          <div class="table-page">
-            <el-pagination
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page.sync="currentPage"
-              :page-sizes="[5, 10, 20, 50, 100]"
-              :page-size="pageSize"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total">
-            </el-pagination>
-          </div>
-        </el-col>
-      </el-row>
+    <div class="main-content">
+      <el-card>
+        <div slot="header">
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">测试</span>
+            <span class="search">
+            <el-input type="text" size="small" placeholder="根据ID，名称搜索" prefix-icon="el-icon-search" maxlength="60"
+                      v-model="condition" clearable/>
+          </span>
+          </el-row>
+        </div>
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column
+            type="selection"
+            width="55">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="名称"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="description"
+            label="描述"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="projectName"
+            label="所属项目"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            label="创建时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            label="更新时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="150"
+            label="操作">
+            <template slot-scope="scope">
+              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
+              <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-row>
+            <el-col :span="22" :offset="1">
+              <div class="table-page">
+                <el-pagination
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page.sync="currentPage"
+                  :page-sizes="[5, 10, 20, 50, 100]"
+                  :page-size="pageSize"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total">
+                </el-pagination>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
     </div>
   </div>
 </template>
@@ -75,6 +84,7 @@
       return {
         queryPath: "/testplan/list",
         deletePath: "/testplan/delete",
+        condition: "",
         tableData: [],
         multipleSelection: [],
         currentPage: 1,
@@ -155,7 +165,16 @@
 
 <style scoped>
   .testplan-container {
-    background: white;
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
   }
 
   .table-page {
diff --git a/frontend/src/performance/components/testPlan/components/PressureConfig.vue b/frontend/src/performance/components/testPlan/components/PressureConfig.vue
index 828dacda8e..098ba6bda7 100644
--- a/frontend/src/performance/components/testPlan/components/PressureConfig.vue
+++ b/frontend/src/performance/components/testPlan/components/PressureConfig.vue
@@ -1,12 +1,63 @@
-<style>
-
-</style>
-
 <template>
-  <div>
-    我是第二个子组件
-    <el-button @click="testChange()" type="text" size="small">修改TestPlan值</el-button>
-  </div>
+  <el-row>
+    <el-col :span="8">
+      <div>
+        <el-row>
+          <el-col :span="12">
+            <div>
+              并发用户：
+              <el-input
+                type="number"
+                placeholder="请输入线程数"
+                v-model="threadNumber"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div>
+              压测时长：
+              <el-input
+                type="number"
+                placeholder="请输入时长（min）"
+                v-model="duration"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <div>
+            在
+            <div style="width: 80px;">
+              <el-input
+                type="number"
+                v-model="rampUpTime"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+            分钟内，分
+            <div style="width: 80px;">
+              <el-input
+                type="number"
+                v-model="rampUpCount"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+            次增加并发用户
+          </div>
+        </el-row>
+      </div>
+    </el-col>
+    <el-col :span="16">
+      压力预估图
+
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -14,6 +65,10 @@
     name: "TestPlanPressureConfig",
     data() {
       return {
+        threadNumber: 10,
+        duration: 10,
+        rampUpTime: 5,
+        rampUpCount: 2,
       }
     },
     methods: {