diff --git a/.changeset/fluffy-dingos-guess.md b/.changeset/fluffy-dingos-guess.md
new file mode 100644
index 000000000..efb39361d
--- /dev/null
+++ b/.changeset/fluffy-dingos-guess.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: use colorPrimaryTextHover for ConnectModal text hover style
diff --git a/.changeset/wicked-buttons-cover.md b/.changeset/wicked-buttons-cover.md
new file mode 100644
index 000000000..6e12e59bd
--- /dev/null
+++ b/.changeset/wicked-buttons-cover.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: ConnectModal get more btn link color design token bug
diff --git a/docs/global.d.ts b/docs/global.d.ts
new file mode 100644
index 000000000..1ea39606b
--- /dev/null
+++ b/docs/global.d.ts
@@ -0,0 +1 @@
+declare module '*.less';
diff --git a/docs/guide/ant-design-web3.md b/docs/guide/ant-design-web3.md
index 011c3bebd..bf8882ac8 100644
--- a/docs/guide/ant-design-web3.md
+++ b/docs/guide/ant-design-web3.md
@@ -20,7 +20,7 @@ You can use Ant Design Web3 in any of the following ways:
 
 Here are examples of using Ant Design Web3 through `@ant-design/web3-wagmi`:
 
-<code src="./demos/guide.tsx"></code>
+<code compact src="./demos/guide.tsx"></code>
 
 If you want to further try how to use Ant Design Web3 in your own project, or want to create a project based on Ant Design Web3 from 0, you can continue reading [Quick Start](quick-start.md), wish you a pleasant surfing in Web3! 🌊🌊🌊
 
