diff --git a/src/components/EditOption.vue b/src/components/EditOption.vue
index b7754ab..e489bfc 100644
--- a/src/components/EditOption.vue
+++ b/src/components/EditOption.vue
@@ -27,7 +27,7 @@ const props = defineProps({
     default: "",
   },
 });
-const itemTexts = ["Bow Type", "Distance", "Target Type", "Sets/Arrows"];
+const itemTexts = ["Bow Type", "Distance", "Target Type", "set/Arrows"];
 const distances = [5, 8, 10, 18, 25, 30, 50, 60, 70];
 const groupArrows = [3, 6, 12, 18];
 
@@ -120,7 +120,7 @@ onMounted(async () => {
     loadConfig();
   } else {
     const config = await getPointBookConfigAPI();
-    uni.setStorageSync("point-book-config", config);
+    uni.settorageSync("point-book-config", config);
     loadConfig();
   }
 });
@@ -136,7 +136,7 @@ onMounted(async () => {
   >
     <view @click="() => onExpand(itemIndex, !expand)">
       <text :style="{ opacity: expand ? 1 : 0 }">{{ 
-        itemIndex !== 3 ? itemTexts[itemIndex] : "Select Sets"
+        itemIndex !== 3 ? itemTexts[itemIndex] : "Select set"
       }}</text>
       <block>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{ 
@@ -150,7 +150,7 @@ onMounted(async () => {
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{ 
           selectedIndex !== -1 && secondSelectIndex !== -1
-            ? `${selectedIndex}sets/${groupArrows[secondSelectIndex]}arrows`
+            ? `${selectedIndex} set / ${groupArrows[secondSelectIndex]} arrows`
             : itemTexts[itemIndex]
         }}</text>
       </block>
@@ -227,7 +227,7 @@ onMounted(async () => {
           @click="onSelectItem(i)"
         >
           <text>{{ i }}</text>
-          <text>sets</text>
+          <text>set</text>
         </view>
       </view>
       <view
@@ -330,7 +330,7 @@ onMounted(async () => {
 }
 .distance-items > view > text:first-child,
 .amount-items > view > text:first-child {
-  width: 25px;
+  margin-right: 10rpx;
   display: block;
   text-align: center;
 }
diff --git a/src/pages/point-book-detail.vue b/src/pages/point-book-detail.vue
index 8dde86f..87671ca 100644
--- a/src/pages/point-book-detail.vue
+++ b/src/pages/point-book-detail.vue
@@ -12,11 +12,14 @@ import { getPointBookDetailAPI } from "@/apis";
 const selectedIndex = ref(0);
 const showTip = ref(false);
 const showTip2 = ref(false);
+const showTip3 = ref(false);
 const groups = ref([]);
 const data = ref({});
 const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
+const notes = ref("");
+const draftNotes = ref("");
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
@@ -26,6 +29,13 @@ const openTip = (index) => {
 const closeTip = () => {
   showTip.value = false;
   showTip2.value = false;
+  showTip3.value = false;
+};
+
+const saveNote = () => {
+  notes.value = draftNotes.value;
+  draftNotes.value = "";
+  showTip3.value = false;
 };
 
 const onSelect = (index) => {
@@ -121,7 +131,7 @@ onLoad(async (options) => {
           <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
         </view>
         <view>
-          <view>10 Rings</view>
+          <view>Gold Rings</view>
           <text>{{ data.tenRings }}</text>
         </view>
         <view>
@@ -132,6 +142,14 @@ onLoad(async (options) => {
           <view>Total Rings</view>
           <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
+        <view class="add-notes">
+          <button class="note-btn" @click="showTip3 = true">
+            <image
+              :src="`../static/${notes ? 'has-note' : 'add-grey'}.png`"
+              mode="widthFix"
+            />
+          </button>
+        </view>
       </view>
       <view class="title-bar">
         <view />
@@ -155,18 +173,22 @@ onLoad(async (options) => {
       <view :style="{ transform: 'translateY(-90rpx)' }">
         <view class="title-bar">
           <view />
-          <text>Ring Value Distribution</text>
+          <text>Score Distribution</text>
         </view>
         <view :style="{ padding: '0 30rpx' }">
           <RingBarChart :data="ringRates" />
         </view>
         <view class="title-bar" :style="{ marginTop: '30rpx' }">
           <view />
-          <text>{{ selectedIndex === 0 ? "Rings per Set" : `Set ${selectedIndex} Rings` }}</text>
+          <text>{{
+            selectedIndex === 0 ? "Rings per Set" : `Set ${selectedIndex} Rings`
+          }}</text>
         </view>
         <view class="ring-text-groups">
           <view v-for="(item, index) in groups" :key="index">
-            <text v-if="selectedIndex === 0 && index !== 0">{{ `Set${index}` }}</text>
+            <text v-if="selectedIndex === 0 && index !== 0">{{
+              `Set${index}`
+            }}</text>
             <view
               v-if="
                 (selectedIndex === 0 && index !== 0) ||
@@ -182,11 +204,7 @@ onLoad(async (options) => {
                 }"
               >
                 {{
-                  arrow.ring === 0
-                    ? "X"
-                    : arrow.ring === -1
-                    ? "M"
-                    : arrow.ring
+                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
                 }}
               </text>
             </view>
@@ -196,18 +214,40 @@ onLoad(async (options) => {
           <SButton :onClick="goBack" :rounded="50">Close</SButton>
         </view>
       </view>
-      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+      <ScreenHint2
+        :show="showTip || showTip2 || showTip3"
+        :onClose="!notes && showTip3 ? null : closeTip"
+      >
         <view class="tip-content">
           <block v-if="showTip">
             <text>Stability Description</text>
             <text
-              >The stability of archery is measured by calculating the average distance of each arrow to other arrows. The smaller the number, the more stable the archery. This data can only be generated when the user marks the landing point.</text
+              >The stability of archery is measured by calculating the average
+              distance of each arrow to other arrows. The smaller the number,
+              the more stable the archery. This data can only be generated when
+              the user marks the landing point.</text
             >
           </block>
           <block v-if="showTip2">
             <text>Distribution Description</text>
             <text>Show the user's archery points in a practice session</text>
           </block>
+          <block v-if="showTip3">
+            <text>Notes</text>
+            <text v-if="notes">{{ notes }}</text>
+            <textarea
+              v-if="!notes"
+              v-model="draftNotes"
+              rows="4"
+              class="notes-input"
+            />
+            <view v-if="!notes">
+              <button hover-class="none" @click="showTip3 = false">
+                Cancel
+              </button>
+              <button hover-class="none" @click="saveNote">Save Notes</button>
+            </view>
+          </block>
         </view>
       </ScreenHint2>
     </view>
@@ -322,6 +362,33 @@ onLoad(async (options) => {
   margin-top: 20px;
   opacity: 0.8;
 }
+.tip-content > view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip-content > view > input {
+  width: 80%;
+  height: 44px;
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 .ring-text-groups {
   display: flex;
   flex-direction: column;
@@ -331,8 +398,9 @@ onLoad(async (options) => {
   color: #999999;
 }
 .ring-text-groups > view {
+  width: 100%;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
 }
 .ring-text-groups > view > text {
   width: 82rpx;
@@ -352,4 +420,23 @@ onLoad(async (options) => {
   text-align: center;
   margin-bottom: 10rpx;
 }
+.notes-input {
+  width: calc(100% - 40rpx);
+  margin: 25rpx 0;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  padding: 5px;
+  color: #000;
+  padding: 20rpx;
+}
+.note-btn {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.note-btn > image {
+  width: 52rpx;
+  height: 52rpx;
+}
 </style>
diff --git a/src/static/add-grey.png b/src/static/add-grey.png
index 12d584e..1fa0988 100644
Binary files a/src/static/add-grey.png and b/src/static/add-grey.png differ
diff --git a/src/static/has-note.png b/src/static/has-note.png
new file mode 100644
index 0000000..0b2580e
Binary files /dev/null and b/src/static/has-note.png differ