diff --git a/apps/admin/app/dashboard/payment/page.tsx b/apps/admin/app/dashboard/payment/page.tsx
index 92c25e2..0861778 100644
--- a/apps/admin/app/dashboard/payment/page.tsx
+++ b/apps/admin/app/dashboard/payment/page.tsx
@@ -1,30 +1,81 @@
+import { PinContainer } from '@shadcn/ui/3d-pin';
+import { Label } from '@shadcn/ui/label';
+import { Separator } from '@shadcn/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@shadcn/ui/tooltip';
+import { getTranslations } from 'next-intl/server';
+import Image from 'next/legacy/image';
+import Link from 'next/link';
 import AlipayF2F from './alipayf2f';
 import Epay from './epay';
 import StripeAlipay from './stripe-alipay';
 import StripeWeChatPay from './stripe-wechat-pay';
 
-export default function Page() {
+export default async function Page() {
+  const response = await (await fetch('https://pay.ppanel.dev/')).json();
+  const t = await getTranslations('payment');
   return (
-    <Tabs defaultValue='Epay'>
-      <TabsList>
-        <TabsTrigger value='Epay'>Epay</TabsTrigger>
-        <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
-        <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
-        <TabsTrigger value='AlipayF2F'>AlipayF2F</TabsTrigger>
-      </TabsList>
-      <TabsContent value='Epay'>
-        <Epay />
-      </TabsContent>
-      <TabsContent value='Stripe-Alipay'>
-        <StripeAlipay />
-      </TabsContent>
-      <TabsContent value='Strip-WeChatPay'>
-        <StripeWeChatPay />
-      </TabsContent>
-      <TabsContent value='AlipayF2F'>
-        <AlipayF2F />
-      </TabsContent>
-    </Tabs>
+    <>
+      <Tabs defaultValue='Epay'>
+        <TabsList className='h-full flex-wrap'>
+          <TabsTrigger value='Epay'>Epay</TabsTrigger>
+          <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
+          <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
+          <TabsTrigger value='AlipayF2F'>AlipayF2F</TabsTrigger>
+        </TabsList>
+        <TabsContent value='Epay'>
+          <Epay />
+        </TabsContent>
+        <TabsContent value='Stripe-Alipay'>
+          <StripeAlipay />
+        </TabsContent>
+        <TabsContent value='Strip-WeChatPay'>
+          <StripeWeChatPay />
+        </TabsContent>
+        <TabsContent value='AlipayF2F'>
+          <AlipayF2F />
+        </TabsContent>
+      </Tabs>
+      {response?.list?.length > 0 && (
+        <TooltipProvider>
+          <Separator />
+          <div className='ml-2 mt-4 flex flex-wrap items-center gap-4'>
+            <Label className='w-full'>{t('payForRecommendations')}</Label>
+            {response.list?.map((item) => {
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>
+                    <Link href={item.href} className='flex flex-col flex-wrap items-center gap-2'>
+                      <Image src={item.logo} width={40} height={40} className='rounded-full' />
+                      {item.name}
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent className='bg-transparent pb-10'>
+                    <PinContainer title={item.name} href={item.href}>
+                      <div className='flex h-[20rem] w-[20rem] basis-full flex-col p-4 tracking-tight sm:basis-1/2'>
+                        <h3 className='text-foreground max-w-xs pb-2 text-base font-bold'>
+                          {item.name}
+                        </h3>
+                        <div className='mb-4 !p-0 text-base font-normal'>
+                          <span className='text-muted-foreground'>{item.description}</span>
+                        </div>
+                        <div className='mt-4 flex w-full flex-1 rounded-lg'>
+                          <Image
+                            src={item.image}
+                            width={288}
+                            height={200}
+                            className='h-auto w-full'
+                          />
+                        </div>
+                      </div>
+                    </PinContainer>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        </TooltipProvider>
+      )}
+    </>
   );
 }
diff --git a/apps/admin/locales/en-US/payment.json b/apps/admin/locales/en-US/payment.json
index 5a8f965..2444246 100644
--- a/apps/admin/locales/en-US/payment.json
+++ b/apps/admin/locales/en-US/payment.json
@@ -27,6 +27,7 @@
   "key": "KEY",
   "notifyUrl": "Custom Notification Domain (optional)",
   "notifyUrlDescription": "Gateway notifications will be sent to this domain",
+  "payForRecommendations": "Pay for Recommendations",
   "pid": "PID",
   "saveSuccess": "Save Successful",
   "showName": "Display Name",
diff --git a/apps/admin/locales/zh-CN/payment.json b/apps/admin/locales/zh-CN/payment.json
index 2f23626..2087c7d 100644
--- a/apps/admin/locales/zh-CN/payment.json
+++ b/apps/admin/locales/zh-CN/payment.json
@@ -27,6 +27,7 @@
   "key": "KEY",
   "notifyUrl": "自定义通知域（可选）",
   "notifyUrlDescription": "网关通知将发送到此域",
+  "payForRecommendations": "支付推荐",
   "pid": "PID",
   "saveSuccess": "保存成功",
   "showName": "显示名称",
diff --git a/packages/shadcn/src/components/ui/floating-dock.tsx b/packages/shadcn/src/components/ui/floating-dock.tsx
index 42f91f4..d745b64 100644
--- a/packages/shadcn/src/components/ui/floating-dock.tsx
+++ b/packages/shadcn/src/components/ui/floating-dock.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+'use client';
 /**
  * Note: Use position fixed according to your needs
  * Desktop navbar is better positioned at the bottom