diff --git a/front/src/assets/capacitySquare/webfont.ttf b/front/src/assets/capacitySquare/webfont.ttf
new file mode 100644
index 00000000..5fafbad6
Binary files /dev/null and b/front/src/assets/capacitySquare/webfont.ttf differ
diff --git a/front/src/views/capacitySquare/components/algorithm.vue b/front/src/views/capacitySquare/components/algorithm.vue
index 3b9aaa07..4d0ebf76 100644
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@@ -7,7 +7,7 @@
         :key="`algorithm-${index}`"
         class="algorithm-card"
       >
-        {{ item.name }}
+        <div class="algorithm-card-title">{{ item.name }}</div>
       </div>
     </div>
   </div>
@@ -66,9 +66,18 @@
       .algorithm-card {
         height: 2.75rem;
         width: 5.25rem;
-        background: url('~@/assets/capacitySquare/algorithm-bg.png');
+        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
+        background-size: 100%;
         margin-bottom: 0.3rem;
         margin-right: 0.65rem;
+        position: relative;
+        .algorithm-card-title {
+          position: absolute;
+          height: 0.6rem;
+          width: 100%;
+          color: #ffffff;
+          font-size: 0.22rem;
+        }
       }
     }
     .algorithm-class::-webkit-scrollbar-track-piece {