diff --git a/packages/console/src/components/Pagination/index.module.scss b/packages/console/src/components/Pagination/index.module.scss
index b5c9b0bdc..6a932b9c2 100644
--- a/packages/console/src/components/Pagination/index.module.scss
+++ b/packages/console/src/components/Pagination/index.module.scss
@@ -14,14 +14,20 @@
 
     .button {
       border-radius: 6px;
-      min-width: 32px;
+      min-width: 28px;
       padding: 0 6px;
-      height: 32px;
+      height: 28px;
       text-overflow: unset;
+      border: 1px solid var(--color-border);
 
       > span {
         margin: 0 auto;
       }
+
+      &.active {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
     }
 
     &.disabled {
diff --git a/packages/console/src/components/Pagination/index.tsx b/packages/console/src/components/Pagination/index.tsx
index 7451696ff..c5e7ffebd 100644
--- a/packages/console/src/components/Pagination/index.tsx
+++ b/packages/console/src/components/Pagination/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import ReactPaginate from 'react-paginate';
 
@@ -22,7 +23,7 @@ const Pagination = ({ pageIndex, pageCount, onChange }: Props) => {
       pageLabelBuilder={(page: number) => (
         <Button
           type={page === pageIndex ? 'outline' : 'default'}
-          className={styles.button}
+          className={classNames(styles.button, page === pageIndex && styles.active)}
           size="small"
           title={<DangerousRaw>{page}</DangerousRaw>}
         />