From 50bc53a1f546378b56c0a2f4e2bdb13234b5b610 Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Tue, 18 Nov 2025 20:07:17 +0800
Subject: [PATCH] Fix: Modify the personal center style #10703 (#11347)

### What problem does this PR solve?

Fix: Modify the personal center style

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/dynamic-form.tsx           |  4 +-
 .../components/originui/password-input.tsx    |  5 +--
 .../originui/select-with-search.tsx           |  4 +-
 web/src/components/ui/input.tsx               |  2 +-
 web/src/components/ui/textarea.tsx            |  2 +-
 web/src/components/ui/tooltip.tsx             |  4 +-
 web/src/hooks/llm-hooks.tsx                   |  5 ++-
 web/src/locales/en.ts                         |  2 +
 web/src/locales/zh.ts                         |  2 +
 .../data-source/add-datasource-modal.tsx      | 12 +++---
 .../component/added-source-card.tsx           | 21 +++++++----
 web/src/pages/user-setting/mcp/index.tsx      |  1 +
 .../pages/user-setting/mcp/mcp-operation.tsx  | 37 +++++++++----------
 web/src/pages/user-setting/profile/index.tsx  | 20 +++++-----
 .../setting-model/components/modal-card.tsx   | 14 ++++---
 .../components/system-setting.tsx             |  3 +-
 .../setting-model/components/un-add-model.tsx |  5 ++-
 .../setting-team/tenant-table.tsx             |  2 +-
 .../user-setting/setting-team/user-table.tsx  |  2 +-
 19 files changed, 79 insertions(+), 68 deletions(-)

diff --git a/web/src/components/dynamic-form.tsx b/web/src/components/dynamic-form.tsx
index 5c78a1dcb..41a57ea92 100644
--- a/web/src/components/dynamic-form.tsx
+++ b/web/src/components/dynamic-form.tsx
@@ -496,7 +496,7 @@ const DynamicForm = {
                     <Textarea
                       {...finalFieldProps}
                       placeholder={field.placeholder}
-                      className="resize-none"
+                      // className="resize-none"
                     />
                   );
                 }}
