diff --git a/manifest.json b/manifest.json
deleted file mode 100644
index 58df0be..0000000
--- a/manifest.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-    "name": "NCKU Bike Festival 17th",
-    "short_name": "成大單車節",
-    "theme_color": "#ff7b1a",
-    "background_color": "#ff7b1a",
-    "display": "fullscreen",
-    "scope": "/",
-    "start_url": "index.html",
-    "icons": [
-        {
-          "src": "./ncku-bike-festival-logo-72x72.png",
-          "type": "image/png",
-          "sizes": "72x72"
-        },
-        {
-          "src": "./ncku-bike-festival-logo-96x96.png",
-          "type": "image/png",
-          "sizes": "96x96"
-        },
-        {
-          "src": "./ncku-bike-festival-logo-144x144.png",
-          "type": "image/png",
-          "sizes": "144x144"
-        }
-      ]
-}
\ No newline at end of file
diff --git a/ncku-bike-festival-logo-144x144.png b/ncku-bike-festival-logo-144x144.png
deleted file mode 100644
index 6fdae19..0000000
Binary files a/ncku-bike-festival-logo-144x144.png and /dev/null differ
diff --git a/ncku-bike-festival-logo-72x72.png b/ncku-bike-festival-logo-72x72.png
deleted file mode 100644
index 7c33531..0000000
Binary files a/ncku-bike-festival-logo-72x72.png and /dev/null differ
diff --git a/ncku-bike-festival-logo-96x96.png b/ncku-bike-festival-logo-96x96.png
deleted file mode 100644
index f5d14d8..0000000
Binary files a/ncku-bike-festival-logo-96x96.png and /dev/null differ
diff --git a/public/activities/2024 Bike Department Expo.png b/public/activities/2024 Bike Department Expo.png
new file mode 100644
index 0000000..2cc6cd9
Binary files /dev/null and b/public/activities/2024 Bike Department Expo.png differ
diff --git a/public/activities/2024 Bike Education Guide.png b/public/activities/2024 Bike Education Guide.png
new file mode 100644
index 0000000..759e045
Binary files /dev/null and b/public/activities/2024 Bike Education Guide.png differ
diff --git a/public/activities/2024 Bike Immersive experience.png b/public/activities/2024 Bike Immersive experience.png
new file mode 100644
index 0000000..acd1b14
Binary files /dev/null and b/public/activities/2024 Bike Immersive experience.png differ
diff --git a/public/activities/2024 Bike LifeCrossroads.png b/public/activities/2024 Bike LifeCrossroads.png
new file mode 100644
index 0000000..e6dd556
Binary files /dev/null and b/public/activities/2024 Bike LifeCrossroads.png differ
diff --git a/public/activities/2024 Bike University Blueprint.png b/public/activities/2024 Bike University Blueprint.png
new file mode 100644
index 0000000..fabe8f6
Binary files /dev/null and b/public/activities/2024 Bike University Blueprint.png differ
diff --git a/public/activities/2024 Bike relieve worries.png b/public/activities/2024 Bike relieve worries.png
new file mode 100644
index 0000000..d172301
Binary files /dev/null and b/public/activities/2024 Bike relieve worries.png differ
diff --git a/public/activities/2024 Bike stage_events.png b/public/activities/2024 Bike stage_events.png
new file mode 100644
index 0000000..89f2cdf
Binary files /dev/null and b/public/activities/2024 Bike stage_events.png differ
diff --git a/public/ball-144x144.png b/public/ball-144x144.png
new file mode 100644
index 0000000..cd0576f
Binary files /dev/null and b/public/ball-144x144.png differ
diff --git a/public/ball-72x72.png b/public/ball-72x72.png
new file mode 100644
index 0000000..4d840f8
Binary files /dev/null and b/public/ball-72x72.png differ
diff --git a/public/ball-96x96.png b/public/ball-96x96.png
new file mode 100644
index 0000000..c7ff753
Binary files /dev/null and b/public/ball-96x96.png differ
diff --git "a/public/members/\345\205\254\351\227\234 \345\273\226\351\237\273\346\267\207_1.webp" "b/public/members/\345\205\254\351\227\234 \345\273\226\351\237\273\346\267\207_1.webp"
new file mode 100644
index 0000000..d90cebd
Binary files /dev/null and "b/public/members/\345\205\254\351\227\234 \345\273\226\351\237\273\346\267\207_1.webp" differ
diff --git "a/public/members/\345\205\254\351\227\234 \351\231\263\346\257\205\346\264\213_2.webp" "b/public/members/\345\205\254\351\227\234 \351\231\263\346\257\205\346\264\213_2.webp"
new file mode 100644
index 0000000..5da755e
Binary files /dev/null and "b/public/members/\345\205\254\351\227\234 \351\231\263\346\257\205\346\264\213_2.webp" differ
diff --git "a/public/members/\345\255\270\350\241\223 \346\245\212\351\203\201\346\266\265_3.webp" "b/public/members/\345\255\270\350\241\223 \346\245\212\351\203\201\346\266\265_3.webp"
new file mode 100644
index 0000000..35f1eb7
Binary files /dev/null and "b/public/members/\345\255\270\350\241\223 \346\245\212\351\203\201\346\266\265_3.webp" differ
diff --git "a/public/members/\345\255\270\350\241\223 \350\251\271\345\215\232\345\240\257_4.webp" "b/public/members/\345\255\270\350\241\223 \350\251\271\345\215\232\345\240\257_4.webp"
new file mode 100644
index 0000000..dfb858b
Binary files /dev/null and "b/public/members/\345\255\270\350\241\223 \350\251\271\345\215\232\345\240\257_4.webp" differ
diff --git "a/public/members/\345\255\270\350\241\223 \350\266\231\350\223\201\345\246\244_5.webp" "b/public/members/\345\255\270\350\241\223 \350\266\231\350\223\201\345\246\244_5.webp"
new file mode 100644
index 0000000..053c9e1
Binary files /dev/null and "b/public/members/\345\255\270\350\241\223 \350\266\231\350\223\201\345\246\244_5.webp" differ
diff --git "a/public/members/\345\275\261\350\250\230 \345\221\250\346\200\241\346\275\224_6.webp" "b/public/members/\345\275\261\350\250\230 \345\221\250\346\200\241\346\275\224_6.webp"
new file mode 100644
index 0000000..6754704
Binary files /dev/null and "b/public/members/\345\275\261\350\250\230 \345\221\250\346\200\241\346\275\224_6.webp" differ
diff --git "a/public/members/\345\275\261\350\250\230 \350\227\215\345\256\207\346\235\260_7.webp" "b/public/members/\345\275\261\350\250\230 \350\227\215\345\256\207\346\235\260_7.webp"
new file mode 100644
index 0000000..648eadb
Binary files /dev/null and "b/public/members/\345\275\261\350\250\230 \350\227\215\345\256\207\346\235\260_7.webp" differ
diff --git "a/public/members/\345\275\261\350\250\230 \351\231\263\350\251\240\346\266\265_8.webp" "b/public/members/\345\275\261\350\250\230 \351\231\263\350\251\240\346\266\265_8.webp"
new file mode 100644
index 0000000..91082de
Binary files /dev/null and "b/public/members/\345\275\261\350\250\230 \351\231\263\350\251\240\346\266\265_8.webp" differ
diff --git "a/public/members/\347\247\230\346\233\270 \345\273\226\350\212\203\350\223\201_9.webp" "b/public/members/\347\247\230\346\233\270 \345\273\226\350\212\203\350\223\201_9.webp"
new file mode 100644
index 0000000..fdd6ab1
Binary files /dev/null and "b/public/members/\347\247\230\346\233\270 \345\273\226\350\212\203\350\223\201_9.webp" differ
diff --git "a/public/members/\347\247\230\346\233\270 \351\273\203\345\217\213\350\252\240_10.webp" "b/public/members/\347\247\230\346\233\270 \351\273\203\345\217\213\350\252\240_10.webp"
new file mode 100644
index 0000000..07ff344
Binary files /dev/null and "b/public/members/\347\247\230\346\233\270 \351\273\203\345\217\213\350\252\240_10.webp" differ
diff --git "a/public/members/\347\255\226\345\261\225 \345\274\265\351\210\236\345\202\221_11.webp" "b/public/members/\347\255\226\345\261\225 \345\274\265\351\210\236\345\202\221_11.webp"
new file mode 100644
index 0000000..8f00ec8
Binary files /dev/null and "b/public/members/\347\255\226\345\261\225 \345\274\265\351\210\236\345\202\221_11.webp" differ
diff --git "a/public/members/\347\255\226\345\261\225 \346\270\270\346\243\250\345\267\226_12.webp" "b/public/members/\347\255\226\345\261\225 \346\270\270\346\243\250\345\267\226_12.webp"
new file mode 100644
index 0000000..dab57dc
Binary files /dev/null and "b/public/members/\347\255\226\345\261\225 \346\270\270\346\243\250\345\267\226_12.webp" differ
diff --git "a/public/members/\347\255\226\345\261\225 \351\231\263\351\233\250\345\251\225_13.webp" "b/public/members/\347\255\226\345\261\225 \351\231\263\351\233\250\345\251\225_13.webp"
new file mode 100644
index 0000000..011d88d
Binary files /dev/null and "b/public/members/\347\255\226\345\261\225 \351\231\263\351\233\250\345\251\225_13.webp" differ
diff --git "a/public/members/\347\270\275\347\261\214 \345\274\265\347\231\276\351\264\273_14.webp" "b/public/members/\347\270\275\347\261\214 \345\274\265\347\231\276\351\264\273_14.webp"
new file mode 100644
index 0000000..9747958
Binary files /dev/null and "b/public/members/\347\270\275\347\261\214 \345\274\265\347\231\276\351\264\273_14.webp" differ
diff --git "a/public/members/\347\270\275\347\261\214 \351\231\263\344\277\212\345\256\211.webp" "b/public/members/\347\270\275\347\261\214 \351\231\263\344\277\212\345\256\211.webp"
new file mode 100644
index 0000000..d7ef7fc
Binary files /dev/null and "b/public/members/\347\270\275\347\261\214 \351\231\263\344\277\212\345\256\211.webp" differ
diff --git "a/public/members/\350\241\214\351\212\267 \345\221\250\346\262\233\345\204\200.webp" "b/public/members/\350\241\214\351\212\267 \345\221\250\346\262\233\345\204\200.webp"
new file mode 100644
index 0000000..33fcd5f
Binary files /dev/null and "b/public/members/\350\241\214\351\212\267 \345\221\250\346\262\233\345\204\200.webp" differ
diff --git "a/public/members/\350\241\214\351\212\267 \345\274\265\346\231\217\347\216\237.webp" "b/public/members/\350\241\214\351\212\267 \345\274\265\346\231\217\347\216\237.webp"
new file mode 100644
index 0000000..8d9d4c0
Binary files /dev/null and "b/public/members/\350\241\214\351\212\267 \345\274\265\346\231\217\347\216\237.webp" differ
diff --git "a/public/members/\350\241\214\351\212\267 \346\226\271\346\226\207\345\273\267.webp" "b/public/members/\350\241\214\351\212\267 \346\226\271\346\226\207\345\273\267.webp"
new file mode 100644
index 0000000..a47306b
Binary files /dev/null and "b/public/members/\350\241\214\351\212\267 \346\226\271\346\226\207\345\273\267.webp" differ
diff --git "a/public/members/\350\250\255\350\250\210 \344\275\231\345\230\211\346\275\223.webp" "b/public/members/\350\250\255\350\250\210 \344\275\231\345\230\211\346\275\223.webp"
new file mode 100644
index 0000000..77bd3ca
Binary files /dev/null and "b/public/members/\350\250\255\350\250\210 \344\275\231\345\230\211\346\275\223.webp" differ
diff --git "a/public/members/\350\250\255\350\250\210 \346\226\207\351\201\240\347\235\277.webp" "b/public/members/\350\250\255\350\250\210 \346\226\207\351\201\240\347\235\277.webp"
new file mode 100644
index 0000000..9ad79bb
Binary files /dev/null and "b/public/members/\350\250\255\350\250\210 \346\226\207\351\201\240\347\235\277.webp" differ
diff --git "a/public/members/\350\250\255\350\250\210 \351\273\203\345\272\255\350\221\263.webp" "b/public/members/\350\250\255\350\250\210 \351\273\203\345\272\255\350\221\263.webp"
new file mode 100644
index 0000000..dd0fc57
Binary files /dev/null and "b/public/members/\350\250\255\350\250\210 \351\273\203\345\272\255\350\221\263.webp" differ
diff --git a/src/components/ActivityContent.vue b/src/components/ActivityContent.vue
index cd51e6b..8d6634e 100644
--- a/src/components/ActivityContent.vue
+++ b/src/components/ActivityContent.vue
@@ -1,12 +1,19 @@
 <template>
