diff --git a/src/components/admin/challagne/chal.vue b/src/components/admin/challagne/chal.vue
new file mode 100644
index 0000000..69e1bf9
--- /dev/null
+++ b/src/components/admin/challagne/chal.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="20">
+      <el-table :data="data" row-key="id" style="width: 100%">
+        <el-table-column label="id" prop="id" column-key="id"/>
+        <el-table-column label="名称" prop="name"/>
+        <el-table-column label="分类" prop="category" :filters="getfilterCategory()" :filter-method="filterCategory"/>
+        <el-table-column label="flag" prop="flag"/>
+        <el-table-column label="分数" prop="score"/>
+        <el-table-column label="是否可见" prop="visible"
+        :filters="[
+            {text:'可见',value:1},
+            {text:'不可见',value:0},
+        ]"
+        :filter-method="filterVisible"
+        />
+        <el-table-column fixed="right" label="Operations" width="200">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
+            >编辑</el-button>
+            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from "axios";
+
+export default{
+  data(){
+    return{
+      data:[],
+    }
+  },
+  mounted(){
+    axios.get('/api/v1/admin/challenges').then(res => {
+      if (res.data.code === 200) {
+        this.data = res.data.data;
+      }
+    })
+  },
+  methods:{
+    // 通过请求分类api获取分类数据
+    getfilterCategory() {
+      let apiArr=[
+        { text: "Misc", value: "Misc" },
+        { text: "Web", value: "Web" },
+        { text: "Pwn", value: "Pwn" },
+        { text: "Crypto", value: "Crypto" },
+        { text: "Reverse", value: "Reverse" },
+      ]
+      return apiArr
+    },
+    //分类筛选
+    filterCategory(value, row) {
+      return row.category === value;
+    },
+    //是否可见筛选
+    filterVisible(value, row) {
+      return row.visible === value;
+    },
+
+    handleClick(row){
+
+      axios.delete('/api/v1/admin/challenge/'+row.id).then(res => {
+        if (res.data.code === 200) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+          this.data.splice(this.data.indexOf(row),1);
+        }
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/components/admin/notification.vue b/src/components/admin/notification.vue
index cf7dd1f..d092f58 100644
--- a/src/components/admin/notification.vue
+++ b/src/components/admin/notification.vue
@@ -71,10 +71,9 @@ export default {
       axios.post('/api/v1/admin/notice',this.formData).then(res => {
         if (res.data.code === 200) {
           this.dialogTableVisible = false;
-          ElNotification.success({
-            title: '成功',
+          this.$message({
             message: '添加成功',
-            duration: 2000
+            type: 'success'
           });
           window.location.reload()
         }
@@ -84,10 +83,9 @@ export default {
       axios.delete('/api/v1/admin/notice/'+row.id).then(res => {
         if (res.data.code === 200) {
           this.data.splice(this.data.indexOf(row),1);
-          ElNotification.success({
-            title: '成功',
+          this.$message({
             message: '删除成功',
-            duration: 2000
+            type: 'success'
           });
         }
       })
diff --git a/src/router/index.js b/src/router/index.js
index 5ccd34b..3bd1fb9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -62,8 +62,14 @@ const router = createRouter({
                     path:'notification',
                     name:'AdminNotification',
                     component : () => import('../views/admin/AdminNotice.vue'),
+                },
+                {
+                    path:'challenges',
+                    name:'AdminChallenges',
+                    component: ()=> import('../views/admin/AdminChal.vue'),
                 }
             ]
+
         },
         {
             path:'/404',
diff --git a/src/views/admin/AdminChal.vue b/src/views/admin/AdminChal.vue
new file mode 100644
index 0000000..d476f2d
--- /dev/null
+++ b/src/views/admin/AdminChal.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminChal></AdminChal>
+</template>
+
+<script>
+import AdminChal from '../../components/admin/challagne/chal.vue'
+export default {
+  components: {
+    AdminChal
+  }
+}
+</script>