diff --git a/src/views/AwardPage/components/Bloom.vue b/src/views/AwardPage/components/Bloom.vue
new file mode 100644
index 00000000..b49bbe7f
--- /dev/null
+++ b/src/views/AwardPage/components/Bloom.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="bloom container flex flex-col align-center">
+		<div
+			class="title"
+			ref="titleRef"
+		>
+			Bloom Your Creativity
+		</div>
+
+		<div
+			class="season"
+			ref="subtitleRef"
+		>
+			Theme of 2026
+		</div>
+		<div
+			class="desc"
+			ref="textRef"
+		>
+			Where imagination meets innovation, creativity blooms. This theme celebrates
+			AI as a catalyst for fashion design, allowing your vision to flourish beyond
+			traditional boundaries. Let your ideas blossom into extraordinary designs that
+			merge human artistry with artificial intelligence.
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+		import { ref, onMounted } from 'vue'
+		import gsap from 'gsap'
+
+		const titleRef = ref<HTMLElement | null>(null)
+		const subtitleRef = ref<HTMLElement | null>(null)
+		const textRef = ref<HTMLElement | null>(null)
+
+
+</script>
+
+<style scoped lang="less">
+	.bloom {
+		padding-top: 12.8rem;
+		font-family: 'Poppins';
+		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
+		background-size: 100% 100%;
+		.title {
+			font-size: 4rem;
+			color: #232323;
+			margin-bottom: 2.4rem;
+		}
+		.logo {
+			margin-bottom: 2.2rem;
+		}
+		.season {
+			font-size: 3rem;
+			color: #c7342c;
+			margin-bottom: 6.6rem;
+		}
+		.desc {
+			font-family: 'Arial';
+			font-size: 2.8rem;
+			color: #585858;
+			text-align: center;
+			padding: 0 21.5rem;
+			line-height: 4.5rem;
+			margin-bottom: 12.3rem;
+		}
+	}
+</style>
diff --git a/src/views/AwardPage/components/PrizesSection.vue b/src/views/AwardPage/components/PrizesSection.vue
index f8823289..6c4848af 100644
--- a/src/views/AwardPage/components/PrizesSection.vue
+++ b/src/views/AwardPage/components/PrizesSection.vue
@@ -89,9 +89,11 @@
 		}
 		if (prizesRightRef.value) {
 			gsap.set(prizesRightRef.value, {
-				opacity: 0,
-				y: 40,
-				scale: 1.08
+				'opacity': 0,
+				'y': 40,
+				'scale': 1.08,
+				'--prize-row-gap': '2rem',
+				'--prize-col-gap': '2rem'
 			})
 		}
 	}
@@ -116,11 +118,13 @@
 			tl.to(
 				prizesRightRef.value,
 				{
-					opacity: 1,
-					y: 0,
-					scale: 1,
-					duration: 0.55,
-					ease: 'back.out(1.4)'
+					'opacity': 1,
+					'y': 0,
+					'scale': 1,
+					'--prize-row-gap': '4.2rem',
+					'--prize-col-gap': '4.4rem',
+					'duration': 0.55,
+					'ease': 'back.out(1.4)'
 				},
 				titleEls.length ? '-=0.15' : 0
 			)