-  <div class="lg:max-w-[1200px] max-w-[360px] mx-auto">
+  <div class="lg:max-w-[1200px] max-w-[370px] mx-auto">
     <div class="bg-white rounded-2xl px-5 py-3 h-fit min-w-[250px] lg:fixed mb-10">
       <h1 class="font-bold text-primary text-2xl mb-5">{{ props.title }}</h1>
       <a @click="setNum(index)" :href="'#item_' + index" v-for="(item, index) in list" :key="index"><h2 class="text-content text-xl mb-5 hover:bg-[#FFE0CA] rounded-lg p-1" :class="num === index ? 'bg-[#FFE0CA]' : ''">{{ item.subtitle }}</h2></a>
     </div>
     <div class="lg:w-3/4 lg:ml-[300px]">
+      <div class="relative w-full lg:h-[400px] h-[200px] mb-5">
+        <img :src="img" class="rounded-2xl object-cover w-full mb-[400px] absolute h-full" />
+        <div style="border-radius: 16px;
+background: linear-gradient(0deg, #404040 0%, rgba(217, 217, 217, 0.00) 100%);" class="absolute z-10 w-full h-full"></div>
+        <h1 class="text-white lg:text-5xl text-4xl font-bold absolute z-10 lg:top-80 top-32 lg:right-10 lg:left-auto left-5">{{ props.title }}</h1>
+      </div>
+      
       <div v-for="(item, index) in props.list" :key=index class="text-content text-xl mb-72">
-        <h2 :id="'item_' + index" class="text-3xl font-bold mb-5">{{ item.subtitle }}</h2>
+        <h2 :id="'item_' + index" class="text-3xl font-bold mb-5 bg-[#FF5C0045] w-auto inline-block">{{ item.subtitle }}</h2>
         <h3 class="text-2xl font-bold mb-5">活動介紹</h3>
         <div v-html=item.intro class="mb-5"></div>
         <h3 class="text-2xl font-bold mb-5">活動地點</h3>
@@ -23,10 +30,11 @@
 
 <script setup>
 import { ref } from 'vue';
-
+import activities from '../data/activities.json';
 const props = defineProps({
   title: String,
   list: Array, //subproject list
+  img: String
 });
 
 const num = ref(0); //tab target
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index c9bd8e9..090843b 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -16,7 +16,7 @@
             <div class="lg:flex hidden">
                 <RouterLink to="/about">關於單車節</RouterLink>
                 <p>　｜　</p>
-                <RouterLink to="/info">參加資訊</RouterLink>
+                <RouterLink to="/info/traffic">參加資訊</RouterLink>
             </div>
             <div class="lg:flex hidden">
                 <RouterLink to="/activities">主題活動</RouterLink>
diff --git a/src/components/MemberCard.vue b/src/components/MemberCard.vue
index e5e8d81..69da2d2 100644
--- a/src/components/MemberCard.vue
+++ b/src/components/MemberCard.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-[1200px] flex flex-wrap lg:justify-between justify-center mt-16">
         <div v-for="(item, index) in memberInfo" :key=index class="w-[362px] h-[177px] border border-content rounded-[40px] bg-white flex p-6 items-center justify-between mb-7">
-            <div class="lg:w-[100px] lg:h-[100px] w-[80px] h-[80px] rounded-full bg-gray-500"></div>
+            <img :src="item.img" class="lg:w-[100px] lg:h-[100px] w-[80px] h-[80px] rounded-full" />
             <div class="lg:w-[200px] w-[160px]">
                 <p class="text-primary text-xs mb-2">{{ item.department }}・{{ item.class }}</p>
                 <p class="text-content font-bold text-xl mb-2">{{ item.name }}</p>
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
new file mode 100644
index 0000000..bc70bde
--- /dev/null
+++ b/src/components/TabBar.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex lg:my-8 my-4 flex-wrap">
+    <div v-for="(tab, index) in props.tabs" :key="index" @click="target = index" class="border-2 border-primary p-3 rounded-xl text-primary text-xl w-36 mr-8 mb-4" :class="index === target ? 'bg-primary text-white' : ''">
+      <RouterLink :to="tab.url" class="flex justify-around items-center" @click="$emit('tab-index', index)"><div v-html="index === target ? tab.icon : tab.icon_orange"></div>{{ tab.title }}</RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  tabs: Array
+});
+
+const target = ref(0);
+</script>
\ No newline at end of file
diff --git a/src/data/activities.json b/src/data/activities.json
index 63fc4e7..1305aa4 100644
--- a/src/data/activities.json
+++ b/src/data/activities.json
@@ -1,42 +1,42 @@
 [
   {
-    "img": "",
+    "img": "activities/2024 Bike stage_events.png",
     "url": "/activities/mainStage",
     "title": "主舞台〈曦瓣〉",
     "intro": "<p>今年舞台以<span class='text-primary'>晨曦中的鬱金花海</span>為主題，鬱金香的花語有著乘載美好回憶以及祝福的寓意，結合代表希望升起的日出以及令人嚮往的海灘，我們希望透過多樣化的舞台表演，建立各地高中生們間的連結感，也經由大學社團的表演向與會者展示大學社團的豐富和精采，使得高中生更加了解大學生活，也帶給每位與會者豐富的感官享受。另外，舞台也將扮演資訊集散地的角色，透過在台上的宣傳及公告，傳達單車節各區訊息。也希望能透過本次活動，發揮成大的影響力，善盡成大的社會教育責任。</p>"
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike Department Expo.png",
     "url": "/activities/departmentExpo",
     "title": "科系博覽",
     "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike University Blueprint.png",
     "url": "/activities/universityBlueprint",
     "title": "大學藍圖",
     "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike Education Guide.png",
     "url": "/activities/educationalGuide",
     "title": "升學指南",
     "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike LifeCrossroads.png",
     "url": "/activities/lifeCrossroads",
     "title": "人生叉路口",
     "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike Immersive experience.png",
     "url": "/activities/immersiveExperience",
     "title": "沈浸式體驗",
     "intro": "<p>以「成大體驗」、「大學生活」為出發點，去建構及蒐集大學生日常的面向，以沈浸式戲劇手法讓高中生一窺大學真實樣貌，降低未知所帶來的恐懼感，為成為大學生這件事更有心理準備，也能透過不同生活的視野讓高中生探索、想像未來的可能性。</p>"
   },
   {
-    "img": "",
+    "img": "activities/2024 Bike relieve worries.png",
     "url": "/activities/unworriedTeaHouse",
     "title": "解憂茶軒",
     "intro": "<p>在 108 課綱的改制下，越來越多高中生被要求提早確定未來目標，產出豐富的學習歷程。在這條路上，總是充滿著迷惘與焦慮，同為走過課綱改制一員的我們，希望能以過來人的身份為現在的高中生指點迷津，提供一個對話平台，幫助高中生解決升學遇到的問題、生活上的煩惱。</p>"
diff --git a/src/data/memberInfo.json b/src/data/memberInfo.json
index 4fa0e10..3537a1c 100644
--- a/src/data/memberInfo.json
+++ b/src/data/memberInfo.json
@@ -1,24 +1,24 @@
 [
-    {"department": "總籌部", "name": "陳俊安", "class": "資訊 115", "tags": "#Colten #現在是早上六點嗎  #我幫你留了一些 bug 等你去修", "song": "琳誼 Ring - 在某個角落努力的你"},
-    {"department": "總籌部", "name": "張百鴻", "class": "資訊 115", "tags": "#水豚愛好者 #我只有腳踏車 #晚餐吃拉麵好不好", "song": "The Crane - Don't Mind"},
-    {"department": "秘書部", "name": "廖芃蓁", "class": "企管 114", "tags": "#古靈精怪可可愛愛 #減肥困難戶 #深夜聽歌emo的INFP", "song": "Newleans - ETA"},
-    {"department": "秘書部", "name": "黃友誠", "class": "牙醫 117", "tags": "#咖喱飯一定要拌在一起 #重度選擇障礙 #路上觀察學家", "song": "葉璦菱 - 我心已打烊"},
-    {"department": "公關部", "name": "陳毅洋", "class": "政治 114", "tags": "#ENFP轉INFP #天氣之子  #小池不揪", "song": "Newleans - Super Shy"},
-    {"department": "公關部", "name": "廖韻淇", "class": "企管 115", "tags": "#我怕鬼 #防曬大師 #一餐要一個半小時", "song": "Lauv - Steal The Show"},
-    {"department": "學術部", "name": "趙蓁妤", "class": "會計 115", "tags": "#粉紅泡泡  #奶茶控 #熬夜技能加載中", "song": "IU - Hold My Hand"},
-    {"department": "學術部", "name": "楊郁涵", "class": "會計 115", "tags": "#極度龜毛 #藍色小精靈 #一天一拿鐵", "song": "Justin Bieber - Love Yourself"},
-    {"department": "學術部", "name": "詹博堯", "class": "資訊 115", "tags": "#傑博瑞是一隻水母  #感冒要吃冰 #人生是場派對而我是pinata", "song": "SZA - Snooze"},
-    {"department": "策展部", "name": "陳雨婕", "class": "生技 115", "tags": "#看起來永遠想睡覺  #jajas #喜歡吃東西（也喜歡減肥）", "song": "Dua Lipa - Dance The Night"},
-    {"department": "策展部", "name": "張鈞傑", "class": "能源 115", "tags": "#潔癖  #路怒症  #我最瘦", "song": "林宥嘉 - 我不是神，我只是平凡卻直拗愛著你的人"},
-    {"department": "策展部", "name": "游棨巖", "class": "光電 115", "tags": "#暈船症候群 #愛吃鬼巧達 #小遲五分鐘後到", "song": "Justin Bieber - Off My Face"},
-    {"department": "影紀部", "name": "藍宇杰", "class": "工資 115", "tags": "#B壞A事Bang不N見G  #若能放棄絕不努力 #沒有什麼是Photoshop解決不了的事情", "song": "聖結石 - 朋友BANG不見"},
-    {"department": "影紀部", "name": "陳詠涵", "class": "醫技 115", "tags": "#說走就走型 #探店小天才 #內向悶騷but大喇喇", "song": "AJ Mitchell - Hi-Lo"},
-    {"department": "影紀部", "name": "周怡潔", "class": "中文 114", "tags": "#躲貓貓 #好餓吃啥 #太宇宙了！", "song": "163braces - 小船"},
-    {"department": "設計部", "name": "黃庭葳", "class": "工設 115", "tags": "#蟑螂作息＃拖延症末期 #蕃茄醬工作法", "song": "Mysta Rias - DETECT MY LOVE"},
-    {"department": "設計部", "name": "余嘉潓", "class": "工設 114", "tags": "#自然捲 #晚上做設計 #最喜歡喝仙女紅茶了", "song": "deca joins - 快樂"},
-    {"department": "設計部", "name": "文遠睿", "class": "工設 115", "tags": "#不愛吃早餐 #摔車仔 #吃火鍋只吃白飯", "song": "Harry Styles - Fine Line"},
-    {"department": "行銷部", "name": "張晏玟", "class": "企管 115", "tags": "#選擇困難 #冰淇淋怪獸 #減肥只是說說而已", "song": "厭世少年 - 比比"},
-    {"department": "行銷部", "name": "周沛儀", "class": "企管 115", "tags": "#台南油女 #熬夜小能手 #你要不要喝芭樂汁", "song": "The Crane- 還不想睡"},
-    {"department": "行銷部", "name": "方文廷", "class": "不分 114", "tags": "#方教授(?) #好像都沒睡 #irent愛用者", "song": "deca joins - 浴室"}
+    {"img": "members/總籌 陳俊安.webp", "department": "總籌部", "name": "陳俊安", "class": "資訊 115", "tags": "#Colten #現在是早上六點嗎  #我幫你留了一些 bug 等你去修", "song": "琳誼 Ring - 在某個角落努力的你"},
+    {"img": "members/總籌 張百鴻_14.webp", "department": "總籌部", "name": "張百鴻", "class": "資訊 115", "tags": "#水豚愛好者 #我只有腳踏車 #晚餐吃拉麵好不好", "song": "The Crane - Don't Mind"},
+    {"img": "members/秘書 廖芃蓁_9.webp", "department": "秘書部", "name": "廖芃蓁", "class": "企管 114", "tags": "#古靈精怪可可愛愛 #減肥困難戶 #深夜聽歌emo的INFP", "song": "Newleans - ETA"},
+    {"img": "members/秘書 黃友誠_10.webp", "department": "秘書部", "name": "黃友誠", "class": "牙醫 117", "tags": "#咖喱飯一定要拌在一起 #重度選擇障礙 #路上觀察學家", "song": "葉璦菱 - 我心已打烊"},
+    {"img": "members/公關 陳毅洋_2.webp", "department": "公關部", "name": "陳毅洋", "class": "政治 114", "tags": "#ENFP轉INFP #天氣之子  #小池不揪", "song": "Newleans - Super Shy"},
+    {"img": "members/公關 廖韻淇_1.webp", "department": "公關部", "name": "廖韻淇", "class": "企管 115", "tags": "#我怕鬼 #防曬大師 #一餐要一個半小時", "song": "Lauv - Steal The Show"},
+    {"img": "members/學術 趙蓁妤_5.webp", "department": "學術部", "name": "趙蓁妤", "class": "會計 115", "tags": "#粉紅泡泡  #奶茶控 #熬夜技能加載中", "song": "IU - Hold My Hand"},
+    {"img": "members/學術 楊郁涵_3.webp", "department": "學術部", "name": "楊郁涵", "class": "會計 115", "tags": "#極度龜毛 #藍色小精靈 #一天一拿鐵", "song": "Justin Bieber - Love Yourself"},
+    {"img": "members/學術 詹博堯_4.webp", "department": "學術部", "name": "詹博堯", "class": "資訊 115", "tags": "#傑博瑞是一隻水母  #感冒要吃冰 #人生是場派對而我是pinata", "song": "SZA - Snooze"},
+    {"img": "members/策展 陳雨婕_13.webp", "department": "策展部", "name": "陳雨婕", "class": "生技 115", "tags": "#看起來永遠想睡覺  #jajas #喜歡吃東西（也喜歡減肥）", "song": "Dua Lipa - Dance The Night"},
+    {"img": "members/策展 張鈞傑_11.webp", "department": "策展部", "name": "張鈞傑", "class": "能源 115", "tags": "#潔癖  #路怒症  #我最瘦", "song": "林宥嘉 - 我不是神，我只是平凡卻直拗愛著你的人"},
+    {"img": "members/策展 游棨巖_12.webp", "department": "策展部", "name": "游棨巖", "class": "光電 115", "tags": "#暈船症候群 #愛吃鬼巧達 #小遲五分鐘後到", "song": "Justin Bieber - Off My Face"},
+    {"img": "members/影記 藍宇杰_7.webp", "department": "影紀部", "name": "藍宇杰", "class": "工資 115", "tags": "#B壞A事Bang不N見G  #若能放棄絕不努力 #沒有什麼是Photoshop解決不了的事情", "song": "聖結石 - 朋友BANG不見"},
+    {"img": "members/影記 陳詠涵_8.webp", "department": "影紀部", "name": "陳詠涵", "class": "醫技 115", "tags": "#說走就走型 #探店小天才 #內向悶騷but大喇喇", "song": "AJ Mitchell - Hi-Lo"},
+    {"img": "members/影記 周怡潔_6.webp", "department": "影紀部", "name": "周怡潔", "class": "中文 114", "tags": "#躲貓貓 #好餓吃啥 #太宇宙了！", "song": "163braces - 小船"},
+    {"img": "members/設計 黃庭葳.webp", "department": "設計部", "name": "黃庭葳", "class": "工設 115", "tags": "#蟑螂作息＃拖延症末期 #蕃茄醬工作法", "song": "Mysta Rias - DETECT MY LOVE"},
+    {"img": "members/設計 余嘉潓.webp", "department": "設計部", "name": "余嘉潓", "class": "工設 114", "tags": "#自然捲 #晚上做設計 #最喜歡喝仙女紅茶了", "song": "deca joins - 快樂"},
+    {"img": "members/設計 文遠睿.webp", "department": "設計部", "name": "文遠睿", "class": "工設 115", "tags": "#不愛吃早餐 #摔車仔 #吃火鍋只吃白飯", "song": "Harry Styles - Fine Line"},
+    {"img": "members/行銷 張晏玟.webp", "department": "行銷部", "name": "張晏玟", "class": "企管 115", "tags": "#選擇困難 #冰淇淋怪獸 #減肥只是說說而已", "song": "厭世少年 - 比比"},
+    {"img": "members/行銷 周沛儀.webp", "department": "行銷部", "name": "周沛儀", "class": "企管 115", "tags": "#台南油女 #熬夜小能手 #你要不要喝芭樂汁", "song": "The Crane- 還不想睡"},
+    {"img": "members/行銷 方文廷.webp", "department": "行銷部", "name": "方文廷", "class": "不分 114", "tags": "#方教授(?) #好像都沒睡 #irent愛用者", "song": "deca joins - 浴室"}
 ]
   
\ No newline at end of file
diff --git a/src/views/Info.vue b/src/views/Info.vue
index 2774df0..3495b41 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -1,165 +1,54 @@
 <template>
-  <div class="h-40"></div>
-
-  <!-- center container -->
-  <div class="w-fill flex justify-center">
-    <!-- activity list -->
-    <div class="flex justify-center gap-6 max-w-[1260px]">
-      <div
-        class="text-black text-xl font-bold text-center w-40"
-        v-for="(item, index) in activityList"
-        ref="activityListRef"
-        :key="item"
-        :id="`activity-${index}`"
-      >
-        {{ item }}
-      </div>
-    </div>
-  </div>
-
-  <!-- center container -->
-  <div class="w-fill flex justify-center">
-    <!-- time line -->
-    <div class="flex flex-col gap-[150px] max-w-[1260px]">
-      <div
-        class="w-fill flex justify-center gap-[20px]"
-        v-for="index in 10"
-        :key="index"
-      >
-        <!-- left time box -->
-        <div class="w-[65px] h-[35px] font-bold text-2xl text-primary-900">
-          {{ index + 8 }}:00
-        </div>
-        <div class="flex flex-col justify-center">
-          <div class="w-[1240px] h-0 border-[1px]"></div>
-        </div>
-        <!-- right fake box -->
-        <div class="w-[65px] h-[35px] opacity-0">fake</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="flex flex-col space-y-4">
-    <ScheduleCardSingle
-      v-for="item in event"
-      :key="item.id"
-      :id="item.id"
-      :activity="item.activity"
-      :description="item.description"
-      :name="item.name"
-      :date="item.date"
-      :startTime="item.startTime"
-      :endTime="item.endTime"
-      :host="item.host"
-      :location="item.location"
-    />
+  <Breadcrumb />
+  <div class="lg:max-w-[1200px] max-w-[370px] mx-auto">
+    <h1 class="lg:text-5xl text-4xl font-bold text-content">參加資訊</h1>
+    <TabBar :tabs="tabs" @tab-index="ChangeContent"/>
+    <Traffic v-if="target === 0"/>
+    <Map v-if="target === 1"/>
+    <Schedule v-if="target === 2"/>
+    <MySchedule v-if="target === 3"/>
   </div>
 </template>
 
 <script setup>
-import event from "../data/event.json";
-import ScheduleCardSingle from "../components/ScheduleCardSingle.vue";
-import { ref, onMounted, onBeforeMount } from "vue";
-
-// the top bar from left to right
-const activityOrderList = [
-  "舞台活動",
-  "大學藍圖",
-  "科系博覽",
-  "升學指南",
-  "解憂茶軒",
-  "沈浸式體驗",
-  "人生岔入口",
-];
-
-const activityList = ref([
-  "舞台活動",
-  "大學藍圖",
-  "科系博覽",
-  "升學指南",
-  "解憂茶軒",
-  "沈浸式體驗",
-  "人生岔入口",
-]);
-
-// activityList ref list
-const activityListRef = ref([]);
-
-const eventDict = ref({});
-// process event data before mount
-/*
-  schema : 
+import { ref } from 'vue';
+import Breadcrumb from '@/components/Breadcrumb.vue';
+import Traffic from './info/Traffic.vue';
+import Map from './info/Map.vue';
+import Schedule from './info/Schedule.vue';
+import MySchedule from './info/MySchedule.vue';
+import TabBar from '../components/TabBar.vue';
+
+const tabs = ref([ //TabBar tabs
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 11L6.5 6.5H17.5L19 11M17.5 16C17.1022 16 16.7206 15.842 16.4393 15.5607C16.158 15.2794 16 14.8978 16 14.5C16 14.1022 16.158 13.7206 16.4393 13.4393C16.7206 13.158 17.1022 13 17.5 13C17.8978 13 18.2794 13.158 18.5607 13.4393C18.842 13.7206 19 14.1022 19 14.5C19 14.8978 18.842 15.2794 18.5607 15.5607C18.2794 15.842 17.8978 16 17.5 16ZM6.5 16C6.10218 16 5.72064 15.842 5.43934 15.5607C5.15804 15.2794 5 14.8978 5 14.5C5 14.1022 5.15804 13.7206 5.43934 13.4393C5.72064 13.158 6.10218 13 6.5 13C6.89782 13 7.27936 13.158 7.56066 13.4393C7.84196 13.7206 8 14.1022 8 14.5C8 14.8978 7.84196 15.2794 7.56066 15.5607C7.27936 15.842 6.89782 16 6.5 16ZM18.92 6C18.72 5.42 18.16 5 17.5 5H6.5C5.84 5 5.28 5.42 5.08 6L3 12V20C3 20.2652 3.10536 20.5196 3.29289 20.7071C3.48043 20.8946 3.73478 21 4 21H5C5.26522 21 5.51957 20.8946 5.70711 20.7071C5.89464 20.5196 6 20.2652 6 20V19H18V20C18 20.2652 18.1054 20.5196 18.2929 20.7071C18.4804 20.8946 18.7348 21 19 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V12L18.92 6Z" fill="#FFF8F2"/></svg>',
+    icon_orange: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 11L6.5 6.5H17.5L19 11M17.5 16C17.1022 16 16.7206 15.842 16.4393 15.5607C16.158 15.2794 16 14.8978 16 14.5C16 14.1022 16.158 13.7206 16.4393 13.4393C16.7206 13.158 17.1022 13 17.5 13C17.8978 13 18.2794 13.158 18.5607 13.4393C18.842 13.7206 19 14.1022 19 14.5C19 14.8978 18.842 15.2794 18.5607 15.5607C18.2794 15.842 17.8978 16 17.5 16ZM6.5 16C6.10218 16 5.72064 15.842 5.43934 15.5607C5.15804 15.2794 5 14.8978 5 14.5C5 14.1022 5.15804 13.7206 5.43934 13.4393C5.72064 13.158 6.10218 13 6.5 13C6.89782 13 7.27936 13.158 7.56066 13.4393C7.84196 13.7206 8 14.1022 8 14.5C8 14.8978 7.84196 15.2794 7.56066 15.5607C7.27936 15.842 6.89782 16 6.5 16ZM18.92 6C18.72 5.42 18.16 5 17.5 5H6.5C5.84 5 5.28 5.42 5.08 6L3 12V20C3 20.2652 3.10536 20.5196 3.29289 20.7071C3.48043 20.8946 3.73478 21 4 21H5C5.26522 21 5.51957 20.8946 5.70711 20.7071C5.89464 20.5196 6 20.2652 6 20V19H18V20C18 20.2652 18.1054 20.5196 18.2929 20.7071C18.4804 20.8946 18.7348 21 19 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V12L18.92 6Z" fill="#FF7B1A"/></svg>',
+    title: "交通資訊",
+    url: "/info/traffic"
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 19L9 16.89V5L15 7.11M20.5 3C20.44 3 20.39 3 20.34 3L15 5.1L9 3L3.36 4.9C3.15 4.97 3 5.15 3 5.38V20.5C3 20.6326 3.05268 20.7598 3.14645 20.8536C3.24021 20.9473 3.36739 21 3.5 21C3.55 21 3.61 21 3.66 20.97L9 18.9L15 21L20.64 19.1C20.85 19 21 18.85 21 18.62V3.5C21 3.36739 20.9473 3.24021 20.8536 3.14645C20.7598 3.05268 20.6326 3 20.5 3Z" fill="#FFF8F2"/></svg>',
+    icon_orange: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 19L9 16.89V5L15 7.11M20.5 3C20.44 3 20.39 3 20.34 3L15 5.1L9 3L3.36 4.9C3.15 4.97 3 5.15 3 5.38V20.5C3 20.6326 3.05268 20.7598 3.14645 20.8536C3.24021 20.9473 3.36739 21 3.5 21C3.55 21 3.61 21 3.66 20.97L9 18.9L15 21L20.64 19.1C20.85 19 21 18.85 21 18.62V3.5C21 3.36739 20.9473 3.24021 20.8536 3.14645C20.7598 3.05268 20.6326 3 20.5 3Z" fill="#FF7B1A"/></svg>',
+    title: "攤位地圖",
+    url: "/info/map"
+  },
   {
-    "2024/3/2" : {
-      "舞台活動" : [event1, event2, ...],
-      "大學藍圖" : [event1, event2, ...],
-      ...
-    },
-    "2024/3/3" : {
-      "科系博覽" : [event1, event2, ...],
-      "大學藍圖" : [event1, event2, ...],
-      ...
-    },
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1" fill="#FFF8F2"/></svg>',
+    icon_orange: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1" fill="#FF7B1A"/></svg>',
+    title: "行程表",
+    url: "/info/schedule"
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18" fill="none"><path d="M12.3623 0H2.3623C1.83187 0 1.32316 0.210714 0.948091 0.585786C0.573018 0.960859 0.362305 1.46957 0.362305 2V18L7.3623 15L14.3623 18V2C14.3623 0.89 13.4623 0 12.3623 0Z" fill="#FFF8F2"/></svg>',
+    icon_orange: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18" fill="none"><path d="M12.3623 0H2.3623C1.83187 0 1.32316 0.210714 0.948091 0.585786C0.573018 0.960859 0.362305 1.46957 0.362305 2V18L7.3623 15L14.3623 18V2C14.3623 0.89 13.4623 0 12.3623 0Z" fill="#FF7B1A"/></svg>',
+    title: "我的行程",
+    url: "/info/mySchedule"
   }
-  */
-onBeforeMount(() => {
-  // init eventDict in the order above
-  eventDict.value = {
-    "2024/3/2": {
-      舞台活動: [],
-      大學藍圖: [],
-      科系博覽: [],
-      升學指南: [],
-      解憂茶軒: [],
-      沈浸式體驗: [],
-      人生岔入口: [],
-    },
-    "2024/3/3": {
-      舞台活動: [],
-      大學藍圖: [],
-      科系博覽: [],
-      升學指南: [],
-      解憂茶軒: [],
-      沈浸式體驗: [],
-      人生岔入口: [],
-    },
-  };
-
-  console.log(eventDict.value);
-
-  // add event to eventDict
-  event.map((item) => {
-    console.log(item);
-    console.log(item.date);
-    console.log(item.activity);
-    console.log(eventDict.value[item.date]);
-    console.log(eventDict.value[item.date][item.activity]);
-    eventDict.value[item.date][item.activity].push(item);
-  });
-
-  // sort event by date & start time
-  activityOrderList.map((activity) => {
-    eventDict.value["2024/3/2"][activity].sort((a, b) => {
-      return a.startTime > b.startTime ? 1 : -1;
-    });
-    eventDict.value["2024/3/3"][activity].sort((a, b) => {
-      return a.startTime > b.startTime ? 1 : -1;
-    });
-  });
-
-  // finish processing event data
-  console.log(eventDict.value);
-});
+]);
 
