diff --git a/theme/src/client/components/VPSignDown.vue b/theme/src/client/components/VPSignDown.vue
index 49414891..c414032b 100644
--- a/theme/src/client/components/VPSignDown.vue
+++ b/theme/src/client/components/VPSignDown.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ThemeHomeConfig } from 'theme/src/shared/index.js'
-import { useElementSize, useWindowSize } from '@vueuse/core'
+import { useElementSize, useMediaQuery, useWindowSize } from '@vueuse/core'
 import { computed, onMounted, shallowRef } from 'vue'
 import { useData } from '../composables/index.js'
 
@@ -11,7 +11,7 @@ onMounted(() => {
   body.value = document.body
 })
 
-const { page, isDark } = useData()
+const { page } = useData()
 
 const mustHidden = computed(() => {
   if (page.value.frontmatter.signDown !== true || page.value.frontmatter.pageLayout !== 'home' || !page.value.frontmatter.config) {
@@ -30,26 +30,40 @@ const show = computed(() => {
   else
     return true
 })
+
+const is960 = useMediaQuery('(min-width: 960px)')
+function onClick() {
+  document.documentElement.scrollTo({
+    top: document.documentElement.clientHeight - (is960.value ? 64 : 0),
+    behavior: 'smooth',
+  })
+}
 </script>
 
 <template>
-  <svg v-show="!mustHidden && show" aria-label="sign down" class="vp-sign-down" :class="{ 'vp-sign-down-dark': isDark }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
-      <path d="M16.884 5.348a1.25 1.25 0 0 1 0 1.768L12 12L7.116 7.116a1.25 1.25 0 0 1 1.768-1.768L12 8.464l3.116-3.116a1.25 1.25 0 0 1 1.768 0" />
-      <path d="M16.884 12.366a1.25 1.25 0 0 1 0 1.768L12 19.018l-4.884-4.884a1.25 1.25 0 0 1 1.768-1.768L12 15.482l3.116-3.116a1.25 1.25 0 0 1 1.768 0" />
+  <svg
+    v-show="!mustHidden && show"
+    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+    viewBox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true"
+    @click="onClick"
+  >
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
+      <path d="m19 11l-7 6l-7-6" />
+      <path d="m19 5l-7 6l-7-6" opacity="0.6" />
     </g>
   </svg>
 </template>
 
 <style scoped>
-@keyframes top-bot {
-  0%,
-  100% {
-    transform: translate(0, -15px);
+@keyframes vp-sign-down {
+  0% {
+    opacity: 0.5;
+    transform: translate(-50%, -12px);
   }
 
-  50% {
-    transform: translate(0, 0);
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 0);
   }
 }
 
@@ -57,24 +71,24 @@ const show = computed(() => {
   position: absolute;
   bottom: 8px;
   left: 50%;
-  z-index: 100;
-  width: 26px;
-  height: 26px;
-  color: white;
-  opacity: 0.8;
+  z-index: 29;
+  width: 36px;
+  height: 36px;
+  color: #fff;
+  cursor: pointer;
   transform: translate(-50%, 0);
-  animation: top-bot 3s infinite;
+  animation: vp-sign-down 1.75s infinite alternate ease-out;
 }
 
-.vp-sign-down-dark {
-  color: gray;
+[data-theme="dark"] .vp-sign-down {
+  color: var(--vp-c-text-2);
 }
 
 @media (min-width: 768px) {
   .vp-sign-down {
     bottom: 10px;
-    width: 34px;
-    height: 34px;
+    width: 30px;
+    height: 30px;
   }
 }