diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 1afba85..22efcbc 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -29,6 +29,8 @@ jobs:
         mkdir deploy
         cp index.html deploy/
         cp tocas.min.css deploy/
+        mkdir deploy/fonts
+        cp fonts/* deploy/fonts/
 
     - name: Deploy to GitHub Pages
       uses: peaceiris/actions-gh-pages@v3
diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot
new file mode 100644
index 0000000..82e42a0
Binary files /dev/null and b/fonts/icomoon.eot differ
diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg
new file mode 100644
index 0000000..f6cfb53
--- /dev/null
+++ b/fonts/icomoon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="trophy" horiz-adv-x="951" d="M261.714 446.286c-24 52.571-42.286 122.286-42.286 212h-146.286v-54.857c0-56 76-133.714 188.571-157.143zM877.714 603.428v54.857h-146.286c0-89.714-18.286-159.429-42.286-212 112.571 23.429 188.571 101.143 188.571 157.143zM950.857 676.571v-73.143c0-108.571-131.429-228.571-309.714-237.143-22.857-29.143-44-46.286-54.286-54.286-30.286-27.429-38.286-56-38.286-92.571s18.286-73.143 73.143-73.143 109.714-36.571 109.714-91.429v-36.571c0-10.286-8-18.286-18.286-18.286h-475.429c-10.286 0-18.286 8-18.286 18.286v36.571c0 54.857 54.857 91.429 109.714 91.429s73.143 36.571 73.143 73.143-8 65.143-38.286 92.571c-10.286 8-31.429 25.143-54.286 54.286-178.286 8.571-309.714 128.571-309.714 237.143v73.143c0 30.286 24.571 54.857 54.857 54.857h164.571v54.857c0 50.286 41.143 91.429 91.429 91.429h329.143c50.286 0 91.429-41.143 91.429-91.429v-54.857h164.571c30.286 0 54.857-24.571 54.857-54.857z" />
+<glyph unicode="&#xe901;" glyph-name="check-circle" horiz-adv-x="878" d="M733.714 531.428c0 9.714-3.429 19.429-10.286 26.286l-52 51.429c-6.857 6.857-16 10.857-25.714 10.857s-18.857-4-25.714-10.857l-233.143-232.571-129.143 129.143c-6.857 6.857-16 10.857-25.714 10.857s-18.857-4-25.714-10.857l-52-51.429c-6.857-6.857-10.286-16.571-10.286-26.286s3.429-18.857 10.286-25.714l206.857-206.857c6.857-6.857 16.571-10.857 25.714-10.857 9.714 0 19.429 4 26.286 10.857l310.286 310.286c6.857 6.857 10.286 16 10.286 25.714zM877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf
new file mode 100644
index 0000000..859173d
Binary files /dev/null and b/fonts/icomoon.ttf differ
diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff
new file mode 100644
index 0000000..647dff1
Binary files /dev/null and b/fonts/icomoon.woff differ
diff --git a/index.ejs b/index.ejs
index 1bec549..6b001da 100644
--- a/index.ejs
+++ b/index.ejs
@@ -7,6 +7,37 @@
 	<meta name="description" content="Henry 距離海底撈黑海會員還需要多少積分呢？">
 	<link rel="stylesheet" href="tocas.min.css" />
 	<style>
+		@font-face {
+			font-family: 'icomoon';
+			src: url('fonts/icomoon.eot?6smp2p');
+			src: url('fonts/icomoon.eot?6smp2p#iefix') format('embedded-opentype'),
+				url('fonts/icomoon.ttf?6smp2p') format('truetype'),
+				url('fonts/icomoon.woff?6smp2p') format('woff'),
+				url('fonts/icomoon.svg?6smp2p#icomoon') format('svg');
+			font-weight: normal;
+			font-style: normal;
+			font-display: block;
+		}
+
+		[class^="icon-"], [class*=" icon-"] {
+			font-family: 'icomoon' !important;
+			speak: never;
+			font-style: normal;
+			font-weight: normal;
+			font-variant: normal;
+			text-transform: none;
+			line-height: 1;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+
+		.icon-trophy:before {
+			content: "\e900";
+		}
+		.icon-check-circle:before {
+			content: "\e901";
+		}
+
 		.progress-levels {
 			text-align: right;
 			line-height: 1rem;
@@ -28,6 +59,16 @@
 			color: var(--ts-gray-500);
 			padding-left: 1rem;
 		}
+
+		.icon-trophy {
+			position: absolute;
+			bottom: -1rem;
+			right: -1rem;
+			font-size: 6rem;
+			z-index: 0;
+			opacity: .1;
+			overflow: hidden;
+		}
 	</style>
 </head>
 <body>
@@ -42,16 +83,11 @@
 				</div>
 				<div class="ts-grid progress-levels">
 					<% levels.forEach((level, index) => { %>
-						<div class="column <%= index === levels.length - 1 ? 'is-fluid' : '' %>"
-							<% if (index !== levels.length - 1) { %>
-								style="width: <%= (level.addPoint / target) * 100 %>%"
-							<% } %>>
+						<div class="column <%= index === levels.length - 1 ? 'is-fluid' : '' %>" <% if (index !== levels.length - 1) { %> style="width: <%= (level.addPoint / target) * 100 %>%" <% } %>>
 							<%= level.name %>
 							<small>
 								<%= level.point.toLocaleString() %>
-								<% if (level.point <= totalPoint) { %>
-									<span class="ts-icon is-circle-check-icon"></span>
-								<% } %>
+								<% if (level.point <= totalPoint) { %> <span class="icon-check-circle"></span> <% } %>
 							</small>
 						</div>
 					<% }) %>
@@ -64,7 +100,7 @@
 						<small>( $ <%= ((target - totalPoint) * 5).toLocaleString() %> )</small>
 					</div>
 				</div>
-				<div class="symbol"><span class="ts-icon is-trophy-icon"></span></div>
+				<span class="icon-trophy"></span>
 			</div>
 			<div class="ts-box">
 				<table class="ts-table is-small">