-// onMounted(() => {
-//   console.log(activityListRef.value);
-//   console.log("activity 0 (x,y,w,h):");
-//   console.log(activityListRef.value[0].getBoundingClientRect());
-//   console.log(activityListRef.value[4].getBoundingClientRect());
+const target = ref(0);
 
-//   // mount imported `ScheduleCardSingle` component under the activity list
-//   activityListRef.value.map((item, index) => {
-//     const pos = item.getBoundingClientRect();
-//   });
-// });
+const ChangeContent = (i) => {
+  target.value = i;
+}
 </script>
diff --git a/src/views/activities/Activities.vue b/src/views/activities/Activities.vue
index e56f036..29b41b6 100644
--- a/src/views/activities/Activities.vue
+++ b/src/views/activities/Activities.vue
@@ -1,7 +1,7 @@
 <template>
   <Breadcrumb />
-  <div v-for="(item, index) in activities" :key=index class="text-content flex lg:max-w-[1200px] max-w-[300px] lg:flex-row flex-col justify-between lg:items-start items-center mx-auto mb-20">
-    <div class="lg:w-[376px] lg:h-[222px] w-[300px] h-[200px] bg-gray-500 rounded-lg lg:mr-20 mr-2 mb-5"></div>
+  <div v-for="(item, index) in activities" :key="index" class="text-content flex lg:max-w-[1200px] max-w-[300px] lg:flex-row flex-col justify-between lg:items-start items-center mx-auto mb-20">
+    <img :src="item.img" :alt="item.title" class="lg:w-[376px] lg:h-[222px] w-[300px] h-[200px] bg-gray-500 rounded-lg lg:mr-20 mr-2 mb-5 object-cover" />
     <div class="lg:max-w-[800px] max-w-[300px]">
       <RouterLink class="font-bold text-2xl mb-4 block hover:underline" :to=item.url>{{ item.title }}</RouterLink>
       <div v-html="item.intro" class="lg:text-xl text-sm"></div>
