diff --git a/src/components/video-model.vue b/src/components/video-model.vue
index 0e6e45e..23fc7fb 100644
--- a/src/components/video-model.vue
+++ b/src/components/video-model.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import MyEvent from "@/directives/myEvents";
+import MyEvent from "@/tools/myEvents";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
diff --git a/src/directives/tween-animation.ts b/src/directives/tween.ts
similarity index 100%
rename from src/directives/tween-animation.ts
rename to src/directives/tween.ts
diff --git a/src/pages/about-us/ecosystem.vue b/src/pages/about-us/ecosystem.vue
index 1bba77d..e6ec3e9 100644
--- a/src/pages/about-us/ecosystem.vue
+++ b/src/pages/about-us/ecosystem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { ref } from "vue";
-	import MyEvent from "@/directives/myEvents";
+	import MyEvent from "@/tools/myEvents";
 	let videoUrl = 'https://code-create.com.hk/wp-content/uploads/2023/05/codec_brand_vid_16x9_ENG.mp4'
 	let videoPosterUrl = 'https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg'
 	const playVideo = ()=>{
diff --git a/src/pages/events-detail/all-events.vue b/src/pages/events-detail/all-events.vue
deleted file mode 100644
index 2d4baf9..0000000
--- a/src/pages/events-detail/all-events.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const eventList = ref([
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
-		title:'Elevate Operation Efficiency',
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-600x750.gif',
-		title:'Elevate Operation Efficiency',
-	},
-])
-defineExpose({})
-</script>
-<template>
-	<section class="mission">
-		<div class="content">
-			<h2>ALL EVENTS</h2>
-			<div class="all-events">
-				<div v-for="item in eventList" :key="item.url" class="img-item">
-					<div class="img-box">
-						<img :src="item.url" alt="">
-						<div class="line">
-							<div class="day">11</div>
-							<div class="month">May</div>
-						</div>
-					</div>
-					<h3>{{item.title}}</h3>
-					<div class="info">
-						<p>
-							2026-05-11 10:00 - 12:00
-						</p>
-					</div>
-					<a href="#" class="read-more" target="_blank">
-						Read More
-						<span class="iconfont icon-direction-right"></span>
-					</a>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-<style lang="less" scoped>
-	.mission{
-		width: 100%;
-		background-color: #f9f9f9;
-		> .content{
-			margin: 0 auto;
-			padding: 40px 0px 40px 0px;
-			max-width: 1120px;
-			> h2{
-				text-align: center;
-				margin-bottom: 50px;
-				font-size: 40px;
-				color: #222222;
-				font-family: "Poppins", Sans-serif;
-			}
-			> .all-events{
-			    display: grid;
-				grid-template-columns: repeat(3, minmax(100px, 1fr));
-				grid-gap: 20px 30px;
-				> .img-item{
-					&:hover{
-						> .img-box{
-							> img{
-								transform: scale(1.1);
-							}
-						}
-					}
-					> .img-box{
-						border-radius: 20px;
-						overflow: hidden;
-						max-width: 100%;
-						width: 100%;
-						position: relative;
-						margin-bottom: 20px;
-						> img{
-							transition: all .3s;
-							width: 100%;
-							height: 100%;
-							object-fit: cover;
-						}
-						> .line{
-							position: absolute;
-							width: 54px;
-							height: 54px;
-							left: 15px;
-							top: 15px;
-							border-radius: 50%;
-							background-color: #fff;
-							display: flex;
-							flex-direction: column;
-							align-items: center;
-							justify-content: center;
-							> .day{
-								font-family: "Poppins", Sans-serif;
-								font-size: 20px;
-								font-weight: 600;
-								line-height: 1;
-							}
-							> .month{
-								font-size: 12px;
-								line-height: 1;
-							}
-						}
-					}
-					> h3{
-						font-size: 20px;
-						font-weight: 600;
-						line-height: 1;
-						margin-bottom: 10px;
-					}
-					> .info{
-						font-size: 16px;
-						font-weight: 400;
-						line-height: 1;
-						color: #555;
-						margin-bottom: 15px;
-					}
-					.read-more{
-						color: #9A2125;
-						box-shadow: none;
-						font-size: 14px;
-						text-decoration: none;
-						position: relative;
-						&:hover{
-							&::after{
-								width: 100%;
-							}
-						}
-						&::after{
-							content: '';
-							position: absolute;
-							bottom: 0;
-							left: 0;
-							width: 0;
-							height: 1px;
-							background-color: #9A2125;
-							transition: all .3s;
-						}
-						> span{
-							margin-left: 10px;
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/src/pages/events-detail/index.vue b/src/pages/events-detail/index.vue
index e03553b..af2b483 100644
--- a/src/pages/events-detail/index.vue
+++ b/src/pages/events-detail/index.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import Swiper from './swiper.vue'
-import AllEvents from './all-events.vue'
 import listEn from './list-en.js'
 import listZhCn from './list-zh-cn.js'
 import listZhTw from './list-zh-tw.js'
@@ -22,8 +20,7 @@ defineExpose({})
 <template>
 	<div class="events">
 		<div class="placeholder"></div>
-		<Swiper />
-		<AllEvents />
+		
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/pages/events-detail/swiper.vue b/src/pages/events-detail/swiper.vue
deleted file mode 100644
index 8bb0961..0000000
--- a/src/pages/events-detail/swiper.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
-import '@kagol/vue-carousel/dist/style.css'
-//const props = defineProps({
-//})
-//const emit = defineEmits([
-//])
-let list = ref([
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-])
-const activePage = ref(0)
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-</script>
-<template>
-	<section class="events-swiper">
-		<div class="content">
-			<KagolCarousel
-				:autoplay="false"
-				:interval="1000"
-				class="events-carousel"
-			>
-				<div class="carousel-item" v-for="(item,index) in list" :key="index">
-					<div class="img-box">
-						<img :src="item.url" alt="">
-					</div>
-					<div class="text-box">
-						<h4 class="title">
-							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
-						</h4>
-						<div class="info">
-							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
-						</div>
-						<a href="#" class="read-more" target="_blank">
-							Read More
-							<span class="iconfont icon-direction-right"></span>
-						</a>
-					</div>
-				</div>
-				
-				<template #pagination="{ prevPage, nextPage }">
-					<div class="prev-page" @click="prevPage">
-						<span class="iconfont icon-direction-left"></span>
-					</div>
-					<div class="next-page" @click="nextPage">
-						<span class="iconfont icon-direction-right"></span>
-					</div>
-				</template>
-				<template #indicator></template>
-			</KagolCarousel>
-		</div>
-	</section>
-</template>
-<style lang="less" scoped>
-	.events-swiper{
-		width: 100%;
-		background-color: #f9f9f9;
-		> .content{
-			padding: 40px 0px 40px 0px;
-			margin: 0 auto;
-			max-width: 1120px;
-			position: relative;
-			> .events-carousel{
-				.carousel-item{
-					overflow: hidden;
-					cursor: pointer;
-					&:hover{
-						img{
-							transform: scale(1.1);
-						}
-					}
-					.img-box{
-						border-radius: 20px;
-						height: 600px;
-						width: 100%;
-						overflow: hidden;
-						img{
-							width: 100%;							
-							height: 100%;
-							object-fit: cover;
-							background-color: #FFF;
-							transition: all .3s;
-						}
-					}
-					> .text-box{
-						margin-top: -40px;	
-						padding: 25px;
-						width: 560px;
-						background-color: #fff;
-						position: relative;
-						z-index: 22;
-						.title{
-							font-family: Poppins, sans-serif;
-							font-weight: 600;
-							letter-spacing: 2px;
-							color: #222222;
-							text-transform: capitalize;
-							font-size: 20px;
-							margin-bottom: 9px;
-						}
-						.info{
-							color: #555;
-							font-size: 16px;
-							margin-bottom: 15px;
-						}
-						.read-more{
-							color: #9A2125;
-							box-shadow: none;
-							font-size: 14px;
-							text-decoration: none;
-							position: relative;
-							&:hover{
-
-							}
-							&::after{
-								content: '';
-								position: absolute;
-								bottom: 0;
-								left: 0;
-								width: 100%;
-								height: 2px;
-								background-color: #9A2125;
-								transition: all .3s;
-							}
-							> span{
-								margin-left: 10px;
-							}
-						}
-					}
-				}
-			}
-			.prev-page, .next-page{
-				width: 96px;
-				height: 96px;
-				margin: 0 10px;
-				border: 1px solid #e1e1e1;
-				background-color: #fff;
-				border-radius: 50%;
-				transition: all .3s;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: absolute;
-				bottom: 0;
-				> span{
-					font-size: 38px;
-				}
-				&:hover{
-					border: 1px solid #000;
-				}
-			}
-			.prev-page{
-				right: 112px;
-			}
-			.next-page{
-				right: 0;
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/src/pages/events/all-events.vue b/src/pages/events/all-events.vue
index 9158ef5..23afd91 100644
--- a/src/pages/events/all-events.vue
+++ b/src/pages/events/all-events.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
+const props = defineProps({
+	list: {
+		type: Array,
+		default: () => [],
+	},
+})
 const eventList = ref([
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
@@ -17,18 +23,18 @@ defineExpose({})
 		<div class="content">
 			<h2>ALL EVENTS</h2>
 			<div class="all-events">
-				<div v-for="item in eventList" :key="item.url" class="img-item">
+				<div v-for="item in list" :key="item.url" class="img-item">
 					<div class="img-box">
-						<img :src="item.url" alt="">
+						<img :src="item.coverUrl" alt="">
 						<div class="line">
-							<div class="day">11</div>
-							<div class="month">May</div>
+							<div class="day">{{ item?.day }}</div>
+							<div class="month">{{ item?.month }}</div>
 						</div>
 					</div>
 					<h3>{{item.title}}</h3>
 					<div class="info">
 						<p>
-							2026-05-11 10:00 - 12:00
+							{{ item?.brief }}
 						</p>
 					</div>
 					<a href="#" class="read-more" target="_blank">
@@ -119,6 +125,12 @@ defineExpose({})
 						line-height: 1;
 						color: #555;
 						margin-bottom: 15px;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						word-break: break-word; 
 					}
 					.read-more{
 						color: #9A2125;
@@ -128,6 +140,7 @@ defineExpose({})
 						position: relative;
 						&:hover{
 							&::after{
+								left: 0;
 								width: 100%;
 							}
 						}
@@ -135,9 +148,10 @@ defineExpose({})
 							content: '';
 							position: absolute;
 							bottom: 0;
-							left: 0;
-							width: 0;
-							height: 1px;
+							right: 0;
+							left: auto;
+							width: 0%;
+							height: 2px;
 							background-color: #9A2125;
 							transition: all .3s;
 						}
diff --git a/src/pages/events/index.vue b/src/pages/events/index.vue
index e03553b..7984365 100644
--- a/src/pages/events/index.vue
+++ b/src/pages/events/index.vue
@@ -17,13 +17,16 @@ const allList = computed(() => {
 	}
 	return listEn
 })
+const swiperList = computed(() => {
+	return allList.value.slice(0, 5)
+})
 defineExpose({})
 </script>
 <template>
 	<div class="events">
 		<div class="placeholder"></div>
-		<Swiper />
-		<AllEvents />
+		<Swiper :list="swiperList" />
+		<AllEvents :list="allList" />
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/pages/events/swiper.vue b/src/pages/events/swiper.vue
index 8bb0961..c362636 100644
--- a/src/pages/events/swiper.vue
+++ b/src/pages/events/swiper.vue
@@ -2,24 +2,15 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 import '@kagol/vue-carousel/dist/style.css'
-//const props = defineProps({
-//})
+const props = defineProps({
+	list: {
+		type: Array,
+		default: () => [],
+	},
+})
 //const emit = defineEmits([
 //])
-let list = ref([
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-])
+
 const activePage = ref(0)
 onMounted(()=>{
 })
@@ -37,14 +28,14 @@ defineExpose({})
 			>
 				<div class="carousel-item" v-for="(item,index) in list" :key="index">
 					<div class="img-box">
-						<img :src="item.url" alt="">
+						<img :src="item?.coverUrl" alt="">
 					</div>
 					<div class="text-box">
 						<h4 class="title">
-							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
+							{{ item?.title }}				
 						</h4>
 						<div class="info">
-							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
+							{{ item?.brief }}		
 						</div>
 						<a href="#" class="read-more" target="_blank">
 							Read More
@@ -117,6 +108,12 @@ defineExpose({})
 							color: #555;
 							font-size: 16px;
 							margin-bottom: 15px;
+							display: -webkit-box;
+							-webkit-line-clamp: 2;
+							-webkit-box-orient: vertical;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							word-break: break-word; 
 						}
 						.read-more{
 							color: #9A2125;
@@ -125,14 +122,18 @@ defineExpose({})
 							text-decoration: none;
 							position: relative;
 							&:hover{
-
+								&::after{
+									left: 0;
+									width: 100%;
+								}
 							}
 							&::after{
 								content: '';
 								position: absolute;
 								bottom: 0;
-								left: 0;
-								width: 100%;
+								right: 0;
+								left: auto;
+								width: 0%;
 								height: 2px;
 								background-color: #9A2125;
 								transition: all .3s;
diff --git a/src/pages/user-stories/user-list.vue b/src/pages/user-stories/user-list.vue
index 4d78968..a73ba85 100644
--- a/src/pages/user-stories/user-list.vue
+++ b/src/pages/user-stories/user-list.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { ref } from "vue";
-	import MyEvent from "@/directives/myEvents";
+	import MyEvent from "@/tools/myEvents";
 	const playVideo = (item)=>{
 		MyEvent.emit("playVideo",{
 			url: item.videoUrl,
diff --git a/src/directives/myEvents.ts b/src/tools/myEvents.ts
similarity index 100%
rename from src/directives/myEvents.ts
rename to src/tools/myEvents.ts