diff --git a/index.html b/index.html
index a9c4613..a17a652 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="stylesheet" href="src/index.css">
     <title>Roller-课堂点名</title>
   </head>
   <body>
diff --git a/package-lock.json b/package-lock.json
index a65611c..ca04c37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "roller",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "element-plus": "^2.8.3",
         "vue": "^3.4.37"
       },
diff --git a/package.json b/package.json
index 12d3589..0345e51 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.8.3",
     "vue": "^3.4.37"
   },
diff --git a/src/App.vue b/src/App.vue
index 171bb00..9efaaef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,11 @@
 <script setup>
+import ScoreBoard from "./score-board.vue";
+import ResultBoard from "./result-board.vue";
 </script>
 
 <template>
-
+  <result-board></result-board>
+  <score-board></score-board>
 </template>
 
 <style scoped>
diff --git a/src/assets/fonts/Itim-Regular.ttf b/src/assets/fonts/Itim-Regular.ttf
new file mode 100644
index 0000000..153aaeb
Binary files /dev/null and b/src/assets/fonts/Itim-Regular.ttf differ
diff --git a/src/assets/fonts/Kalam-Regular.ttf b/src/assets/fonts/Kalam-Regular.ttf
new file mode 100644
index 0000000..2c4b795
Binary files /dev/null and b/src/assets/fonts/Kalam-Regular.ttf differ
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..3eb4a3b
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+html{
+    background-color: #91A3B4;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 316f691..b8d6210 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,8 +2,12 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 
 const app = createApp(App)
 app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 app.mount('#app')
diff --git a/src/result-board.vue b/src/result-board.vue
new file mode 100644
index 0000000..1a0abe3
--- /dev/null
+++ b/src/result-board.vue
@@ -0,0 +1,59 @@
+<script setup>
+import {ref} from "vue";
+const result = ref(0)
+</script>
+
+<template>
+  <el-container class="result-board-container">
+    <el-header class="special-header">
+      <label class="special-event">special event !</label>
+    </el-header>
+    <el-main class="number-container">
+      <label class="number">13</label>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped>
+@font-face {
+  font-family: Itim;
+  src: url("src/assets/fonts/Itim-Regular.ttf");
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+.result-board-container {
+  width: 456px;
+  height: 338px;
+  background-color: #B4BEC8;
+  border-radius: 10px;
+}
+.special-header {
+  height: 80px;
+}
+.special-event {
+  text-align: center;
+  display: block;
+  font-size: 42px;
+  width: 329px;
+  height: 56px;
+  background-color: #E3F32880;
+  color: #251515;
+  border-radius: 50px;
+  margin-left: 60px;
+  margin-top: 20px;
+  font-family: Itim,serif;
+}
+.number-container {
+  padding: 0 0 10px 0;
+}
+.number {
+  font-size: 140px;
+  padding: 0 0 30px 0;
+  text-align: center;
+  display: block;
+  font-family: Itim,serif;
+  color: #1D2D5F;
+}
+</style>
\ No newline at end of file
diff --git a/src/score-board.vue b/src/score-board.vue
new file mode 100644
index 0000000..51508d1
--- /dev/null
+++ b/src/score-board.vue
@@ -0,0 +1,58 @@
+<script setup>
+const buttonColor = ref({
+  background: '#ffffff'
+})
+const tag = ref(0)
+function clicked(num)
+{
+  tag.value=num
+  buttonColor.value.background = '#48653A'
+}
+</script>
+
+<template>
+  <el-container class="score-board-container">
+      <label class="score-label">s<br>c<br>o<br>r<br>e</label>
+    <el-main class="el-main" direction="vertical">
+      <el-button class="button" @click="clicked(4)" :style="tag > 3? buttonColor: ''"></el-button>
+      <el-button class="button" @click="clicked(3)" :style="tag > 2? buttonColor: ''"></el-button>
+      <el-button class="button" @click="clicked(2)" :style="tag > 1? buttonColor: ''"></el-button>
+      <el-button class="button" @click="clicked(1)" :style="tag > 0? buttonColor: ''"></el-button>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped>
+.score-board-container {
+  width: 161px;
+  height: 280px;
+  background-color: #3D3B3580;
+  border-radius: 30px;
+  padding: 0 0 0 20px;
+}
+.el-main{
+  align-content: center;
+  padding: 0 0 0 20px;
+}
+.score-label {
+  width: 150px;
+  height: 221px;
+  font-size: 40px;
+  background-color: #BEAB8F;
+  border-radius: 50px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 40px;
+  color: #251515;
+  font-family: Itim,serif;
+}
+.button{
+  height: 44px;
+  width: 44px;
+  background-color: #D9D9D9;
+  border: 3px solid #000000;
+  border-radius: 50%;
+  margin: 8px;
+}
+</style>
\ No newline at end of file
