diff --git a/src/assets/collapse.png b/src/assets/collapse.png
new file mode 100644
index 0000000..3ab1687
Binary files /dev/null and b/src/assets/collapse.png differ
diff --git a/src/components/MessageCloud.vue b/src/components/MessageCloud.vue
index f5918ad..2602a28 100644
--- a/src/components/MessageCloud.vue
+++ b/src/components/MessageCloud.vue
@@ -30,7 +30,8 @@ async function letsgo(place: string) {
   <MessagePaper>
     <div class="message-header">
       {{ props.action.place }}: {{ props.action.name }}
-      <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
+      <span v-if="props.action.isOpen" class="collapse-icon collapse-icon-up" @click="clickCollapse"></span>
+      <span v-else class="collapse-icon" @click="clickCollapse"></span>
     </div>
     <div v-show="props.action.isOpen">
       <hr class="hr" />
@@ -71,9 +72,19 @@ async function letsgo(place: string) {
 }
 
 .collapse-icon {
-  float: right;
-  padding: 0 15px;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  width: 45px;
+  height: 32px;
   cursor: pointer;
+  background-image: url("@/assets/collapse.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.collapse-icon-up {
+  transform: rotate(-180deg);
 }
 
 .message-content {