diff --git a/src/assets/images/award/banner_mobile.mp4 b/src/assets/images/award/banner_mobile.mp4
new file mode 100644
index 0000000..2096e15
Binary files /dev/null and b/src/assets/images/award/banner_mobile.mp4 differ
diff --git a/src/assets/images/award/banner_mobile_chinese.mp4 b/src/assets/images/award/banner_mobile_chinese.mp4
new file mode 100644
index 0000000..acada72
Binary files /dev/null and b/src/assets/images/award/banner_mobile_chinese.mp4 differ
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index 36e4abd..6f16840 100644
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -1,147 +1,148 @@
 <template>
-	<div
-		class="award-page"
-		:class="{ 'is-zh': isZh }"
-	>
-		<div class="banner">
-			<video
-				:src="bannerUrl"
-				autoplay
-				muted
-				loop
-				class="banner-video"
-				playsinline
-				webkit-playsinline
-				x5-playsinline
-			></video>
-			<div
-				class="submit-btn flex flex-center"
-				@click="handleSubmitApplication"
-			>
-				<div>{{ $t('AwardsPage.submitApplication') }}</div>
-				<img
-					src="@/assets/images/award/arrow_right.png"
-					alt=""
-					class="arrow"
-				/>
-				<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
-			</div>
-		</div>
+  <div class="award-page" :class="{ 'is-zh': isZh }">
+    <div class="banner">
+      <video
+        :src="bannerUrl"
+        autoplay
+        muted
+        loop
+        class="banner-video"
+        playsinline
+        webkit-playsinline
+        x5-playsinline
+      ></video>
+      <div class="submit-btn flex flex-center" @click="handleSubmitApplication">
+        <div>{{ $t('AwardsPage.submitApplication') }}</div>
+        <img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
+        <div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
+      </div>
+    </div>
 
-		<Slogan />
-		<Bloom />
-		<TimeLine />
-		<JudgesSection />
-		<PrizesSection :is-zh="isZh" />
-		<ApplySection />
-		<SelectionSection />
-	</div>
+    <Slogan />
+    <Bloom />
+    <TimeLine />
+    <JudgesSection />
+    <PrizesSection :is-zh="isZh" />
+    <ApplySection />
+    <SelectionSection />
+  </div>
 </template>
 
 <script setup lang="ts">
-	import { ref, computed,onMounted } from 'vue'
-	import { useI18n } from 'vue-i18n'
-	import { useRouter } from 'vue-router'
-	import JudgesSection from './components/JudgesSection.vue'
-	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'
-	import Slogan from './components/Slogan.vue'
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import JudgesSection from './components/JudgesSection.vue'
+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'
+import Slogan from './components/Slogan.vue'
+import banner from '@/assets/images/award/banner.mp4'
+import bannerMobile from '@/assets/images/award/banner_mobile.mp4'
+import bannerZh from '@/assets/images/award/banner_chinese.mp4'
+import bannerZhMobile from '@/assets/images/award/banner_mobile_chinese.mp4'
+import { useIsMobile } from '@/utils/isMobile'
+const { isMobile } = useIsMobile()
+const router = useRouter()
+const { locale } = useI18n()
 
-	import banner from '@/assets/images/award/banner.mp4'
-	import bannerZh from '@/assets/images/award/banner_chinese.mp4'
+onMounted(() => {
+  router.replace('/')
+})
 
-	const router = useRouter()
-	const { locale } = useI18n()
+const isZh = computed(() => {
+  return locale.value === 'CHINESE_SIMPLIFIED'
+})
 
-	onMounted(() => {
-		router.replace('/')
-	})
+const bannerUrl = computed(() => {
+  if (isMobile.value) {
+    return isZh.value ? bannerZhMobile : bannerMobile
+  } else {
+    return isZh.value ? bannerZh : banner
+  }
+})
 
-	const isZh = computed(() => {
-		return locale.value === 'CHINESE_SIMPLIFIED'
-	})
-
-	const bannerUrl = computed(() => {
-		return isZh.value ? bannerZh : banner
-	})
-
-	const handleSubmitApplication = () => {
-		router.push('/contestants')
-	}
+const handleSubmitApplication = () => {
+  router.push('/contestants')
+}
 </script>
 
 <style lang="less" scoped>
-	.container {
-		height: 97rem;
-	}
+.container {
+  height: 97rem;
+}
 
-	.logo {
-		width: 2.4rem;
-		height: 2.4rem;
-	}
-	.banner {
-		height: 100rem;
-		// background: url('@/assets/images/award/banner.png') no-repeat;
-		// background-size: cover;
-		position: relative;
-		.banner-video {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-		.submit-btn {
-			width: 41rem;
-			height: 6.394rem;
-			line-height: 6.394rem;
-			text-align: center;
-			border-radius: 3.2rem;
-			background-color: rgba(35, 35, 35, 0.7);
-			box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
-				inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
-				inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
-			color: #fff;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 2.4rem;
-			column-gap: 3.2rem;
-			position: absolute;
-			left: 42.1rem;
-			bottom: 15.7rem;
-			backdrop-filter: blur(5px);
-			cursor: pointer;
-			.arrow {
-				width: 3.83rem;
-				height: 3.83rem;
-			}
-			.ddl {
-				position: absolute;
-				bottom: -4rem;
-				left: 0;
-				text-align: center;
-				width: 41rem;
-				font-family: 'ArialBold';
-				font-weight: 700;
-				font-size: 2rem;
-				line-height: 2.2rem;
-				color: #232323e5;
-			}
-		}
-	}
+.banner {
+  height: 100rem;
+  // background: url('@/assets/images/award/banner.png') no-repeat;
+  // background-size: cover;
+  position: relative;
+  .banner-video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .submit-btn {
+    width: 41rem;
+    height: 6.394rem;
+    line-height: 6.394rem;
+    text-align: center;
+    border-radius: 3.2rem;
+    background-color: rgba(35, 35, 35, 0.7);
+    box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
+      inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
+      inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
+    color: #fff;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 2.4rem;
+    column-gap: 3.2rem;
+    position: absolute;
+    left: 42.1rem;
+    bottom: 15.7rem;
+    backdrop-filter: blur(5px);
+    cursor: pointer;
+    .arrow {
+      width: 3.83rem;
+      height: 3.83rem;
+    }
+    .ddl {
+      position: absolute;
+      bottom: -4rem;
+      left: 0;
+      text-align: center;
+      width: 41rem;
+      font-family: 'ArialBold';
+      font-weight: 700;
+      font-size: 2rem;
+      line-height: 2.2rem;
+      color: #232323e5;
+    }
+  }
+}
 
-	.is-zh {
-		.submit-btn {
-			padding: 0 7.5rem;
-			height: 7.8rem;
-			border-radius: 7.74rem;
-			column-gap: 3.8rem;
-			// justify-content: space-between;
-			&,
-			.ddl {
-				width: 35.4rem;
-			}
-		}
-	}
+.is-zh {
+  .submit-btn {
+    padding: 0 7.5rem;
+    height: 7.8rem;
+    border-radius: 7.74rem;
+    column-gap: 3.8rem;
+    // justify-content: space-between;
+    &,
+    .ddl {
+      width: 35.4rem;
+    }
+  }
+}
+@media screen and (max-width: 1200px) {
+  .banner {
+    height: 123.4rem;
+    .submit-btn {
+      bottom: 57rem;
+			left: 6.6rem;
+    }
+  }
+}
 </style>