@@ -544,7 +544,7 @@ const DynamicForm = {
                 render={({ field: formField }) => (
                   <FormItem
                     className={cn('flex items-center w-full', {
-                      'flex-row items-start space-x-3 space-y-0':
+                      'flex-row items-center space-x-3 space-y-0':
                         !field.horizontal,
                     })}
                   >
diff --git a/web/src/components/originui/password-input.tsx b/web/src/components/originui/password-input.tsx
index 28717c443..891a0dfea 100644
--- a/web/src/components/originui/password-input.tsx
+++ b/web/src/components/originui/password-input.tsx
@@ -2,7 +2,6 @@
 
 'use client';
 
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
 import React, { useId, useState } from 'react';
 import { Input, InputProps } from '../ui/input';
 
@@ -33,11 +32,11 @@ export default React.forwardRef<HTMLInputElement, InputProps>(
             aria-pressed={isVisible}
             aria-controls="password"
           >
-            {isVisible ? (
+            {/* {isVisible ? (
               <EyeOffIcon size={16} aria-hidden="true" />
             ) : (
               <EyeIcon size={16} aria-hidden="true" />
-            )}
+            )} */}
           </button>
         </div>
       </div>
diff --git a/web/src/components/originui/select-with-search.tsx b/web/src/components/originui/select-with-search.tsx
index 595844f49..2d095f157 100644
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@@ -140,7 +140,7 @@ export const SelectWithSearch = forwardRef<
             ref={ref}
             disabled={disabled}
             className={cn(
-              '!bg-bg-input hover:bg-background border-input w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
+              '!bg-bg-input hover:bg-background border-border-button w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
               triggerClassName,
             )}
           >
@@ -166,7 +166,7 @@ export const SelectWithSearch = forwardRef<
               )}
               <ChevronDownIcon
                 size={16}
-                className="text-muted-foreground/80 shrink-0 ml-2"
+                className="text-text-disabled shrink-0 ml-2"
                 aria-hidden="true"
               />
             </div>
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 7264f98ca..ab72c828b 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -41,7 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={isPasswordInput && showPassword ? 'text' : type}
         className={cn(
           'peer/input',
-          'flex h-8 w-full rounded-md border-0.5 border-input bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
+          'flex h-8 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
           'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
           'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
index e99c19ffa..4ecc5e704 100644
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
           className,
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index be90ee314..13dd1052b 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -4,7 +4,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
-import { Info } from 'lucide-react';
+import { CircleQuestionMark } from 'lucide-react';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -39,7 +39,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
           e.preventDefault(); // Prevent clicking the tooltip from triggering form save
         }}
       >
-        <Info className="size-3 ml-2" />
+        <CircleQuestionMark className="size-3 ml-2" />
       </TooltipTrigger>
       <TooltipContent>{tooltip}</TooltipContent>
     </Tooltip>
diff --git a/web/src/hooks/llm-hooks.tsx b/web/src/hooks/llm-hooks.tsx
index 274f31ae0..d3e38427c 100644
--- a/web/src/hooks/llm-hooks.tsx
+++ b/web/src/hooks/llm-hooks.tsx
@@ -61,9 +61,10 @@ function buildLlmOptionsWithIcon(x: IThirdOAIModel) {
       <div className="flex items-center justify-center gap-6">
         <LlmIcon
           name={getLLMIconName(x.fid, x.llm_name)}
-          width={26}
-          height={26}
+          width={24}
+          height={24}
           size={'small'}
+          imgClass="size-6"
         />
         <span>{getRealModelName(x.llm_name)}</span>
       </div>
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 8d2f196d7..1e560e74b 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      confirm: 'Confirm',
       back: 'Back',
       noResults: 'No results.',
       selectPlaceholder: 'select value',
@@ -694,6 +695,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       tocEnhanceTip: ` During the parsing of the document, table of contents information was generated (see the 'Enable Table of Contents Extraction' option in the General method). This allows the large model to return table of contents items relevant to the user's query, thereby using these items to retrieve related chunks and apply weighting to these chunks during the sorting process. This approach is derived from mimicking the behavioral logic of how humans search for knowledge in books.`,
     },
     setting: {
+      edit: 'Edit',
       cropTip:
         'Drag the selection area to choose the cropping position of the image, and scroll to zoom in/out',
       cropImage: 'Crop image',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 4919dfa8a..bff10d618 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      confirm: '确定',
       back: '返回',
       noResults: '无结果。',
       selectPlaceholder: '请选择',
@@ -684,6 +685,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
     },
     setting: {
+      edit: '编辑',
       cropTip: '拖动选区可以选择要图片的裁剪位置，滚动可以放大/缩小选区',
       cropImage: '剪裁图片',
       selectModelPlaceholder: '请选择模型',
diff --git a/web/src/pages/user-setting/data-source/add-datasource-modal.tsx b/web/src/pages/user-setting/data-source/add-datasource-modal.tsx
index 1bc39c4e3..8ac94d857 100644
--- a/web/src/pages/user-setting/data-source/add-datasource-modal.tsx
+++ b/web/src/pages/user-setting/data-source/add-datasource-modal.tsx
@@ -40,17 +40,17 @@ const AddDataSourceModal = ({
   return (
     <Modal
       title={
-        <div className="flex flex-col">
-          {sourceData?.icon}
+        <div className="flex flex-col gap-4">
+          <div className="size-6">{sourceData?.icon}</div>
           {t('setting.addDataSourceModalTital', { name: sourceData?.name })}
         </div>
       }
       open={visible || false}
       onOpenChange={(open) => !open && hideModal?.()}
       // onOk={() => handleOk()}
-      okText={t('common.ok')}
+      okText={t('common.confirm')}
       cancelText={t('common.cancel')}
-      showfooter={false}
+      footer={<div className="p-4"></div>}
     >
       <DynamicForm.Root
         fields={fields}
@@ -63,7 +63,7 @@ const AddDataSourceModal = ({
           ] as FieldValues
         }
       >
-        <div className="flex items-center justify-end w-full gap-2 py-4">
+        <div className=" absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
           <DynamicForm.CancelButton
             handleCancel={() => {
               hideModal?.();
@@ -71,7 +71,7 @@ const AddDataSourceModal = ({
           />
           <DynamicForm.SavingButton
             submitLoading={loading || false}
-            buttonText={t('common.ok')}
+            buttonText={t('common.confirm')}
             submitFunc={(values: FieldValues) => {
               handleOk(values);
             }}
diff --git a/web/src/pages/user-setting/data-source/component/added-source-card.tsx b/web/src/pages/user-setting/data-source/component/added-source-card.tsx
index bbd6fe84c..660c4f17a 100644
--- a/web/src/pages/user-setting/data-source/component/added-source-card.tsx
+++ b/web/src/pages/user-setting/data-source/component/added-source-card.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Settings, Trash2 } from 'lucide-react';
@@ -32,17 +33,19 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
           >
             <div className="text-sm text-text-secondary ">{item.name}</div>
             <div className="text-sm text-text-secondary  flex gap-2">
-              <Settings
-                className="cursor-pointer"
-                size={14}
+              <Button
+                variant={'ghost'}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-bg-card"
                 onClick={() => {
                   toDetail(item.id);
                 }}
-              />
+              >
+                <Settings size={14} />
+              </Button>
               {/* <ConfirmDeleteDialog onOk={() => handleDelete(item)}> */}
-              <Trash2
-                className="cursor-pointer"
-                size={14}
+              <Button
+                variant={'ghost'}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-state-error-5 hover:text-state-error"
                 onClick={() =>
                   delSourceModal({
                     data: item,
@@ -51,7 +54,9 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                     },
                   })
                 }
-              />
+              >
+                <Trash2 className="cursor-pointer" size={14} />
+              </Button>
               {/* </ConfirmDeleteDialog> */}
             </div>
           </div>
diff --git a/web/src/pages/user-setting/mcp/index.tsx b/web/src/pages/user-setting/mcp/index.tsx
index 6cfc34dc1..37c881aae 100644
--- a/web/src/pages/user-setting/mcp/index.tsx
+++ b/web/src/pages/user-setting/mcp/index.tsx
@@ -71,6 +71,7 @@ export default function McpServer() {
                 className="w-40"
                 value={searchString}
                 onChange={handleInputChange}
+                placeholder={t('common.search')}
               ></SearchInput>
               <Button variant={'secondary'} onClick={switchSelectionMode}>
                 {isSelectionMode ? (
diff --git a/web/src/pages/user-setting/mcp/mcp-operation.tsx b/web/src/pages/user-setting/mcp/mcp-operation.tsx
index 9bbd9e5c8..22033e8b8 100644
--- a/web/src/pages/user-setting/mcp/mcp-operation.tsx
+++ b/web/src/pages/user-setting/mcp/mcp-operation.tsx
@@ -1,5 +1,4 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
-import { RAGFlowTooltip } from '@/components/ui/tooltip';
 import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
 import { PenLine, Trash2, Upload } from 'lucide-react';
 import { MouseEventHandler, useCallback } from 'react';
@@ -20,24 +19,24 @@ export function McpOperation({
   }, [deleteMcpServer, mcpId]);
 
   return (
-    <div className="hidden gap-3  group-hover:flex text-text-secondary">
-      <RAGFlowTooltip tooltip={t('mcp.export')}>
-        <Upload
-          className="size-3 cursor-pointer"
-          onClick={handleExportMcpJson([mcpId])}
-        />
-      </RAGFlowTooltip>
-      <RAGFlowTooltip tooltip={t('common.edit')}>
-        <PenLine
-          className="size-3 cursor-pointer"
-          onClick={showEditModal(mcpId)}
-        />
-      </RAGFlowTooltip>
-      <RAGFlowTooltip tooltip={t('common.delete')}>
-        <ConfirmDeleteDialog onOk={handleDelete}>
-          <Trash2 className="size-3 cursor-pointer" />
-        </ConfirmDeleteDialog>
-      </RAGFlowTooltip>
+    <div className="hidden gap-1  group-hover:flex text-text-secondary">
+      {/* <RAGFlowTooltip tooltip={t('mcp.export')}> */}
+      <Upload
+        className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
+        onClick={handleExportMcpJson([mcpId])}
+      />
+      {/* </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.edit')}> */}
+      <PenLine
+        className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
+        onClick={showEditModal(mcpId)}
+      />
+      {/* </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.delete')}> */}
+      <ConfirmDeleteDialog onOk={handleDelete}>
+        <Trash2 className="size-5 cursor-pointer p-1 rounded-sm hover:text-state-error hover:bg-state-error-5" />
+      </ConfirmDeleteDialog>
+      {/* </RAGFlowTooltip> */}
     </div>
   );
 }
diff --git a/web/src/pages/user-setting/profile/index.tsx b/web/src/pages/user-setting/profile/index.tsx
index 5c2741cf6..ae46ead5f 100644
--- a/web/src/pages/user-setting/profile/index.tsx
+++ b/web/src/pages/user-setting/profile/index.tsx
@@ -143,12 +143,12 @@ const ProfilePage: FC = () => {
               {profile.userName}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editName)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -175,12 +175,12 @@ const ProfilePage: FC = () => {
               {profile.timeZone}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editTimeZone)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -208,12 +208,12 @@ const ProfilePage: FC = () => {
               {profile.currPasswd ? '********' : ''}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editPassword)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -304,7 +304,7 @@ const ProfilePage: FC = () => {
                         <div className="flex flex-col w-full gap-2">
                           <FormLabel
                             required
-                            className="text-sm flex justify-between text-text-secondary whitespace-nowrap"
+                            className="text-sm flex text-text-secondary whitespace-nowrap"
                           >
                             {t('currentPassword')}
                           </FormLabel>
diff --git a/web/src/pages/user-setting/setting-model/components/modal-card.tsx b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
index 9bf2875f5..f9ef62dd1 100644
--- a/web/src/pages/user-setting/setting-model/components/modal-card.tsx
+++ b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
@@ -67,21 +67,22 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   return (
     <div className={`w-full rounded-lg border border-border-button`}>
       {/* Header */}
-      <div className="flex h-16  items-center justify-between p-4 cursor-pointer transition-colors">
+      <div className="flex h-16  items-center justify-between p-4 cursor-pointer transition-colors text-text-secondary">
         <div className="flex items-center space-x-3">
           <LlmIcon name={item.name} />
           <div>
-            <h3 className="font-medium">{item.name}</h3>
+            <div className="font-medium text-xl">{item.name}</div>
           </div>
         </div>
 
         <div className="flex items-center space-x-2">
           <Button
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleApiKeyClick();
             }}
-            className="px-3 py-1 text-sm bg-bg-input hover:bg-bg-input text-text-primary  rounded-md transition-colors flex items-center space-x-1"
+            className="px-3 py-1 text-sm    rounded-md transition-colors flex items-center space-x-1 border border-border-default"
           >
             <SettingOutlined />
             <span>
@@ -90,23 +91,24 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
           </Button>
 
           <Button
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleShowMoreClick();
             }}
-            className="px-3 py-1 text-sm bg-bg-input hover:bg-bg-input text-text-primary rounded-md transition-colors flex items-center space-x-1"
+            className="px-3 py-1 text-sm   rounded-md transition-colors flex items-center space-x-1 border border-border-default"
           >
             <span>{visible ? t('hideModels') : t('showMoreModels')}</span>
             {!visible ? <ChevronsDown /> : <ChevronsUp />}
           </Button>
 
           <Button
-            variant={'secondary'}
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleDeleteFactory();
             }}
-            className="p-1 text-text-primary hover:text-state-error transition-colors"
+            className="  hover:text-state-error hover:bg-state-error-5 transition-colors border border-border-default"
           >
             <Trash2 />
           </Button>
diff --git a/web/src/pages/user-setting/setting-model/components/system-setting.tsx b/web/src/pages/user-setting/setting-model/components/system-setting.tsx
index 34a25f388..a8714b998 100644
--- a/web/src/pages/user-setting/setting-model/components/system-setting.tsx
+++ b/web/src/pages/user-setting/setting-model/components/system-setting.tsx
@@ -27,7 +27,6 @@ interface IProps {
 const SystemSetting = ({ onOk, loading }: IProps) => {
   const { systemSetting: initialValues, allOptions } =
     useFetchSystemModelSettingOnMount();
-  const { t: tcommon } = useTranslate('common');
   const { t } = useTranslate('setting');
 
   const [formData, setFormData] = useState({
@@ -149,7 +148,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
               <TooltipTrigger>
                 <CircleQuestionMark
                   size={12}
-                  className="ml-1 text-text-disabled text-xs"
+                  className="ml-1 text-text-secondary text-xs"
                 />
               </TooltipTrigger>
             </Tooltip>
diff --git a/web/src/pages/user-setting/setting-model/components/un-add-model.tsx b/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
index 88897ce83..b78286ecc 100644
--- a/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
+++ b/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
@@ -1,6 +1,7 @@
 // src/components/AvailableModels.tsx
 import { LlmIcon } from '@/components/svg-icon';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmList } from '@/hooks/llm-hooks';
 import { Plus, Search } from 'lucide-react';
@@ -77,12 +78,12 @@ export const AvailableModels: FC<{
       {/* Search Bar */}
       <div className="mb-6">
         <div className="relative">
-          <input
+          <Input
             type="text"
             placeholder={t('search')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-4 py-3 pl-10 bg-bg-input border border-border-default rounded-lg focus:outline-none focus:ring-1 focus:ring-border-button transition-colors"
+            className="w-full px-4 py-2 pl-10 bg-bg-input border border-border-default rounded-lg focus:outline-none focus:ring-1 focus:ring-border-button transition-colors"
           />
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-text-secondary" />
         </div>
diff --git a/web/src/pages/user-setting/setting-team/tenant-table.tsx b/web/src/pages/user-setting/setting-team/tenant-table.tsx
index 833defb1b..56e059158 100644
--- a/web/src/pages/user-setting/setting-team/tenant-table.tsx
+++ b/web/src/pages/user-setting/setting-team/tenant-table.tsx
@@ -72,7 +72,7 @@ const TenantTable = ({ searchTerm }: { searchTerm: string }) => {
     <div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
       <Table rootClassName="rounded-lg">
         <TableHeader className="bg-bg-title">
-          <TableRow>
+          <TableRow className="hover:bg-bg-title">
             <TableHead className="h-12 px-4">{t('common.name')}</TableHead>
             <TableHead
               className="h-12 px-4 cursor-pointer"
diff --git a/web/src/pages/user-setting/setting-team/user-table.tsx b/web/src/pages/user-setting/setting-team/user-table.tsx
index 3f3fceae3..f8c63effe 100644
--- a/web/src/pages/user-setting/setting-team/user-table.tsx
+++ b/web/src/pages/user-setting/setting-team/user-table.tsx
@@ -78,7 +78,7 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
     <div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
       <Table rootClassName="rounded-lg">
         <TableHeader className="bg-bg-title">
-          <TableRow>
+          <TableRow className="hover:bg-bg-title">
             <TableHead className="h-12 px-4">{t('common.name')}</TableHead>
             <TableHead
               className="h-12 px-4 cursor-pointer"