diff --git a/src/views/activities/DepartmentExpo.vue b/src/views/activities/DepartmentExpo.vue
index 3c097b2..d72c8c7 100644
--- a/src/views/activities/DepartmentExpo.vue
+++ b/src/views/activities/DepartmentExpo.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.departmentExpo title="科系博覽"/>
+  <ActivityContent :list="activityDetails.departmentExpo" title="科系博覽" :img="`/BikeFestival17th-Frontend/public/${activities[1].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/EducationalGuide.vue b/src/views/activities/EducationalGuide.vue
index ee7edb4..b38afaa 100644
--- a/src/views/activities/EducationalGuide.vue
+++ b/src/views/activities/EducationalGuide.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.educationalGuide title="升學指南" />
+  <ActivityContent :list=activityDetails.educationalGuide title="升學指南" :img="`/BikeFestival17th-Frontend/public/${activities[3].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/ImmersiveExperience.vue b/src/views/activities/ImmersiveExperience.vue
index fba4d7d..024c16d 100644
--- a/src/views/activities/ImmersiveExperience.vue
+++ b/src/views/activities/ImmersiveExperience.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.immersiveExperience title="沉浸式體驗" />
+  <ActivityContent :list=activityDetails.immersiveExperience title="沉浸式體驗" :img="`/BikeFestival17th-Frontend/public/${activities[5].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/LifeCrossroads.vue b/src/views/activities/LifeCrossroads.vue
index c6becaa..4c88521 100644
--- a/src/views/activities/LifeCrossroads.vue
+++ b/src/views/activities/LifeCrossroads.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.lifeCrossroads title="人生叉路口"/>
+  <ActivityContent :list=activityDetails.lifeCrossroads title="人生叉路口" :img="`/BikeFestival17th-Frontend/public/${activities[4].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/MainStage.vue b/src/views/activities/MainStage.vue
index d73f654..38a1ebe 100644
--- a/src/views/activities/MainStage.vue
+++ b/src/views/activities/MainStage.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.mainStage title="主舞台〈曦瓣〉"/>
+  <ActivityContent :list=activityDetails.mainStage title="主舞台〈曦瓣〉" :img="`/BikeFestival17th-Frontend/public/${activities[0].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/UniversityBlueprint.vue b/src/views/activities/UniversityBlueprint.vue
index 23188aa..9aab6af 100644
--- a/src/views/activities/UniversityBlueprint.vue
+++ b/src/views/activities/UniversityBlueprint.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.universityBlueprint title="大學藍圖" />
+  <ActivityContent :list=activityDetails.universityBlueprint title="大學藍圖" :img="`/BikeFestival17th-Frontend/public/${activities[2].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
diff --git a/src/views/activities/UnworriedTeaHouse.vue b/src/views/activities/UnworriedTeaHouse.vue
index 3746f5b..146bd4d 100644
--- a/src/views/activities/UnworriedTeaHouse.vue
+++ b/src/views/activities/UnworriedTeaHouse.vue
@@ -1,10 +1,11 @@
 <template>
   <Breadcrumb />
