diff --git a/.env b/.env
index 3a105a4..fd2d8b2 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-# VITE_APP_API_URL=http://localhost:8000/
-VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file
+VITE_APP_API_URL=http://localhost:8000/
+# VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file
diff --git a/public/schedule/not-subscribed-lg.svg b/public/schedule/not-subscribed-lg.svg
new file mode 100644
index 0000000..e367eb2
--- /dev/null
+++ b/public/schedule/not-subscribed-lg.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="44" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5714 36.6667L19 31.3378L5.42857 36.6667V4.88889H32.5714M32.5714 0H5.42857C3.98882 0 2.60805 0.515078 1.58999 1.43192C0.571937 2.34877 0 3.59227 0 4.88889V44L19 36.6667L38 44V4.88889C38 2.17556 35.5571 0 32.5714 0Z" fill="#FF7B1A"/>
+</svg>
diff --git a/public/schedule/subscribed-lg.svg b/public/schedule/subscribed-lg.svg
new file mode 100644
index 0000000..0fbea60
--- /dev/null
+++ b/public/schedule/subscribed-lg.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="44" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32.5714 0H5.42857C3.98882 0 2.60805 0.515078 1.58999 1.43192C0.571937 2.34877 0 3.59227 0 4.88889V44L19 36.6667L38 44V4.88889C38 2.17556 35.5571 0 32.5714 0Z" fill="#FF7B1A"/>
+</svg>
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 284966f..fae8eea 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div></div>
   <div
-    class="fixed top-6 z-[101] w-full flex justify-center"
+    class="fixed top-6 z-[10000] w-full flex justify-center"
     v-bind:class="{
       hidden: !store.isShow,
     }"
diff --git a/src/components/SaveScheduleButton.vue b/src/components/SaveScheduleButton.vue
new file mode 100644
index 0000000..7ead766
--- /dev/null
+++ b/src/components/SaveScheduleButton.vue
@@ -0,0 +1,128 @@
+<template>
+  <button
+    :class="{
+      'w-[51px] h-[51px]': size === 'lg',
+      'w-[24px] h-[24px]': size === 'sm',
+    }"
+    :style="{
+      'background' : subscribeIcon,
+    }"
+    class="flex justify-center items-center"
+    @click="handleSave"
+  ></button>
+</template>
+
+<script setup>
+import { computed, defineProps} from "vue";
+import { useEventStore } from "../stores/user";
+
+const eventStore = useEventStore();
+
+let props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  activity: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: "暫無描述",
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+  startTime: {
+    //backend: event_time_start
+    type: String,
+    required: true,
+  },
+  endTime: {
+    //backend: event_time_end
+    type: String,
+    required: true,
+  },
+  host: {
+    type: String,
+    required: true,
+  },
+  location: {
+    type: String,
+    required: true,
+  },
+  link: {
+    type: String,
+    required: false,
+  },
+  saved: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: "sm", // lg
+  },
+});
+
+const {
+  id,
+  activity,
+  name,
+  date,
+  startTime,
+  endTime,
+  host,
+  location,
+  link,
+  saved,
+  size,
+} = props;
+
+const subscribeIcon = computed(() => {
+    if(eventStore.isEventSubscribed(id)){
+        if(size === 'lg'){
+            return "url(/BikeFestival17th-Frontend/schedule/subscribed-lg.svg) no-repeat";
+        }
+        return "url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat";
+    }
+    else{
+        if(size === 'lg'){
+            return "url(/BikeFestival17th-Frontend/schedule/not-subscribed-lg.svg) no-repeat";
+        }
+        return "url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat";
+    }
+});
+
+const handleSave = () => {
+  // YYYY-MM-DD HH:MM:SS
+  if (eventStore.isEventSubscribed(id)) {
+    console.log("unsubscribed");
+    eventStore.unSubscribeEvent(id, name);
+    return;
+  }
+  const day = date.split("/")[1];
+  const start = `2024/03/0${day} ${startTime}`;
+  const end = `2024/03/0${day} ${endTime}`;
+  const detail = JSON.stringify({
+    id,
+    activity,
+    name,
+    date,
+    start,
+    end,
+    host,
+    location,
+    link,
+    saved,
+  });
+  eventStore.subscribeEvent(id, start, end, detail, name);
+};
+
+</script>
diff --git a/src/components/ScheduleCardModal.vue b/src/components/ScheduleCardModal.vue
index 1994ec4..2582250 100644
--- a/src/components/ScheduleCardModal.vue
+++ b/src/components/ScheduleCardModal.vue
@@ -9,9 +9,19 @@
         <!-- top title: 主題活動、收藏按鈕、關閉按鈕 -->
         <div class="flex items-center gap-5">
           <p class="grow text-primary-900 font-bold text-xl underline leading-none">{{ activity }}</p>
