diff --git a/src/components/Letter.vue b/src/components/Letter.vue
index a05b06f..512adfe 100644
--- a/src/components/Letter.vue
+++ b/src/components/Letter.vue
@@ -1,16 +1,20 @@
 <template>
   <RouterLink
     :to="link"
-    class="h-[18rem] w-[22rem] block rounded-lg pt-[6rem] group overflow-hidden last:mr-auto"
+    class="h-[18rem] w-[20rem] block rounded-lg pt-[6rem] group overflow-hidden last:mr-auto"
   >
     <div class="w-full h-[12rem] relative isolate bg-primary-900">
-      <div class="group-hover:hidden w-full h-[2rem] absolute top-0 bg-primary-700"></div>
-      <div class="group-hover:hidden absolute top-[2rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[4rem] border-t-primary-700"></div>
-      <div class="group-hover:hidden z-[-1] w-full h-[2rem] top-[0.1rem] absolute top-0 bg-[#FFF]"></div>
-      <div class="group-hover:hidden z-[-1] absolute top-[2.1rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[4rem] border-t-[#FFF]"></div>
       <div class="absolute bottom-4 right-3 text-xl font-bold text-white">FROM {{ name }}</div>
+
+      <!-- letter closed -->
+      <div class="group-hover:hidden w-full h-[2rem] absolute top-0 bg-primary-700"></div>
+      <div class="group-hover:hidden absolute top-[2rem] w-0 h-0 border-[#0000] border-x-[10rem] border-y-[4rem] border-t-primary-700"></div>
+      <div class="group-hover:hidden z-[-1] w-full h-[2rem] absolute top-0 bg-[#FFF]"></div>
+      <div class="group-hover:hidden z-[-1] absolute top-[2.1rem] w-0 h-0 border-[#0000] border-x-[10rem] border-y-[4rem] border-t-[#FFF]"></div>
+
+      <!-- letter opened animation -->
       <div class="hidden group-hover:block absolute top-[-12rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[6rem] border-b-primary-900"></div>
-      <div class="hidden group-hover:block absolute w-[20rem] h-[6rem] bg-[#FFF] top-[-3rem] left-[1rem] border-primary-900 border-[0.1rem] rounded-t">
+      <div class="hidden group-hover:block absolute w-[18rem] h-[6rem] bg-[#FFF] top-[-3rem] left-[1rem] border-primary-900 border-[0.1rem] rounded-t">
         <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[1.5rem] bg-[#CCC]"></div>
         <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[3rem] bg-[#CCC]"></div>
         <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[4.5rem] bg-[#CCC]"></div>
diff --git a/src/views/forum/LetterToHighSchoolStudents.vue b/src/views/forum/LetterToHighSchoolStudents.vue
index 593f3d5..797e09a 100644
--- a/src/views/forum/LetterToHighSchoolStudents.vue
+++ b/src/views/forum/LetterToHighSchoolStudents.vue
@@ -29,13 +29,22 @@
 import Breadcrumb from '@/components/Breadcrumb.vue';
 import Letter from '@/components/Letter.vue';
 import letterToHighSchoolStudents from '@/data/letterToHighSchoolStudents.json';
+import { ref, watchEffect } from 'vue';
 
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const data = letterToHighSchoolStudents.find(
-  v => v.id == route.params.letter
-);
+const data = ref({}); // 使用 ref 來保持響應式數據
 
+// 使用 watchEffect 來監聽路由參數的變化
+watchEffect(() => {
+  const letterId = route.params.letter;
+  if (letterId) {
+    const foundData = letterToHighSchoolStudents.find(v => v.id == letterId);
+    if (foundData) {
+      data.value = foundData;
+    }
+  }
+});
 </script>
\ No newline at end of file