diff --git a/frontend/src/business/components/api/report/ApiReportList.vue b/frontend/src/business/components/api/report/ApiReportList.vue
index d2d1fdfba7..3331825e8b 100644
--- a/frontend/src/business/components/api/report/ApiReportList.vue
+++ b/frontend/src/business/components/api/report/ApiReportList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container" v-loading="result.loading">
-    <div class="main-content">
-      <el-card class="table-card">
+  <ms-container>
+    <ms-main-container>
+      <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="search" :title="$t('commons.test')"
                            :show-create="false"/>
@@ -76,16 +76,18 @@
         <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
-    </div>
-  </div>
+    </ms-main-container>
+  </ms-container>
 </template>
 
 <script>
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
-    components: {MsTableHeader, MsTablePagination},
+    components: {MsMainContainer, MsContainer, MsTableHeader, MsTablePagination},
     data() {
       return {
         result: {},
diff --git a/frontend/src/business/components/api/test/ApiTestList.vue b/frontend/src/business/components/api/test/ApiTestList.vue
index bbd3ab8788..863e8170b5 100644
--- a/frontend/src/business/components/api/test/ApiTestList.vue
+++ b/frontend/src/business/components/api/test/ApiTestList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container" v-loading="result.loading">
-    <div class="main-content">
-      <el-card class="table-card">
+  <ms-container>
+    <ms-main-container>
+      <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="search" :title="$t('commons.test')"
                            @create="create" :createTip="$t('load_test.create')"/>
@@ -81,17 +81,19 @@
         <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
-    </div>
-  </div>
+    </ms-main-container>
+  </ms-container>
 </template>
 
 <script>
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
-    components: {MsTableHeader, MsTablePagination, MsTableOperator},
+    components: {MsMainContainer, MsContainer, MsTableHeader, MsTablePagination, MsTableOperator},
     data() {
       return {
         result: {},