diff --git a/src/components/challenges/scorecard.vue b/src/components/challenges/scorecard.vue
index 81f8666..11e2155 100644
--- a/src/components/challenges/scorecard.vue
+++ b/src/components/challenges/scorecard.vue
@@ -1,14 +1,19 @@
 <template>
   <el-row class="row-bg" justify="center">
     <el-col :span="6">
-      <el-card shadow="always" class="scorecard">
+
+        <div class="scorecard">
         <div class="left">
           <h1>RANK</h1>
-
-
+          <p>{{rank}}</p>
+        </div>
+        <div class="right">
+          <div class="score">
+            <h1>SCORE</h1>
+            <p>{{score}}</p>
+          </div>
+        </div>
         </div>
-
-      </el-card>
     </el-col>
   </el-row>
 </template>
@@ -17,10 +22,57 @@
 import axios from "axios";
 
 export default {
+  data() {
+    return {
+      score: 0,
+      rank: 0,
+    };
+  },
+  mounted(){
+    axios.get("/api/v1/user/score/self").then(res => {
+      if (res.data.code === 200) {
+        this.score = res.data.data.score;
+        this.rank = res.data.data.rank;
+      }
+    })
+  }
 
 }
 </script>
 
 <style lang="less">
 
+
+
+.scorecard{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content:center;
+  background-color: #ff7f00;
+  border-radius: 10px;
+  box-shadow: #9e4f00 0px 0px 10px;
+
+  .left{
+    margin: 0 20px;
+    display:inline-block;
+    text-align: center;
+    //background-color: #42b983;
+  }
+  .right{
+    margin: 0 20px;
+    display:inline-block;
+    text-align: center;
+    //background-color: #42b983;
+  }
+  h1{
+    color: white;
+  }
+  p{
+    font-size: x-large;
+    color: white;
+  }
+
+}
+
 </style>
\ No newline at end of file