diff --git a/src/components/challenges/challenges.vue b/src/components/challenges/challenges.vue
new file mode 100644
index 0000000..b54eadf
--- /dev/null
+++ b/src/components/challenges/challenges.vue
@@ -0,0 +1,53 @@
+<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>
+</template>
+
+<script lang="ts" setup>
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+<style>
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/challenges/scorecard.vue b/src/components/challenges/scorecard.vue
new file mode 100644
index 0000000..81f8666
--- /dev/null
+++ b/src/components/challenges/scorecard.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="6">
+      <el-card shadow="always" class="scorecard">
+        <div class="left">
+          <h1>RANK</h1>
+
+
+        </div>
+
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+
+}
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6b24eb8..437c0ee 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/Login.vue'
+import Challenge from '../views/Challenges.vue'
+import Scoreboard from '../views/Scoreboard.vue'
 
 const routerHistory = createWebHistory()
 const router = createRouter({
@@ -18,7 +20,16 @@ const router = createRouter({
             path:'/login',
             name:'Login',
             component: Login,
-
+        },
+        {
+            path:'/challenges',
+            name:'Challenges',
+            component: Challenge,
+        },
+        {
+            path:'/scoreboard',
+            name:'Scoreboard',
+            component: Scoreboard,
         }
     ]
 })
diff --git a/src/views/Challenges.vue b/src/views/Challenges.vue
new file mode 100644
index 0000000..24fe1e2
--- /dev/null
+++ b/src/views/Challenges.vue
@@ -0,0 +1,17 @@
+<template>
+  <Navbar></Navbar>
+  <scoreboard></scoreboard>
+  <challenges></challenges>
+</template>
+<script>
+import Navbar from '../components/Navbar.vue'
+import Challenges from '../components/challenges/challenges.vue'
+import Scoreboard from "../components/challenges/scorecard.vue";
+export default {
+    components: {
+      Scoreboard,
+        Navbar,Challenges
+    }
+}
+
+</script>
\ No newline at end of file
diff --git a/src/views/Scoreboard.vue b/src/views/Scoreboard.vue
new file mode 100644
index 0000000..b62c578
--- /dev/null
+++ b/src/views/Scoreboard.vue
@@ -0,0 +1,11 @@
+<template>
+  <Navbar></Navbar>
+</template>
+<script>
+  import Navbar from '../components/Navbar.vue'
+  export default {
+    components: {
+      Navbar
+    }
+  }
+</script>
\ No newline at end of file