diff --git a/docs/guide/ant-design-web3.zh-CN.md b/docs/guide/ant-design-web3.zh-CN.md
index c08c86df6..3f1c11d8f 100644
--- a/docs/guide/ant-design-web3.zh-CN.md
+++ b/docs/guide/ant-design-web3.zh-CN.md
@@ -20,7 +20,7 @@ Ant Design Web3 是一个基于 [Ant Design](https://ant.design/index-cn) 的 We
 
 下面是通过 `@ant-design/web3-wagmi` 的方式使用 Ant Design Web3 的例子：
 
-<code src="./demos/guide.tsx"></code>
+<code compact src="./demos/guide.tsx"></code>
 
 如果你想要进一步尝试如何在自己的项目中使用 Ant Design Web3，或者想要从 0 创建一个基于 Ant Design Web3 的项目，你可以继续阅读[快速开始](quick-start.zh-CN.md)，祝你在 Web3 冲浪愉快！🌊🌊🌊
 
diff --git a/docs/guide/demos/guide.module.less b/docs/guide/demos/guide.module.less
new file mode 100644
index 000000000..bcbfd2155
--- /dev/null
+++ b/docs/guide/demos/guide.module.less
@@ -0,0 +1,31 @@
+.connectorContainer {
+  padding: 48px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.configContainer {
+  background-color: #fcfcfc;
+  border-top: 1px solid #e4e9ec;
+  padding: 0 24px 16px 24px;
+
+  .groupTitle {
+    font-size: 16px;
+    margin-top: 16px;
+    margin-bottom: 12px;
+  }
+}
+
+.themeLabel {
+  width: 33px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 6px 0 0 9px;
+  border-radius: 4px;
+
+  div {
+    width: 24px;
+    height: 18px;
+    border-radius: 4px;
+  }
+}
diff --git a/docs/guide/demos/guide.tsx b/docs/guide/demos/guide.tsx
index de5b7228c..1ed8ebdc2 100644
--- a/docs/guide/demos/guide.tsx
+++ b/docs/guide/demos/guide.tsx
@@ -8,12 +8,16 @@ import {
   WagmiWeb3ConfigProvider,
   WalletConnect,
 } from '@ant-design/web3-wagmi';
-import { Checkbox, ConfigProvider, Divider, Radio, Select, Space } from 'antd';
+import { TinyColor } from '@ctrl/tinycolor';
+import { Col, ConfigProvider, Radio, Row, Select, Slider, Space, Switch } from 'antd';
 import { createConfig, http } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { walletConnect } from 'wagmi/connectors';
 
-import { customToken } from './tokens';
+import styles from './guide.module.less';
+import { themeList, type ThemeSetting, type ThemeValue } from './tokens';
+
+const defaultRadius = 8;
 
 const config = createConfig({
   chains: [mainnet],
@@ -28,10 +32,37 @@ const config = createConfig({
   ],
 });
 
+const ThemeLabel: React.FC<{ theme: ThemeSetting }> = ({ theme }) => {
+  return (
+    <Space
+      style={{
+        paddingTop: 6,
+      }}
+    >
+      <div
+        className={styles.themeLabel}
+        style={{
+          backgroundColor: new TinyColor(theme.color).lighten(30).toString(),
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: theme.color,
+          }}
+        />
+      </div>
+      {theme.name}
+    </Space>
+  );
+};
+
 const App: React.FC = () => {
   const [mode, setMode] = React.useState<ConnectModalProps['mode']>('simple');
   const [quickConnect, setQuickConnect] = React.useState<boolean>(false);
-  const [theme, setTheme] = React.useState<'default' | 'custom'>('default');
+  const [theme, setTheme] = React.useState<ThemeValue>('default');
+  const [radius, setRadius] = React.useState<number>(defaultRadius);
+  const currentTheme = themeList.find((t) => t.value === theme);
+
   return (
     <WagmiWeb3ConfigProvider
       eip6963={{
@@ -48,43 +79,92 @@ const App: React.FC = () => {
       ]}
       config={config}
     >
-      <Space direction="vertical">
-        <Radio.Group
-          onChange={(e) => {
-            setMode(e.target.value);
-          }}
-          value={mode}
-        >
-          <Radio value="simple">simple mode</Radio>
-          <Radio value="auto">auto mode</Radio>
-        </Radio.Group>
-        <Checkbox
-          checked={quickConnect}
-          onChange={(e) => {
-            setQuickConnect(e.target.checked);
-          }}
-        >
-          Quick Connect
-        </Checkbox>
-        <Select
-          value={theme}
-          onChange={(v) => setTheme(v)}
-          options={[
-            { value: 'default', label: 'Default Theme' },
-            { value: 'custom', label: 'Custom Theme' },
-          ]}
-        />
-      </Space>
-      <Divider />
-      <ConfigProvider theme={theme === 'custom' ? customToken : undefined}>
-        <Connector
-          modalProps={{
-            mode,
-          }}
-        >
-          <ConnectButton quickConnect={quickConnect} />
-        </Connector>
+      <ConfigProvider
+        theme={{
+          ...currentTheme?.token,
+          token: {
+            ...currentTheme?.token.token,
+            borderRadius: radius,
+          },
+        }}
+      >
+        <div className={styles.connectorContainer}>
+          <Connector
+            modalProps={{
+              mode,
+            }}
+          >
+            <ConnectButton
+              type="primary"
+              style={{
+                width: 'auto',
+              }}
+              size="large"
+              quickConnect={quickConnect}
+            />
+          </Connector>
+        </div>
       </ConfigProvider>
+      <div className={styles.configContainer}>
+        <Row>
+          <Col xs={24} sm={12}>
+            <div className={styles.groupTitle}>Basic</div>
+            <Space direction="vertical">
+              <Radio.Group
+                onChange={(e) => {
+                  setMode(e.target.value);
+                }}
+                value={mode}
+              >
+                <Radio value="simple">simple mode</Radio>
+                <Radio value="auto">auto mode</Radio>
+              </Radio.Group>
+              <Space>
+                <Switch
+                  checked={quickConnect}
+                  onChange={(checked) => {
+                    setQuickConnect(checked);
+                  }}
+                />
+                Quick Connect
+              </Space>
+            </Space>
+          </Col>
+          <Col xs={24} sm={12}>
+            <div className={styles.groupTitle}>Theme</div>
+            <Space direction="vertical">
+              <Select
+                style={{
+                  width: 300,
+                }}
+                size="large"
+                value={theme}
+                onChange={(v) => {
+                  setTheme(v);
+                  const selectedTheme = themeList.find((t) => t.value === v);
+                  setRadius(selectedTheme?.token.token?.borderRadius || defaultRadius);
+                }}
+                options={themeList.map((item) => {
+                  return { value: item.value, label: <ThemeLabel theme={item} /> };
+                })}
+              />
+              <Space>
+                Border Radius:
+                <Slider
+                  value={radius}
+                  style={{
+                    width: 190,
+                  }}
+                  defaultValue={defaultRadius}
+                  min={0}
+                  max={16}
+                  onChange={setRadius}
+                />
+              </Space>
+            </Space>
+          </Col>
+        </Row>
+      </div>
     </WagmiWeb3ConfigProvider>
   );
 };
diff --git a/docs/guide/demos/tokens.ts b/docs/guide/demos/tokens.ts
index e8bc9c40e..d760c93f0 100644
--- a/docs/guide/demos/tokens.ts
+++ b/docs/guide/demos/tokens.ts
@@ -1,7 +1,12 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import type { ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+export type ThemeValue = 'default' | 'violet' | 'dark' | 'green' | 'pink';
 
 export const customToken: ThemeConfig = {
   token: {
+    borderRadius: 16,
     wireframe: false,
     padding: 24,
     paddingSM: 16,
@@ -12,15 +17,11 @@ export const customToken: ThemeConfig = {
     fontSizeHeading5: 20,
     fontSizeHeading2: 36,
     fontSizeXL: 24,
-    borderRadius: 6,
     colorPrimary: '#8442ff',
     colorInfo: '#8442ff',
   },
   components: {
     Button: {
-      borderRadius: 16,
-      borderRadiusLG: 24,
-      borderRadiusSM: 8,
       controlHeight: 44,
       marginXS: 8,
       paddingContentHorizontal: 24,
@@ -36,7 +37,6 @@ export const customToken: ThemeConfig = {
       paddingContentHorizontalLG: 24,
       fontSizeLG: 20,
       padding: 16,
-      borderRadiusLG: 10,
       paddingContentVertical: 24,
       paddingXS: 8,
       paddingSM: 12,
@@ -55,8 +55,76 @@ export const customToken: ThemeConfig = {
       paddingLG: 24,
       paddingMD: 20,
       paddingXS: 12,
-      borderRadiusLG: 24,
-      borderRadiusSM: 10,
     },
   },
 };
+
+export type ThemeSetting = {
+  color: string;
+  value: ThemeValue;
+  name: string;
+  token: ThemeConfig;
+};
+
+// 部分参考 antd 官网的主题 https://github.com/ant-design/ant-design/blob/master/.dumi/pages/index/components/Theme/index.tsx#L305
+export const themeList: ThemeSetting[] = [
+  {
+    color: '#1677FF',
+    value: 'default',
+    name: 'Default',
+    token: {
+      token: {},
+    },
+  },
+  {
+    color: '#000',
+    value: 'dark',
+    name: 'Dark',
+    token: {
+      token: {
+        borderRadius: 2,
+        colorPrimary: '#000',
+        colorPrimaryTextHover: 'rgba(255, 255, 255, 0.8)',
+        colorLink: 'rgba(255, 255, 255, 0.75)',
+        colorText: 'rgba(255, 255, 255, 0.75)',
+      },
+      components: {
+        Button: {
+          defaultHoverColor: 'rgba(255, 255, 255, 0.8)',
+          defaultHoverBorderColor: 'rgba(255, 255, 255, 0.8)',
+        },
+      },
+      algorithm: theme.darkAlgorithm,
+    },
+  },
+  {
+    value: 'green',
+    name: 'Forest green',
+    color: '#00B96B',
+    token: {
+      token: {
+        colorPrimary: '#00B96B',
+        borderRadius: 4,
+        colorLink: '#00B96B',
+      },
+    },
+  },
+  {
+    value: 'pink',
+    name: 'Blossom',
+    color: '#ED4192',
+    token: {
+      token: {
+        colorPrimary: '#ED4192',
+        borderRadius: 16,
+        colorLink: '#ED4192',
+      },
+    },
+  },
+  {
+    color: '#8343FF',
+    value: 'violet',
+    name: 'Violet',
+    token: customToken,
+  },
+];
diff --git a/package.json b/package.json
index 2c2421763..face944a5 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@biomejs/biome": "^1.6.4",
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/cli": "^2.27.7",
+    "@ctrl/tinycolor": "^4.1.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@testing-library/react": "^16.0.0",
     "@types/lodash": "^4.17.6",
diff --git a/packages/web3/src/connect-modal/style/index.tsx b/packages/web3/src/connect-modal/style/index.tsx
index 9a1b807e7..d1f8639fa 100644
--- a/packages/web3/src/connect-modal/style/index.tsx
+++ b/packages/web3/src/connect-modal/style/index.tsx
@@ -169,14 +169,14 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
                     },
                     [`${componentCls}-plugin-tag`]: {
                       '&:not(:disabled):not(.ant-btn-disabled):hover': {
-                        color: token.colorPrimary,
-                        borderColor: token.colorPrimary,
+                        color: token.colorPrimaryTextHover,
+                        borderColor: token.colorPrimaryTextHover,
                       },
                     },
                     [`${componentCls}-qr-btn`]: {
                       '&:hover': {
-                        color: token.colorPrimary,
-                        borderColor: token.colorPrimary,
+                        color: token.colorPrimaryTextHover,
+                        borderColor: token.colorPrimaryTextHover,
                       },
                     },
                     '&:last-child': {
@@ -186,20 +186,20 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
                       background: token.hoverBg,
                       [`&:has(${componentCls}-qr-btn:not(:hover))`]: {
                         [`${componentCls}-plugin-tag:not(:disabled)`]: {
-                          color: token.colorPrimary,
-                          borderColor: token.colorPrimary,
+                          color: token.colorPrimaryTextHover,
+                          borderColor: token.colorPrimaryTextHover,
                         },
                       },
                       [`&:not(:has(${componentCls}-plugin-tag))`]: {
                         [`${componentCls}-qr-btn`]: {
-                          color: token.colorPrimary,
-                          borderColor: token.colorPrimary,
+                          color: token.colorPrimaryTextHover,
+                          borderColor: token.colorPrimaryTextHover,
                         },
                       },
                       [`&:has(${componentCls}-plugin-tag:disabled)`]: {
                         [`${componentCls}-qr-btn`]: {
-                          color: token.colorPrimary,
-                          borderColor: token.colorPrimary,
+                          color: token.colorPrimaryTextHover,
+                          borderColor: token.colorPrimaryTextHover,
                         },
                       },
                     },
@@ -246,7 +246,6 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
             background: token.simpleGuideBg,
             [`${componentCls}-simple-guide-right`]: {
               fontWeight: 400,
-              color: token.colorPrimary,
               padding: '0 15px',
             },
           },
@@ -334,7 +333,6 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
             textAlign: 'center',
             marginBlockStart: token.margin,
             ['&:hover']: {
-              color: token.colorPrimary,
               opacity: 1,
             },
           },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0cb7d08b8..2637e1c40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,6 +96,9 @@ importers:
       '@changesets/cli':
         specifier: ^2.27.7
         version: 2.27.7
+      '@ctrl/tinycolor':
+        specifier: ^4.1.0
+        version: 4.1.0
       '@ianvs/prettier-plugin-sort-imports':
         specifier: ^4.2.1
         version: 4.2.1(prettier@3.3.2)
@@ -1338,7 +1341,6 @@ packages:
   /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.3):
     resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -1435,7 +1437,6 @@ packages:
   /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.3):
     resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -3878,7 +3879,6 @@ packages:
   /@ctrl/tinycolor@4.1.0:
     resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==}
     engines: {node: '>=14'}
-    dev: false
 
   /@emotion/babel-plugin@11.11.0:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
@@ -8194,6 +8194,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -8203,6 +8204,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -8212,6 +8214,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -8221,6 +8224,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -9542,6 +9546,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -9551,6 +9556,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true