@@ -186,8 +190,8 @@
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			grid-template-rows: repeat(2, 1fr);
-			row-gap: 4.2rem;
-			column-gap: 4.4rem;
+			row-gap: var(--prize-row-gap, 4.2rem);
+			column-gap: var(--prize-col-gap, 4.4rem);
 			// flex: 1;
 			.prize-item {
 				width: 35.5rem;
diff --git a/src/views/AwardPage/components/TimeLine.vue b/src/views/AwardPage/components/TimeLine.vue
new file mode 100644
index 00000000..ee04eea5
--- /dev/null
+++ b/src/views/AwardPage/components/TimeLine.vue
@@ -0,0 +1,280 @@
+<template>
+	<div
+		ref="containerRef"
+		class="timeline-container container flex flex-col align-center"
+	>
+		<div class="timeline-title">Competition Timeline</div>
+		<div class="desc">Shaping the Future</div>
+		<div class="timeline-point">
+			<div class="labels-row flex align-center">
+				<div
+					class="item-label flex flex-col"
+					v-for="item in points"
+					:key="'label-' + item.time"
+				>
+					<div class="main-label">{{ item.label }}</div>
+					<div
+						class="sub-label"
+						v-if="item.subLabel"
+					>
+						{{ item.subLabel }}
+					</div>
+				</div>
+			</div>
+			<!-- Icons row -->
+			<div class="icons-row flex align-center">
+				<div class="timeline-line"></div>
+				<img
+					src="@/assets/images/award/point.png"
+					class="point-icon"
+					v-for="item in points"
+					:key="'icon-' + item.time"
+				/>
+			</div>
+
+			<!-- Times row -->
+			<div class="times-row flex align-center">
+				<div
+					class="item-time"
+					v-for="item in points"
+					:key="'time-' + item.time"
+				>
+					{{ item.time }}
+				</div>
+			</div>
+			<!-- Descriptions row -->
+			<div class="descs-row flex align-center">
+				<div
+					class="item-desc flex justify-center"
+					v-for="item in points"
+					:key="'desc-' + item.time"
+				>
+					<div class="txt">
+						{{ item.desc }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { gsap } from 'gsap'
+
+	const containerRef = ref<HTMLElement | null>(null)
+	const hasAnimated = ref(false)
+
+	const points = ref([
+		{
+			label: 'Select Top 20',
+			time: 'May',
+			desc: 'Submit your design concept, mood board, and initial sketch.'
+		},
+		{
+			label: `Top 20`,
+			subLabel: 'Collections  Finalize',
+			time: 'June',
+			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+		},
+		{
+			label: `Top 3`,
+			subLabel: 'Finalists Select',
+			time: 'August',
+			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+		},
+		{
+			label: 'Award  Ceremony',
+			time: 'November',
+			desc: 'Winners revealed with media coverage and live showcase.'
+		}
+	])
+
+	const playAnimation = () => {
+		if (!containerRef.value || hasAnimated.value) return
+		const title = containerRef.value.querySelector('.timeline-title')
+		const subtitle = containerRef.value.querySelector('.desc')
+		const line = containerRef.value.querySelector('.timeline-line')
+		const timeline = containerRef.value.querySelector('.timeline-point')
+
+		const tl = gsap.timeline()
+		if (title && subtitle) {
+			tl.from([title, subtitle], {
+				scaleX: 0,
+				autoAlpha: 0,
+				transformOrigin: '50% 50%',
+				duration: 0.6,
+				stagger: 0.1,
+				ease: 'power2.out'
+			})
+		}
+
+		if (timeline) {
+			tl.fromTo(
+				timeline,
+				{
+					clipPath: 'inset(0 100% 0 0)'
+				},
+				{
+					clipPath: 'inset(0 0% 0 0)',
+					duration: 1.6,
+					ease: 'power1.out'
+				}
+			)
+		}
+
+		if (line) {
+			tl.from(
+				line,
+				{
+					scaleX: 0,
+					transformOrigin: '0% 50%',
+					duration: 1.3,
+					ease: 'power1.out'
+				},
+				'-=1.1'
+			)
+		}
+
+		hasAnimated.value = true
+	}
+
+	let observer: IntersectionObserver | null = null
+
+	onMounted(async () => {
+		await nextTick()
+		if (!containerRef.value) return
+		observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						playAnimation()
+					}
+				})
+			},
+			{ threshold: 0.3 }
+		)
+		observer.observe(containerRef.value)
+	})
+
+	onBeforeUnmount(() => {
+		if (observer && containerRef.value) {
+			observer.unobserve(containerRef.value)
+		}
+		observer = null
+	})
+</script>
+
+<style scoped lang="less">
+	.timeline-container {
+		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		padding-top: 12.8rem;
+		width: 100%;
+		color: #fff;
+		.timeline-title {
+			font-family: 'PoppinsBold';
+			font-weight: 600;
+			font-size: 4rem;
+			text-align: center;
+			vertical-align: middle;
+		}
+		.logo {
+			margin: 2.4rem 0 2.2rem 0;
+		}
+		.desc {
+			font-family: 'Arial';
+			font-size: 3rem;
+			font-weight: 400;
+			color: #f95750;
+		}
+		.timeline-point {
+			overflow: hidden;
+			will-change: clip-path;
+			flex: 1;
+			width: 100%;
+			margin-top: 12rem;
+			padding: 0 21.2rem 0 22rem;
+			position: relative;
+			z-index: 2;
+
+			.labels-row {
+				position: relative;
+				z-index: 2;
+				margin-bottom: 8rem;
+				.item-label {
+					flex: 1;
+					color: #fff;
+					font-family: 'PoppinsBold';
+					font-weight: 600;
+					font-size: 2.8rem;
+					text-align: center;
+					white-space: pre-line;
+					height: 6rem;
+					justify-content: center;
+				}
+			}
+
+			.icons-row {
+				margin-bottom: 1.6rem;
+				position: relative;
+				z-index: 2;
+				.point-icon {
+					width: 6.4rem;
+					height: 6.4rem;
+					display: block;
+					margin: 0 auto;
+					z-index: 2;
+				}
+				.timeline-line {
+					width: calc(100% + 22rem + 21.2rem);
+					left: -22rem;
+					height: 0.15rem;
+					background: linear-gradient(
+						90deg,
+						rgba(199, 52, 44, 0) 0%,
+						rgba(199, 52, 44, 0.719626) 25.96%,
+						#c7342c 51.44%,
+						rgba(199, 52, 44, 0.762376) 75.96%,
+						rgba(199, 52, 44, 0) 100%
+					);
+					position: absolute;
+					bottom: 50%;
+					transform: translateY(-50%);
+					z-index: 1;
+				}
+			}
+
+			.times-row {
+				margin-bottom: 6rem;
+				z-index: 2;
+				position: relative;
+				.item-time {
+					flex: 1;
+					color: #f95750;
+					font-family: 'Arial';
+					font-weight: 400;
+					font-size: 2.8rem;
+					line-height: 4.5rem;
+					text-align: center;
+				}
+			}
+
+			.descs-row {
+				.item-desc {
+					flex: 1;
+					.txt {
+						font-family: 'Arial';
+						font-weight: 400;
+						font-size: 2rem;
+						text-align: center;
+						color: #e0e0e0;
+						width: 31.2rem;
+						height: 10.2rem;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index 3a04df79..bc04601f 100644
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -25,95 +25,9 @@
 				<div class="line"></div>
 			</div>
 		</div>
-		<div class="bloom container flex flex-col align-center">
-			<div class="title">Bloom Your Creativity</div>
-			<img
-				src="@/assets/images/award/bloom_logo.png"
-				class="logo"
-			/>
-			<div class="season">Theme of 2026</div>
-			<div class="desc">
-				Where imagination meets innovation, creativity blooms. This theme
-				celebrates AI as a catalyst for fashion design, allowing your vision to
-				flourish beyond traditional boundaries. Let your ideas blossom into
-				extraordinary designs that merge human artistry with artificial
-				intelligence.
-			</div>
-		</div>
-		<!-- <div class="design-container container">
-			<div class="design-title limit">Design Without Borders</div>
-			<div class="limit">
-				<img
-					src="@/assets/images/award/bloom_logo.png"
-					class="logo"
-				/>
-			</div>
-			<div class="global limit">Global Opportunity</div>
-			<div class="desc">
-				Open to visionary designers across the globe. From Seoul to Singapore, New
-				York to Shanghai, we're seeking the next generation of fashion innovators
-				who dare to reimagine the future of design.
-			</div>
-		</div> -->
-		<div class="timeline-container container flex flex-col align-center">
-			<div class="timeline-title">Competition Timeline</div>
-			<!-- <img
-				src="@/assets/images/award/bloom_logo.png"
-				alt=""
-				class="logo"
-			/> -->
-			<div class="desc">Shaping the Future</div>
-			<div class="timeline-point">
-				<div class="labels-row flex align-center">
-					<div
-						class="item-label flex flex-col"
-						v-for="item in points"
-						:key="'label-' + item.time"
-					>
-						<div class="main-label">{{ item.label }}</div>
-						<div
-							class="sub-label"
-							v-if="item.subLabel"
-						>
-							{{ item.subLabel }}
-						</div>
-					</div>
-				</div>
-				<!-- Icons row -->
-				<div class="icons-row flex align-center">
-					<div class="timeline-line"></div>
-					<img
-						src="@/assets/images/award/point.png"
-						class="point-icon"
-						v-for="item in points"
-						:key="'icon-' + item.time"
-					/>
-				</div>
 
-				<!-- Times row -->
-				<div class="times-row flex align-center">
-					<div
-						class="item-time"
-						v-for="item in points"
-						:key="'time-' + item.time"
-					>
-						{{ item.time }}
-					</div>
-				</div>
-				<!-- Descriptions row -->
-				<div class="descs-row flex align-center">
-					<div
-						class="item-desc flex justify-center"
-						v-for="item in points"
-						:key="'desc-' + item.time"
-					>
-						<div class="txt">
-							{{ item.desc }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<Bloom />
+		<TimeLine />
 		<JudgesSection />
 		<PrizesSection />
 		<ApplySection />
@@ -128,6 +42,8 @@
 	import SelectionSection from './components/SelectionSection.vue'
 	import ApplySection from './components/ApplySection.vue'
 	import PrizesSection from './components/PrizesSection.vue'
+	import TimeLine from './components/TimeLine.vue'
+	import Bloom from './components/Bloom.vue'
 
 	const router = useRouter()
 
@@ -153,31 +69,6 @@
 			label: 'for finalists to attend\naward ceremony'
 		}
 	])
-
-	const points = ref([
-		{
-			label: 'Select Top 20',
-			time: 'May',
-			desc: 'Submit your design concept, mood board, and initial sketch.'
-		},
-		{
-			label: `Top 20`,
-			subLabel: 'Collections  Finalize',
-			time: 'June',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
-		},
-		{
-			label: `Top 3`,
-			subLabel: 'Finalists Select',
-			time: 'August',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
-		},
-		{
-			label: 'Award  Ceremony',
-			time: 'November',
-			desc: 'Winners revealed with media coverage and live showcase.'
-		}
-	])
 </script>
 
 <style lang="less" scoped>
@@ -264,197 +155,4 @@
 			}
 		}
 	}
