diff --git a/src/components/challenges/challenges.vue b/src/components/challenges/challenges.vue
index b54eadf..43472d3 100644
--- a/src/components/challenges/challenges.vue
+++ b/src/components/challenges/challenges.vue
@@ -1,53 +1,107 @@
 <template>
-  <div class="category">
-    <el-container>
-      <el-aside width="200px">
-      <el-menu
-          default-active="2"
-          background-color="#2d3039"
-          text-color="#fff"
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          @close="handleClose"
-      >
-       <el-menu-item index="/challenges/web">
-         <span>WEB</span>
-       </el-menu-item>
-        <el-menu-item index="/challenges/pwn">
-          <span>PWN</span>
-        </el-menu-item>
-        <el-menu-item index="/challenges/misc">
-          <span>MISC</span>
-        </el-menu-item>
-        <el-menu-item index="/challenges/reverse">
-          <span>REVERSE</span>
-        </el-menu-item>
-        <el-menu-item index="/challenges/crypto">
-          <span>CRYPTO</span>
-        </el-menu-item>
-      </el-menu>
-      </el-aside>
-    </el-container>
+  <div class="challenges-all">
+    <div class="category">
+      <el-container>
+        <el-aside width="200px">
+        <el-menu
+            default-active="2"
+            background-color="#2d3039"
+            text-color="#fff"
+            active-text-color="#ffd04b"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            @close="handleClose"
+            @select="handleSelect"
+        >
+         <el-menu-item index="Web">
+           <span>WEB</span>
+         </el-menu-item>
+          <el-menu-item index="Pwn">
+            <span>PWN</span>
+          </el-menu-item>
+          <el-menu-item index="Misc">
+            <span>MISC</span>
+          </el-menu-item>
+          <el-menu-item index="Reverse">
+            <span>REVERSE</span>
+          </el-menu-item>
+          <el-menu-item index="Crypto">
+            <span>CRYPTO</span>
+          </el-menu-item>
+        </el-menu>
+        </el-aside>
+      </el-container>
+    </div>
 
+    <div class="all-card">
+<!--      <div v-for="(c,index) in data" class="card" @click="clickcard(index)" ref="card" :key="index" >-->
+<!--        <div class="card-name">-->
+<!--          {{c.name}}-->
+<!--        </div>-->
+<!--        <div class="card-score">-->
+<!--          {{c.score}}-->
+<!--          {{c.description}}-->
+<!--        </div>-->
+<!--      </div>-->
+
+    </div>
   </div>
+
 </template>
 
-<script lang="ts" setup>
+<script>
 import {
   Document,
   Menu as IconMenu,
   Location,
   Setting,
 } from '@element-plus/icons-vue'
+import axios from "axios";
 
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
+export default {
+  data() {
+    return {
+      challengetype: '',
+      data:[],
+    }
+  },
+  methods: {
+    clickcard(index){
+      console.log(this.$refs.card[index].style.backgroundColor="#fff");
+    },
+    handleSelect(index) {
+      this.challengetype = index;
+      axios.get("/api/v1/user/challenges/" + index).then(res => {
+        if (res.data.code === 200) {
+          console.log(res.data)
+          this.data = res.data.data;
+        }
+      })
+    },
+  }
 }
+
+
 </script>
-<style>
 
+<style lang="less">
+.challenges-all{
+  display: flex;
+  .all-card{
+    width: 10%;
+    .card{
+      display: inline-block;
+      width: 100%;
+      height: 50px;
+      background-color: #ff7f00;
+      border-radius: 10px;
+      box-shadow: #9e4f00 0px 0px 10px;
+      margin-left: 10px;
+      margin-bottom: 30px;
+      margin-right:10px ;
+    }
+  }
+
+}
 
 </style>
\ No newline at end of file
diff --git a/src/components/challenges/scorecard.vue b/src/components/challenges/scorecard.vue
index 11e2155..b4d43ce 100644
--- a/src/components/challenges/scorecard.vue
+++ b/src/components/challenges/scorecard.vue
@@ -43,7 +43,6 @@ export default {
 <style lang="less">
 
 
-
 .scorecard{
   height: 100%;
   width: 100%;
diff --git a/src/router/index.js b/src/router/index.js
index 437c0ee..e60728a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,7 @@ const router = createRouter({
             path:'/scoreboard',
             name:'Scoreboard',
             component: Scoreboard,
+
         }
     ]
 })