-          <svg class="min-w-6" xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 30 36" fill="none">
-            <path d="M25.7143 0H4.28571C3.14907 0 2.05898 0.421427 1.25526 1.17157C0.451529 1.92172 0 2.93913 0 4V36L15 30L30 36V4C30 1.78 28.0714 0 25.7143 0Z" fill="#FF7B1A" />
-          </svg>
+          <SaveScheduleButton
+            :id="id"
+            :activity="activity"
+            :name="name"
+            :date="date"
+            :startTime="startTime"
+            :endTime="endTime"
+            :host="host"
+            :location="location"
+            :link="link"
+            :saved="saved"
+            :size="'lg'"
+          ></SaveScheduleButton>
           <button @click="$emit('close')" class="flex justify-center items-center min-w-[50px] min-h-[50px] hover:bg-gray-100 hover:rounded-full">
             <img src="/schedule/close.svg" class="w-[50px] h-[50px]">
           </button>
@@ -45,9 +55,13 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
-import { apiSubscribeEvent } from "../apis/user";
+import { defineProps,defineEmits } from "vue";
+import SaveScheduleButton from "./SaveScheduleButton.vue";
 const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
   show: {
     type: Boolean,
     required: true,
@@ -99,8 +113,6 @@ const props = defineProps({
 });
 
 const { id, link, host, location, date, startTime, endTime, saved } = props;
-const handleSave = () => {
-  // TODO: the parameters in the function below are just for testing, please replace them with the actual values
-  apiSubscribeEvent("1", "", "2021/01/01 00:00", "2021/01/01 00:00");
-};
+
+defineEmits(["close"]);
 </script>
diff --git a/src/components/ScheduleCardMultiModal.vue b/src/components/ScheduleCardMultiModal.vue
index 45a9be0..24a0906 100644
--- a/src/components/ScheduleCardMultiModal.vue
+++ b/src/components/ScheduleCardMultiModal.vue
@@ -40,18 +40,19 @@
                   即刻報名
                 </a>
                 <div class="flex flex-col justify-center">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="30"
-                    height="36"
-                    viewBox="0 0 30 36"
-                    fill="none"
-                  >
-                    <path
-                      d="M25.7143 0H4.28571C3.14907 0 2.05898 0.421427 1.25526 1.17157C0.451529 1.92172 0 2.93913 0 4V36L15 30L30 36V4C30 1.78 28.0714 0 25.7143 0Z"
-                      fill="#FF7B1A"
-                    />
-                  </svg>
+                  <SaveScheduleButton
+                    :id="event.id"
+                    :activity="event.activity"
+                    :name="event.name"
+                    :date="event.date"
+                    :startTime="event.startTime"
+                    :endTime="event.endTime"
+                    :host="event.host"
+                    :location="event.location"
+                    :link="event.link"
+                    :saved="event.saved"
+                    :size="'lg'"
+                  ></SaveScheduleButton>
                 </div>
               </div>
             </div>
@@ -87,7 +88,9 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps,defineEmits } from "vue";
+import SaveScheduleButton from "./SaveScheduleButton.vue";
+
 const props = defineProps({
   events: {
     type: Array,
@@ -96,53 +99,9 @@ const props = defineProps({
   show: {
     type: Boolean,
     required: true,
-  },
-  // name: {
-  //   type: String,
-  //   required: true,
-  // },
-  // activity: {
-  //   type: String,
-  //   required: true,
-  // },
-  // description: {
-  //   type: String,
-  //   default: "暫無描述",
-  // },
-  // date: {
-  //   type: String,
-  //   required: true,
-  // },
-  // startTime: {
-  //   //backend: event_time_start
-  //   type: String,
-  //   required: true,
-  // },
-  // endTime: {
-  //   //backend: event_time_end
-  //   type: String,
-  //   required: true,
-  // },
-  // host: {
-  //   //backend: event_host
-  //   type: String,
-  //   default: "暫無講者",
-  // },
-  // location: {
-  //   //backend: event_location
-  //   type: String,
-  //   required: true,
-  // },
-  // link: {
-  //   type: String,
-  //   required: false,
-  // },
-  // saved: {
-  //   type: Boolean,
-  //   default: false,
-  // },
+  }
 });
 
-// const { id, link, host, location, date, startTime, endTime, saved } = props;
 const { events } = props;
+defineEmits(["close"]);
 </script>
diff --git a/src/components/ScheduleCardSingle.vue b/src/components/ScheduleCardSingle.vue
index 7ffb63a..19624a5 100644
--- a/src/components/ScheduleCardSingle.vue
+++ b/src/components/ScheduleCardSingle.vue
@@ -11,35 +11,19 @@
           activity
         }}</span>
       </div>