-	.bloom {
-		padding-top: 12.8rem;
-		font-family: 'Poppins';
-		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
-		background-size: 100% 100%;
-		.title {
-			font-size: 4rem;
-			color: #232323;
-			margin-bottom: 2.4rem;
-		}
-		.logo {
-			margin-bottom: 2.2rem;
-		}
-		.season {
-			font-size: 3rem;
-			color: #c7342c;
-			margin-bottom: 6.6rem;
-		}
-		.desc {
-			font-family: 'Arial';
-			font-size: 2.8rem;
-			color: #585858;
-			text-align: center;
-			padding: 0 21.5rem;
-			line-height: 4.5rem;
-			margin-bottom: 12.3rem;
-		}
-	}
-	// .design-container {
-	// 	background: url('@/assets/images/award/design_bg.png') no-repeat;
-	// 	background-size: 100% 100%;
-	// 	padding-left: 21.5rem;
-	// 	padding-top: 16rem;
-	// 	.limit {
-	// 		width: 48.4rem;
-	// 		text-align: center;
-	// 	}
-	// 	.design-title {
-	// 		color: #fff;
-	// 		font-size: 4rem;
-	// 		font-weight: 600;
-	// 		font-family: 'Poppins';
-	// 		font-style: SemiBold;
-	// 		vertical-align: middle;
-	// 		text-transform: capitalize;
-	// 	}
-	// 	.logo {
-	// 		margin-top: 2.4rem;
-	// 		margin-bottom: 2.1rem;
-	// 	}
-	// 	.global {
-	// 		font-family: 'Poppins';
-	// 		font-size: 3rem;
-	// 		color: #f95750;
-	// 		margin-bottom: 19.8rem;
-	// 	}
-	// 	.desc {
-	// 		font-family: 'Arial';
-	// 		font-weight: 400;
-	// 		font-size: 2.8rem;
-	// 		color: #e0e0e0;
-	// 		width: 54rem;
-	// 	}
-	// }
-	.timeline-container {
-		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
-		background-size: 100% 100%;
-		position: relative;
-		padding-top: 12.8rem;
-		width: 100%;
-		color: #fff;
-		.timeline-title {
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-			text-align: center;
-			vertical-align: middle;
-		}
-		.logo {
-			margin: 2.4rem 0 2.2rem 0;
-		}
-		.desc {
-			font-family: 'Arial';
-			font-size: 3rem;
-			font-weight: 400;
-			color: #f95750;
-		}
-		.timeline-point {
-			flex: 1;
-			width: 100%;
-			margin-top: 12rem;
-			padding: 0 21.2rem 0 22rem;
-			position: relative;
-			z-index: 2;
-
-			.labels-row {
-				position: relative;
-				z-index: 2;
-				margin-bottom: 8rem;
-				.item-label {
-					flex: 1;
-					color: #fff;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.8rem;
-					text-align: center;
-					white-space: pre-line;
-					height: 6rem;
-					justify-content: center;
-				}
-			}
-
-			.icons-row {
-				margin-bottom: 1.6rem;
-				position: relative;
-				z-index: 2;
-				.point-icon {
-					width: 6.4rem;
-					height: 6.4rem;
-					display: block;
-					margin: 0 auto;
-					z-index: 2;
-				}
-				.timeline-line {
-					width: calc(100% + 22rem + 21.2rem);
-					left: -22rem;
-					height: 0.15rem;
-					background: linear-gradient(
-						90deg,
-						rgba(199, 52, 44, 0) 0%,
-						rgba(199, 52, 44, 0.719626) 25.96%,
-						#c7342c 51.44%,
-						rgba(199, 52, 44, 0.762376) 75.96%,
-						rgba(199, 52, 44, 0) 100%
-					);
-					position: absolute;
-					bottom: 50%;
-					transform: translateY(-50%);
-					z-index: 1;
-				}
-			}
-
-			.times-row {
-				margin-bottom: 6rem;
-				z-index: 2;
-				position: relative;
-				.item-time {
-					flex: 1;
-					color: #f95750;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2.8rem;
-					line-height: 4.5rem;
-					text-align: center;
-				}
-			}
-
-			.descs-row {
-				.item-desc {
-					flex: 1;
-					.txt {
-						font-family: 'Arial';
-						font-weight: 400;
-						font-size: 2rem;
-						text-align: center;
-						color: #e0e0e0;
-						width: 31.2rem;
-						height: 10.2rem;
-					}
-				}
-			}
-		}
-	}
-
-	.footer {
-		height: 10rem;
-		padding-left: 21.5rem;
-		padding-right: 22rem;
-		background-color: #232323;
-		.social-list {
-			column-gap: 2rem;
-			img {
-				width: 2rem;
-				height: 2rem;
-			}
-		}
-		.copyright {
-			color: #fff;
-			font-family: 'Arial';
-			font-weight: 400;
-			font-size: 1.2rem;
-		}
-	}
 </style>