diff --git a/app/components/SiteFooter.vue b/app/components/SiteFooter.vue
index e4633ea..9cc608a 100644
--- a/app/components/SiteFooter.vue
+++ b/app/components/SiteFooter.vue
@@ -75,7 +75,7 @@ const year = new Date().getFullYear()
 
 <style scoped>
 .footer {
-  background: #000;
+  background: #4b5563;
   padding: 0;
 }
 </style>
diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index bf2d928..8c40190 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -35,9 +35,9 @@
         <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
           <NuxtLink to="/" class="navbar-brand">
             <img class="navbar-logo" :src="logoUrl" :alt="siteName" />
-<!--            <span class="navbar-brand-name">-->
-<!--              {{ siteName }}-->
-<!--            </span>-->
+            <span class="navbar-brand-name">
+              {{ siteName }}
+            </span>
           </NuxtLink>
           <nav class="nav hidden md:flex">
             <template v-for="item in navItems" :key="item.key">
@@ -377,6 +377,7 @@ const todayText = computed(() => {
 }
 
 .navbar-brand-name {
+  color: #e7ffe5;
   font-size: 15px;
   letter-spacing: 0.02em;
   white-space: nowrap;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 033831b..e72fddc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,6 +4,23 @@
       <div class="grid grid-cols-12 gap-6">
         <div class="col-span-12">
           <div class="panel hero">
+            <div class="hero-bg" aria-hidden="true">
+              <ClientOnly>
+                <a-carousel class="hero-carousel" autoplay effect="fade" :autoplaySpeed="4500" :dots="false">
+                  <div
+                    v-for="src in heroSlides"
+                    :key="src"
+                    class="hero-slide"
+                    :style="{ backgroundImage: `url(${src})` }"
+                  ></div>
+                </a-carousel>
+                <template #fallback>
+                  <div class="hero-carousel">
+                    <div class="hero-slide" :style="{ backgroundImage: `url(${heroSlides[0]})` }"></div>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
             <div class="hero-inner">
 <!--              <div class="hero-badge">OFFICIAL</div>-->
 <!--              <div class="hero-title">{{ COMPANY.projectName }}</div>-->
@@ -140,6 +157,11 @@ usePageSeo({
   path: '/'
 })
 
+const heroSlides = [
+  'https://file-cloud.yst.com.cn/photo/website/2024/11/28/5a5cc07336224e54a84561c80899bcac.jpg',
+  'https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg'
+]
+
 function splitScope(text: string) {
   return text
     .split(/[；;]+/g)
@@ -253,14 +275,37 @@ function scrollToCompany() {
 }
 
 .hero {
+  position: relative;
   min-height: 360px;
-  background: url('https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg');
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.hero-carousel {
+  height: 100%;
+}
+
+.hero-slide {
+  height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
+.hero-carousel :deep(.slick-list),
+.hero-carousel :deep(.slick-track),
+.hero-carousel :deep(.slick-slide),
+.hero-carousel :deep(.slick-slide > div) {
+  height: 100%;
+}
+
 .hero-inner {
+  position: relative;
+  z-index: 1;
   height: 100%;
   padding: 28px;
   display: flex;