diff --git a/src/assets/images/icon-zoom-in.svg b/src/assets/images/icon-zoom-in.svg
new file mode 100644
index 0000000..79d15f1
--- /dev/null
+++ b/src/assets/images/icon-zoom-in.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7273 31.7273C16.7273 32.9825 17.7448 34 19 34C20.2552 34 21.2727 32.9825 21.2727 31.7273V21.2727H31.7273C32.9825 21.2727 34 20.2552 34 19C34 17.7448 32.9825 16.7273 31.7273 16.7273H21.2727V6.27272C21.2727 5.01753 20.2552 4 19 4C17.7448 4 16.7273 5.01753 16.7273 6.27272V16.7273H6.27273C5.01753 16.7273 4 17.7448 4 19C4 20.2552 5.01753 21.2727 6.27273 21.2727H16.7273V31.7273Z" fill="#71DFFC"/>
+<path d="M21.2727 21.2727V20.7727H20.7727V21.2727H21.2727ZM21.2727 16.7273H20.7727V17.2273H21.2727V16.7273ZM16.7273 16.7273V17.2273H17.2273V16.7273H16.7273ZM16.7273 21.2727H17.2273V20.7727H16.7273V21.2727ZM19 33.5C18.0209 33.5 17.2273 32.7063 17.2273 31.7273H16.2273C16.2273 33.2586 17.4687 34.5 19 34.5V33.5ZM20.7727 31.7273C20.7727 32.7063 19.9791 33.5 19 33.5V34.5C20.5313 34.5 21.7727 33.2586 21.7727 31.7273H20.7727ZM20.7727 21.2727V31.7273H21.7727V21.2727H20.7727ZM31.7273 20.7727H21.2727V21.7727H31.7273V20.7727ZM33.5 19C33.5 19.9791 32.7063 20.7727 31.7273 20.7727V21.7727C33.2586 21.7727 34.5 20.5313 34.5 19H33.5ZM31.7273 17.2273C32.7063 17.2273 33.5 18.0209 33.5 19H34.5C34.5 17.4687 33.2586 16.2273 31.7273 16.2273V17.2273ZM21.2727 17.2273H31.7273V16.2273H21.2727V17.2273ZM20.7727 6.27272V16.7273H21.7727V6.27272H20.7727ZM19 4.5C19.979 4.5 20.7727 5.29368 20.7727 6.27272H21.7727C21.7727 4.74139 20.5313 3.5 19 3.5V4.5ZM17.2273 6.27272C17.2273 5.29368 18.0209 4.5 19 4.5V3.5C17.4687 3.5 16.2273 4.74139 16.2273 6.27272H17.2273ZM17.2273 16.7273V6.27272H16.2273V16.7273H17.2273ZM6.27273 17.2273H16.7273V16.2273H6.27273V17.2273ZM4.5 19C4.5 18.0209 5.29368 17.2273 6.27273 17.2273V16.2273C4.74139 16.2273 3.5 17.4687 3.5 19H4.5ZM6.27273 20.7727C5.29368 20.7727 4.5 19.9791 4.5 19H3.5C3.5 20.5313 4.74139 21.7727 6.27273 21.7727V20.7727ZM16.7273 20.7727H6.27273V21.7727H16.7273V20.7727ZM17.2273 31.7273V21.2727H16.2273V31.7273H17.2273Z" fill="#27B8E0"/>
+</svg>
diff --git a/src/assets/images/icon-zoom-out.svg b/src/assets/images/icon-zoom-out.svg
new file mode 100644
index 0000000..3e7b350
--- /dev/null
+++ b/src/assets/images/icon-zoom-out.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 19C4 17.7448 5.01753 16.7273 6.27273 16.7273H31.7273C32.9825 16.7273 34 17.7448 34 19C34 20.2552 32.9825 21.2727 31.7273 21.2727H6.27273C5.01753 21.2727 4 20.2552 4 19Z" fill="#71DFFC"/>
+<path d="M6.27273 16.2273C4.74139 16.2273 3.5 17.4687 3.5 19H4.5C4.5 18.0209 5.29368 17.2273 6.27273 17.2273V16.2273ZM31.7273 16.2273H6.27273V17.2273H31.7273V16.2273ZM34.5 19C34.5 17.4687 33.2586 16.2273 31.7273 16.2273V17.2273C32.7063 17.2273 33.5 18.0209 33.5 19H34.5ZM31.7273 21.7727C33.2586 21.7727 34.5 20.5313 34.5 19H33.5C33.5 19.979 32.7063 20.7727 31.7273 20.7727V21.7727ZM6.27273 21.7727H31.7273V20.7727H6.27273V21.7727ZM3.5 19C3.5 20.5313 4.74139 21.7727 6.27273 21.7727V20.7727C5.29368 20.7727 4.5 19.979 4.5 19H3.5Z" fill="#27B8E0"/>
+</svg>
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 44bf958..6168660 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -446,17 +446,13 @@ const handleZoomOut = () => {
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
         @click="handleZoomIn"
       >
-        <div class="h-[38px] w-[38px] flex items-center justify-center">
-          +
-        </div>
+        <div class="zoom-in h-[38px] w-[38px]"></div>
       </div>
       <div
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
         @click="handleZoomOut"
       >
-        <div class="h-[38px] w-[38px] flex items-center justify-center">
-          -
-        </div>
+        <div class="zoom-out h-[38px] w-[38px]"></div>
       </div>
       <div
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
@@ -608,6 +604,18 @@ const handleZoomOut = () => {
   background-position: center;
 }
 
+.zoom-in {
+  background-image: url('@/assets/images/icon-zoom-in.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.zoom-out {
+  background-image: url('@/assets/images/icon-zoom-out.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .score-yellow {
   background: #ffc23b;
   border: 3px solid #fff7ae;