-  <ActivityContent :list=activityDetails.unworriedTeaHouse title="解憂茶軒" />
+  <ActivityContent :list=activityDetails.unworriedTeaHouse title="解憂茶軒" :img="`/BikeFestival17th-Frontend/public/${activities[6].img}`"/>
 </template>
 
 <script setup>
 import ActivityContent from '../../components/ActivityContent.vue';
 import activityDetails from '../../data/activityDetails.json';
+import activities from '../../data/activities.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>
\ No newline at end of file
diff --git a/src/views/info/Map.vue b/src/views/info/Map.vue
new file mode 100644
index 0000000..c3d6422
--- /dev/null
+++ b/src/views/info/Map.vue
@@ -0,0 +1,6 @@
+<template>
+  <a href="file/example.png" download="單車17-攤位地圖.png" class="underline text-content text-xl flex items-center">點此下載（PNG）<svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none">
+  <path d="M0 10H2V15H18V10H20V15C20 16.11 19.11 17 18 17H2C0.9 17 0 16.11 0 15V10ZM10 13L15.55 7.54L14.13 6.13L11 9.25V0H9V9.25L5.88 6.13L4.46 7.55L10 13Z" fill="#5A5A5A" />
+</svg></a>
+  <img src="" alt="攤位地圖" class="w-full bg-gray-500 my-20"/>
+</template>
\ No newline at end of file
diff --git a/src/views/info/MySchedule.vue b/src/views/info/MySchedule.vue
new file mode 100644
index 0000000..41a40c8
--- /dev/null
+++ b/src/views/info/MySchedule.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file
diff --git a/src/views/info/Schedule.vue b/src/views/info/Schedule.vue
new file mode 100644
index 0000000..3ba60c9
--- /dev/null
+++ b/src/views/info/Schedule.vue
@@ -0,0 +1,163 @@
+<template>
+  <!-- center container -->
+  <div class="w-fill flex justify-center">
+    <!-- activity list -->
+    <div class="flex justify-center gap-6 max-w-[1260px]">
+      <div
+        class="text-black text-xl font-bold text-center w-40"
+        v-for="(item, index) in activityList"
+        ref="activityListRef"
+        :key="item"
+        :id="`activity-${index}`"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+
+  <!-- center container -->
+  <div class="w-fill flex justify-center">
+    <!-- time line -->
+    <div class="flex flex-col gap-[150px] max-w-[1260px]">
+      <div
+        class="w-fill flex justify-center gap-[20px]"
+        v-for="index in 10"
+        :key="index"
+      >
+        <!-- left time box -->
+        <div class="w-[65px] h-[35px] font-bold text-2xl text-primary-900">
+          {{ index + 8 }}:00
+        </div>
+        <div class="flex flex-col justify-center">
+          <div class="w-[1240px] h-0 border-[1px]"></div>
+        </div>
+        <!-- right fake box -->
+        <div class="w-[65px] h-[35px] opacity-0">fake</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-col space-y-4">
+    <ScheduleCardSingle
+      v-for="item in event"
+      :key="item.id"
+      :id="item.id"
+      :activity="item.activity"
+      :description="item.description"
+      :name="item.name"
+      :date="item.date"
+      :startTime="item.startTime"
+      :endTime="item.endTime"
+      :host="item.host"
+      :location="item.location"
+    />
+  </div>
+</template>
+
+<script setup>
+import event from "../../data/event.json";
+import ScheduleCardSingle from "../../components/ScheduleCardSingle.vue";
+import { ref, onMounted, onBeforeMount } from "vue";
+
+// the top bar from left to right
+const activityOrderList = [
+  "舞台活動",
+  "大學藍圖",
+  "科系博覽",
+  "升學指南",
+  "解憂茶軒",
+  "沈浸式體驗",
+  "人生岔入口",
+];
+
+const activityList = ref([
+  "舞台活動",
+  "大學藍圖",
+  "科系博覽",
+  "升學指南",
+  "解憂茶軒",
+  "沈浸式體驗",
+  "人生岔入口",
+]);
+
+// activityList ref list
+const activityListRef = ref([]);
+
+const eventDict = ref({});
+// process event data before mount
+/*
+  schema : 
+  {
+    "2024/3/2" : {
+      "舞台活動" : [event1, event2, ...],
+      "大學藍圖" : [event1, event2, ...],
+      ...
+    },
+    "2024/3/3" : {
+      "科系博覽" : [event1, event2, ...],
+      "大學藍圖" : [event1, event2, ...],
+      ...
+    },
+  }
+  */
+onBeforeMount(() => {
+  // init eventDict in the order above
+  eventDict.value = {
+    "2024/3/2": {
+      舞台活動: [],
+      大學藍圖: [],
+      科系博覽: [],
+      升學指南: [],
+      解憂茶軒: [],
+      沈浸式體驗: [],
+      人生岔入口: [],
+    },
+    "2024/3/3": {
+      舞台活動: [],
+      大學藍圖: [],
+      科系博覽: [],
+      升學指南: [],
+      解憂茶軒: [],
+      沈浸式體驗: [],
+      人生岔入口: [],
+    },
+  };
+
+  console.log(eventDict.value);
+
+  // add event to eventDict
+  event.map((item) => {
+    console.log(item);
+    console.log(item.date);
+    console.log(item.activity);
+    console.log(eventDict.value[item.date]);
+    console.log(eventDict.value[item.date][item.activity]);
+    eventDict.value[item.date][item.activity].push(item);
+  });
+
+  // sort event by date & start time
+  activityOrderList.map((activity) => {
+    eventDict.value["2024/3/2"][activity].sort((a, b) => {
+      return a.startTime > b.startTime ? 1 : -1;
+    });
+    eventDict.value["2024/3/3"][activity].sort((a, b) => {
+      return a.startTime > b.startTime ? 1 : -1;
+    });
+  });
+
+  // finish processing event data
+  console.log(eventDict.value);
+});
+
+// onMounted(() => {
+//   console.log(activityListRef.value);
+//   console.log("activity 0 (x,y,w,h):");
+//   console.log(activityListRef.value[0].getBoundingClientRect());
+//   console.log(activityListRef.value[4].getBoundingClientRect());
+
+//   // mount imported `ScheduleCardSingle` component under the activity list
+//   activityListRef.value.map((item, index) => {
+//     const pos = item.getBoundingClientRect();
+//   });
+// });
+</script>
\ No newline at end of file
diff --git a/src/views/info/Traffic.vue b/src/views/info/Traffic.vue
new file mode 100644
index 0000000..d81063f
--- /dev/null
+++ b/src/views/info/Traffic.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="lg:w-7/12 w-full">
+    <h2 class="text-primary font-bold lg:text-4xl text-xl py-5">開車</h2>
+    <p class="lg:text-xl text-lg text-content"><span class="font-bold">南下</span><br>走中山高速公路南下 → 於永康交流道下高速公路 → 走中正南路(西向)往台南市區 → 轉中華東路 → 達小東路口右轉(西向)直走便可抵成大校區。<br><br><span class="font-bold">北上</span><br>
+  走中山高速公路北上 → 於仁德交流道下高速公路 → 走東門路(西向)往台南市區 → 直走遇長榮路右轉(北向)可抵自強、成功、敬業、建國校區 → 東門路過長榮路遇勝利路右轉(北向)直走可抵光復校門口。</p>
+    <h2 class="text-primary font-bold lg:text-4xl text-xl py-5">大眾交通</h2>
+    <p class="lg:text-xl text-lg text-content">台南火車站下車後，往後站方向，出口正對面即為大學路，大學路直走左手邊可見光復校門口。<br>
+  搭乘客運在台南火車站前站下車者， 可經由火車站天橋前往後站，後站出口左手側即為成大光復校區。</p>
+  </div>
+  <img src="" alt="map" class="w-full lg:h-[700px] h-[300px] bg-gray-500 my-20">
+</template>
\ No newline at end of file