diff --git a/theme/src/client/components/Pagination.vue b/theme/src/client/components/Pagination.vue
index cc76ca4e..021d9fe1 100644
--- a/theme/src/client/components/Pagination.vue
+++ b/theme/src/client/components/Pagination.vue
@@ -63,23 +63,19 @@ const emit = defineEmits<{ change: [value: number] }>()
   font-weight: 500;
   line-height: 1;
   color: var(--vp-c-text-2);
+  background-color: transparent;
   border-radius: 4px;
-  transition: all var(--t-color);
+  transition: var(--t-color);
+  transition-property: color, background-color;
 }
 
 .btn.active {
-  color: var(--vp-c-bg);
-  background-color: var(--vp-c-brand-2);
-  border-color: var(--vp-c-brand-2);
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-bg-alt);
 }
 
 .btn[disabled],
-.btn[disabled]:hover {
-  color: var(--vp-c-gray-1);
-  cursor: not-allowed;
-  background-color: transparent;
-}
-
+.btn[disabled]:hover,
 .btn.more {
   color: var(--vp-c-gray-1);
   cursor: not-allowed;
@@ -92,6 +88,8 @@ const emit = defineEmits<{ change: [value: number] }>()
     background-color: var(--vp-c-bg);
     border-radius: 6px;
     box-shadow: var(--vp-shadow-1);
+    transition: var(--t-color);
+    transition-property: background-color, box-shadow;
   }
 
   .page-range .btn {
@@ -99,5 +97,9 @@ const emit = defineEmits<{ change: [value: number] }>()
     margin: 0 8px;
     font-size: 14px;
   }
+
+  .btn:not(.active):hover {
+    color: var(--vp-c-brand-1);
+  }
 }
 </style>