diff --git a/app/components/Carousel.vue b/app/components/Carousel.vue
index 631c4fe..7a34254 100644
--- a/app/components/Carousel.vue
+++ b/app/components/Carousel.vue
@@ -3,6 +3,7 @@
     <div class="carousel-panel" :style="{ height: heightCss }">
       <ClientOnly>
         <a-carousel
+          ref="carouselRef"
           class="carousel"
           :autoplay="autoplayEnabled"
           :autoplay-speed="autoplaySpeed"
@@ -10,7 +11,12 @@
           :effect="effect"
           :style="{ height: heightCss }"
         >
-          <div v-for="it in normalizedItems" :key="it.src" class="carousel-item" :style="{ height: heightCss }">
+          <div
+            v-for="(it, idx) in normalizedItems"
+            :key="`${it.src}::${idx}`"
+            class="carousel-item"
+            :style="{ height: heightCss }"
+          >
             <NuxtLink
               v-if="it.href && !isExternal(it.href)"
               :to="it.href"
@@ -33,6 +39,25 @@
           </div>
         </a-carousel>
 
+        <button
+          v-if="showNav"
+          type="button"
+          class="carousel-nav carousel-nav-left"
+          aria-label="prev"
+          @click.prevent.stop="prev"
+        >
+          <span aria-hidden="true">&lsaquo;</span>
+        </button>
+        <button
+          v-if="showNav"
+          type="button"
+          class="carousel-nav carousel-nav-right"
+          aria-label="next"
+          @click.prevent.stop="next"
+        >
+          <span aria-hidden="true">&rsaquo;</span>
+        </button>
+
         <template #fallback>
           <img class="carousel-img" :style="{ height: heightCss }" :src="fallbackSrc" alt="slide" />
         </template>
@@ -62,23 +87,41 @@ const props = withDefaults(
   }
 )
 
+type AntdCarouselExpose = {
+  next: () => void
+  prev: () => void
+  goTo: (slide: number, dontAnimate?: boolean) => void
+}
+
+const carouselRef = ref<AntdCarouselExpose | null>(null)
+
 const heightCss = computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height))
 
 const normalizedItems = computed(() => (props.items || []).filter((it) => it && typeof it.src === 'string' && it.src))
 
 const autoplayEnabled = computed(() => normalizedItems.value.length > 1)
 const dotsEnabled = computed(() => normalizedItems.value.length > 1)
+const showNav = computed(() => normalizedItems.value.length > 1)
 
 const fallbackSrc = computed(() => normalizedItems.value[0]?.src || '')
 
 function isExternal(href: string) {
   return /^https?:\/\//i.test(href)
 }
+
+function next() {
+  carouselRef.value?.next()
+}
+
+function prev() {
+  carouselRef.value?.prev()
+}
 </script>
 
 <style scoped>
 .carousel-panel {
   background: #fff;
+  position: relative;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
 }
@@ -109,4 +152,39 @@ function isExternal(href: string) {
 .carousel :deep(.slick-slide > div) {
   height: 100%;
 }
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+  width: 42px;
+  height: 42px;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 0.95);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.carousel-nav:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.carousel-nav-left {
+  left: 12px;
+}
+
+.carousel-nav-right {
+  right: 12px;
+}
+
+.carousel-nav span {
+  font-size: 26px;
+  line-height: 1;
+}
 </style>
diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index 411c0df..b9ac94d 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -30,10 +30,10 @@
       </div>
     </div>
 
-    <a-affix :offset-top="0">
+    <a-affix :offset-top="0" @change="onAffixChange">
       <div class="navbar">
-        <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
-          <NuxtLink to="/" class="navbar-brand">
+        <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-20 px-">
+          <NuxtLink v-if="isAffixed" to="/" class="navbar-brand" :class="{ 'navbar-brand-hidden': !isAffixed }">
             <img class="navbar-logo" :src="logoUrl" :alt="siteName" />
             <span class="navbar-brand-name">
               {{ siteName }}
@@ -119,6 +119,7 @@ import { COMPANY } from '@/config/company'
 
 const route = useRoute()
 const open = ref(false)
+const isAffixed = ref(false)
 
 type HeaderNavItem = {
   key: string
@@ -281,6 +282,10 @@ const todayText = computed(() => {
   const pad = (n: number) => String(n).padStart(2, '0')
   return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 星期${week}`
 })
+
+function onAffixChange(affixed: boolean) {
+  isAffixed.value = affixed
+}
 </script>
 
 <style scoped>
@@ -362,11 +367,19 @@ const todayText = computed(() => {
 .navbar-brand {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
   height: 48px;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.95);
   font-weight: 700;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.navbar-brand-hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-4px);
 }
 
 .navbar-logo {
@@ -392,7 +405,7 @@ const todayText = computed(() => {
 
 .nav {
   display: flex;
-  gap: 2px;
+  gap: 10px;
 }
 
 .nav-link {