-      <button
-        class="w-[24px] h-[24px] lg:flex justify-center items-center hidden"
-        :class="
-          id === '49' && props.step === 1
-            ? 'z-50 bg-primary-50 pointer-events-none'
-            : ''
-        "
-        :style="
-          eventStore.isEventSubscribed(id)
-            ? 'background: url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat'
-            : 'background: url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat'
-        "
-        @click="handleSave"
-      ></button>
-      <button
-        class="w-[24px] h-[24px] flex justify-center items-center lg:hidden"
-        :class="
-          id === '1' && props.step === 1
-            ? 'z-50 bg-primary-50 pointer-events-none'
-            : ''
-        "
-        :style="
-          eventStore.isEventSubscribed(id)
-            ? 'background: url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat'
-            : 'background: url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat'
-        "
-        @click="handleSave"
-      >
-      </button>
+      <SaveScheduleButton
+        :id="id"
+        :activity="activity"
+        :name="name"
+        :date="date"
+        :startTime="startTime"
+        :endTime="endTime"
+        :host="host"
+        :location="location"
+        :link="link"
+        :saved="saved"
+        :size="'sm'"
+      ></SaveScheduleButton>
     </div>
     <!-- middle -->
     <div class="flex flex-col gap-2">
@@ -114,6 +98,7 @@
 <script setup>
 import { defineProps, ref, watch } from "vue";
 import ScheduleCardModal from "./ScheduleCardModal.vue";
+import SaveScheduleButton from "./SaveScheduleButton.vue";
 import { useEventStore } from "../stores/user";
 
 const eventStore = useEventStore();
diff --git a/src/components/StripCard.vue b/src/components/StripCard.vue
index 4361a1e..ddf33aa 100644
--- a/src/components/StripCard.vue
+++ b/src/components/StripCard.vue
@@ -44,14 +44,19 @@
           <img src="/schedule/location.svg" alt="" class="flex w-4 h-4"/>
           <p class="text-black text-xs font-[350] truncate">{{ location }}</p>
         </div>
-        <button
-          class="w-[24px] h-[24px] flex justify-center items-center ml-4"
-          @click="handleSave"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
-            <path d="M12 15L7 12.82L2 15V2H12M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V18L7 15L14 18V2C14 0.89 13.1 0 12 0Z" fill="#FF7B1A" />
-          </svg>
-        </button>
+        <SaveScheduleButton
+        :id="id"
+        :activity="activity"
+        :name="name"
+        :date="date"
+        :startTime="startTime"
+        :endTime="endTime"
+        :host="host"
+        :location="location"
+        :link="link"
+        :saved="saved"
+        :size="'sm'"
+      ></SaveScheduleButton>
       </div>
       <button class="px-2 rounded-[14px] border-[1px] border-primary-900 box-border lg:hidden">
         <div class="flex justify-center items-center">
@@ -87,6 +92,7 @@
 <script setup>
 import { defineProps, ref} from "vue";
 import ScheduleCardModal from "./ScheduleCardModal.vue";
+import SaveScheduleButton from "./SaveScheduleButton.vue";
 
 const props = defineProps({
   id: {