diff --git a/go-backend/internal/http/handler/control_plane.go b/go-backend/internal/http/handler/control_plane.go
index ebedd86..e34aff3 100644
--- a/go-backend/internal/http/handler/control_plane.go
+++ b/go-backend/internal/http/handler/control_plane.go
@@ -481,7 +481,7 @@ func (h *Handler) diagnoseTunnelRuntime(tunnelID int64) (map[string]interface{},
 	case 1:
 		for _, inNode := range inNodes {
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 1,
 			})
 		}
@@ -534,14 +534,14 @@ func (h *Handler) diagnoseTunnelRuntime(tunnelID int64) (map[string]interface{},
 
 		for _, outNode := range outNodes {
 			description := fmt.Sprintf("出口(%s)->外网", outNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, outNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, outNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 3,
 			})
 		}
 	default:
 		for _, inNode := range inNodes {
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 1,
 			})
 		}
diff --git a/vite-frontend/src/pages/config.tsx b/vite-frontend/src/pages/config.tsx
index 8d862b5..87148e0 100644
--- a/vite-frontend/src/pages/config.tsx
+++ b/vite-frontend/src/pages/config.tsx
@@ -149,7 +149,7 @@ const getInitialConfigs = (): Record<string, string> => {
         initialConfigs[key] = cachedValue;
       }
     });
-  } catch {}
+  } catch { }
 
   return initialConfigs;
 };
@@ -528,11 +528,10 @@ export default function ConfigPage() {
               <button
                 key={option.value}
                 aria-pressed={isSelected}
-                className={`w-full px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer text-left ${
-                  isSelected
-                    ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
-                    : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
-                }`}
+                className={`w-full px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer text-left ${isSelected
+                  ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
+                  : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
+                  }`}
                 type="button"
                 onClick={() => toggleTypeSelection(option.value, setTypes)}
               >
@@ -546,11 +545,10 @@ export default function ConfigPage() {
                     size="md"
                   />
                   <span
-                    className={`font-medium ${
-                      isSelected
-                        ? "text-default-900 dark:text-default-100"
-                        : "text-default-700 dark:text-default-500"
-                    }`}
+                    className={`font-medium ${isSelected
+                      ? "text-default-900 dark:text-default-100"
+                      : "text-default-700 dark:text-default-500"
+                      }`}
                   >
                     {option.label}
                   </span>
@@ -649,9 +647,9 @@ export default function ConfigPage() {
       {hasChanges && (
         <Card className="mt-4 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800">
           <CardBody className="py-3">
-            <div className="flex items-center gap-2 text-warning-700 dark:text-warning-300">
+            <div className="w-full flex items-center justify-center gap-2 text-warning-700 dark:text-warning-300">
               <div className="w-2 h-2 bg-warning-500 rounded-full animate-pulse" />
-              <span className="text-sm">
+              <span className="text-sm font-medium">
                 检测到配置变更，请记得保存您的修改
               </span>
             </div>
diff --git a/vite-frontend/src/pages/dashboard/components/announcement-banner.tsx b/vite-frontend/src/pages/dashboard/components/announcement-banner.tsx
index 979b2fa..fb1c3a2 100644
--- a/vite-frontend/src/pages/dashboard/components/announcement-banner.tsx
+++ b/vite-frontend/src/pages/dashboard/components/announcement-banner.tsx
@@ -16,8 +16,8 @@ export const AnnouncementBanner = ({
   return (
     <Card className="mb-4 lg:mb-6 border border-blue-200 dark:border-blue-500/30 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-500/10 dark:to-purple-500/10">
       <CardBody className="p-4">
-        <div className="flex items-center justify-start gap-3">
-          <div className="p-2 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex-shrink-0">
+        <div className="flex items-start justify-start gap-3.5">
+          <div className="w-10 h-10 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex-shrink-0 flex items-center justify-center mt-0.5">
             <svg
               aria-hidden="true"
               className="w-5 h-5 text-blue-600 dark:text-blue-400"
@@ -31,11 +31,11 @@ export const AnnouncementBanner = ({
               />
             </svg>
           </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-sm lg:text-base font-semibold text-blue-900 dark:text-blue-100 mb-1">
+          <div className="flex-1 min-w-0 pt-0.5">
+            <h3 className="text-base font-semibold leading-none text-blue-900 dark:text-blue-100 mb-1.5">
               公告
             </h3>
-            <p className="text-xs lg:text-sm text-blue-800 dark:text-blue-200 whitespace-pre-wrap break-words">
+            <p className="text-sm text-blue-800 dark:text-blue-200 whitespace-pre-wrap break-words leading-relaxed">
               {announcement.content}
             </p>
           </div>
diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index cfa0684..7508435 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -24,6 +24,14 @@ import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input } from "@/shadcn-bridge/heroui/input";
 import { Textarea } from "@/shadcn-bridge/heroui/input";
 import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@/shadcn-bridge/heroui/table";
 import {
   Modal,
   ModalContent,
@@ -35,7 +43,6 @@ import { Chip } from "@/shadcn-bridge/heroui/chip";
 import { Spinner } from "@/shadcn-bridge/heroui/spinner";
 import { Switch } from "@/shadcn-bridge/heroui/switch";
 import { Alert } from "@/shadcn-bridge/heroui/alert";
-import { Accordion, AccordionItem } from "@/shadcn-bridge/heroui/accordion";
 import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import {
   createForward,
@@ -235,7 +242,7 @@ export default function ForwardPage() {
           saveOrder(FORWARD_ORDER_KEY, order);
         }
       }
-    } catch {}
+    } catch { }
   };
 
   // 加载所有数据
@@ -1282,11 +1289,10 @@ export default function ForwardPage() {
             <div className="flex items-center gap-1.5 ml-2">
               {viewMode === "direct" && (
                 <div
-                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${
-                    isMobile
-                      ? "opacity-100" // 移动端始终显示
-                      : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
-                  }`}
+                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${isMobile
+                    ? "opacity-100" // 移动端始终显示
+                    : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
+                    }`}
                   {...listeners}
                   style={{ touchAction: "none" }}
                   title={isMobile ? "长按拖拽排序" : "拖拽排序"}
@@ -1324,11 +1330,10 @@ export default function ForwardPage() {
             {/* 地址信息 */}
             <div className="space-y-1">
               <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
-                  hasMultipleAddresses(forward.inIp)
-                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                    : ""
-                }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.inIp)
+                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                  : ""
+                  }`}
                 title={formatInAddress(forward.inIp, forward.inPort)}
                 type="button"
                 onClick={() =>
@@ -1364,11 +1369,10 @@ export default function ForwardPage() {
               </button>
 
               <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
-                  hasMultipleAddresses(forward.remoteAddr)
-                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                    : ""
-                }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.remoteAddr)
+                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                  : ""
+                  }`}
                 title={formatRemoteAddress(forward.remoteAddr)}
                 type="button"
                 onClick={() =>
@@ -1516,8 +1520,6 @@ export default function ForwardPage() {
     return <PageLoadingState message="正在加载..." />;
   }
 
-  const userGroups = groupForwardsByUserAndTunnel();
-
   return (
     <div className="px-3 lg:px-6 py-8">
       {/* 页面头部 */}
@@ -1584,7 +1586,7 @@ export default function ForwardPage() {
           </Button>
 
           <Button
-            color="default"
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -1669,116 +1671,177 @@ export default function ForwardPage() {
 
       {/* 根据显示模式渲染不同内容 */}
       {viewMode === "grouped" ? (
-        /* 按用户和隧道分组的转发列表 */
-        userGroups.length > 0 ? (
-          <div className="space-y-6">
-            {userGroups.map((userGroup) => (
-              <Card
-                key={userGroup.userId || "unknown"}
-                className="shadow-sm border border-divider w-full overflow-hidden"
-              >
-                <CardHeader className="pb-2 md:pb-2">
-                  <div className="flex items-center justify-between w-full min-w-0">
-                    <div className="flex items-center gap-3 min-w-0 flex-1">
-                      <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0">
-                        <svg
-                          aria-hidden="true"
-                          className="w-5 h-5 text-primary"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path
-                            clipRule="evenodd"
-                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                            fillRule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h2 className="text-base font-medium text-foreground truncate max-w-[150px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-[450px]">
-                          {userGroup.userName}
-                        </h2>
-                        <p className="text-xs text-default-500 truncate max-w-[150px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-[450px]">
-                          {userGroup.tunnelGroups.length} 个隧道，
-                          {userGroup.tunnelGroups.reduce(
-                            (total, tg) => total + tg.forwards.length,
-                            0,
-                          )}{" "}
-                          个转发
-                        </p>
-                      </div>
-                    </div>
-                    <Chip
-                      className="text-xs flex-shrink-0 ml-2"
-                      color="primary"
-                      size="sm"
-                      variant="flat"
-                    >
-                      用户
-                    </Chip>
-                  </div>
-                </CardHeader>
+        sortedForwards.length > 0 ? (
+          <div className="overflow-hidden rounded-xl border border-divider bg-content1 shadow-md">
+            <Table
+              aria-label="全部转发列表"
+              classNames={{
+                th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider",
+                td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                tr: "hover:bg-default-50/50 transition-colors",
+              }}
+            >
+              <TableHeader>
+                {selectMode && <TableColumn className="w-14">选择</TableColumn>}
+                <TableColumn>用户</TableColumn>
+                <TableColumn>隧道</TableColumn>
+                <TableColumn>名称</TableColumn>
+                <TableColumn>入口</TableColumn>
+                <TableColumn>目标</TableColumn>
+                <TableColumn>策略</TableColumn>
+                <TableColumn>流量</TableColumn>
+                <TableColumn>状态</TableColumn>
+                <TableColumn className="text-right">操作</TableColumn>
+              </TableHeader>
+              <TableBody emptyContent="暂无转发配置" items={sortedForwards}>
+                {(forward) => {
+                  const statusDisplay = getStatusDisplay(forward.status);
+                  const strategyDisplay = getStrategyDisplay(forward.strategy);
 
-                <CardBody className="pt-0 md:pt-0">
-                  <Accordion className="px-0" variant="splitted">
-                    {userGroup.tunnelGroups.map((tunnelGroup) => (
-                      <AccordionItem
-                        key={tunnelGroup.tunnelId}
-                        aria-label={tunnelGroup.tunnelName}
-                        className="shadow-none border border-divider"
-                        title={
-                          <div className="flex items-center justify-between w-full min-w-0 pr-4">
-                            <div className="flex items-center gap-3 min-w-0 flex-1">
-                              <div className="w-8 h-8 bg-success-100 dark:bg-success-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
-                                <svg
-                                  aria-hidden="true"
-                                  className="w-4 h-4 text-success"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                  />
-                                </svg>
-                              </div>
-                              <div className="min-w-0 flex-1">
-                                <h3 className="text-sm font-medium text-foreground truncate max-w-[120px] sm:max-w-[200px] md:max-w-[300px] lg:max-w-[400px]">
-                                  {tunnelGroup.tunnelName}
-                                </h3>
-                              </div>
-                            </div>
-                            <div className="flex items-center gap-2 flex-shrink-0 ml-2">
-                              <Chip
-                                className="text-xs"
-                                size="sm"
-                                variant="flat"
-                              >
-                                {
-                                  tunnelGroup.forwards.filter(
-                                    (f) => f.serviceRunning,
-                                  ).length
-                                }
-                                /{tunnelGroup.forwards.length}
-                              </Chip>
-                            </div>
+                  return (
+                    <TableRow key={forward.id}>
+                      {selectMode && (
+                        <TableCell>
+                          <Checkbox
+                            isSelected={selectedIds.has(forward.id)}
+                            onValueChange={() => toggleSelect(forward.id)}
+                          />
+                        </TableCell>
+                      )}
+                      <TableCell className="whitespace-nowrap">
+                        <div className="flex items-center gap-2">
+                          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
+                            {(forward.userName || "未")[0].toUpperCase()}
                           </div>
-                        }
-                      >
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
-                          {tunnelGroup.forwards.map((forward) =>
-                            renderForwardCard(forward, undefined),
-                          )}
+                          <span className="text-sm font-medium text-default-700">
+                            {forward.userName || "未知用户"}
+                          </span>
                         </div>
-                      </AccordionItem>
-                    ))}
-                  </Accordion>
-                </CardBody>
-              </Card>
-            ))}
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap">
+                        <Chip
+                          size="sm"
+                          color="secondary"
+                          className="border-none bg-secondary/10 px-2"
+                        >
+                          <span className="font-medium text-secondary-700">{forward.tunnelName}</span>
+                        </Chip>
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap font-semibold text-foreground">
+                        {forward.name}
+                      </TableCell>
+                      <TableCell className="max-w-[220px]">
+                        <button
+                          className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.inIp)
+                            ? "hover:bg-default-200 hover:shadow-sm"
+                            : ""
+                            }`}
+                          title={formatInAddress(forward.inIp, forward.inPort)}
+                          type="button"
+                          onClick={() =>
+                            showAddressModal(forward.inIp, forward.inPort, "入口端口")
+                          }
+                        >
+                          {formatInAddress(forward.inIp, forward.inPort)}
+                        </button>
+                      </TableCell>
+                      <TableCell className="max-w-[240px]">
+                        <button
+                          className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.remoteAddr)
+                            ? "hover:bg-default-200 hover:shadow-sm"
+                            : ""
+                            }`}
+                          title={formatRemoteAddress(forward.remoteAddr)}
+                          type="button"
+                          onClick={() =>
+                            showAddressModal(forward.remoteAddr, null, "目标地址")
+                          }
+                        >
+                          {formatRemoteAddress(forward.remoteAddr)}
+                        </button>
+                      </TableCell>
+                      <TableCell>
+                        <Chip
+                          className="text-xs font-medium"
+                          color={strategyDisplay.color as any}
+                          size="sm"
+                          variant="flat"
+                        >
+                          {strategyDisplay.text}
+                        </Chip>
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap">
+                        <div className="flex flex-col gap-1.5 text-xs font-medium text-default-600">
+                          <span className="flex items-center gap-1 text-success-600">
+                            <span className="text-[10px]">↑</span>
+                            {formatFlow(forward.inFlow || 0)}
+                          </span>
+                          <span className="flex items-center gap-1 text-primary-600">
+                            <span className="text-[10px]">↓</span>
+                            {formatFlow(forward.outFlow || 0)}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2.5 whitespace-nowrap">
+                          <Switch
+                            isDisabled={forward.status !== 1 && forward.status !== 0}
+                            isSelected={forward.serviceRunning}
+                            size="sm"
+                            color="success"
+                            onValueChange={() => handleServiceToggle(forward)}
+                          />
+                          <Chip
+                            className="border-none text-xs font-medium"
+                            color={statusDisplay.color as any}
+                            size="sm"
+                          >
+                            {statusDisplay.text}
+                          </Chip>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            isIconOnly
+                            className="bg-primary/10 text-primary hover:bg-primary/20"
+                            size="sm"
+                            title="编辑"
+                            onPress={() => handleEdit(forward)}
+                          >
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                            </svg>
+                          </Button>
+                          <Button
+                            isIconOnly
+                            className="bg-warning/10 text-warning hover:bg-warning/20"
+                            size="sm"
+                            title="诊断"
+                            onPress={() => handleDiagnose(forward)}
+                          >
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                            </svg>
+                          </Button>
+                          <Button
+                            isIconOnly
+                            className="bg-danger/10 text-danger hover:bg-danger/20"
+                            size="sm"
+                            title="删除"
+                            onPress={() => handleDelete(forward)}
+                          >
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                            </svg>
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                }}
+              </TableBody>
+            </Table>
           </div>
         ) : (
           /* 空状态 */
@@ -1814,59 +1877,59 @@ export default function ForwardPage() {
           </Card>
         )
       ) : /* 直接显示模式 */
-      forwards.length > 0 ? (
-        <DndContext
-          collisionDetection={closestCenter}
-          sensors={sensors}
-          onDragEnd={handleDragEnd}
-          onDragStart={() => {}} // 添加空的 onDragStart 处理器
-        >
-          <SortableContext
-            items={sortableForwardIds}
-            strategy={rectSortingStrategy}
+        forwards.length > 0 ? (
+          <DndContext
+            collisionDetection={closestCenter}
+            sensors={sensors}
+            onDragEnd={handleDragEnd}
+            onDragStart={() => { }} // 添加空的 onDragStart 处理器
           >
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-              {sortedForwards.map((forward) =>
-                forward && forward.id ? (
-                  <SortableForwardCard key={forward.id} forward={forward} />
-                ) : null,
-              )}
-            </div>
-          </SortableContext>
-        </DndContext>
-      ) : (
-        /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
+            <SortableContext
+              items={sortableForwardIds}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                {sortedForwards.map((forward) =>
+                  forward && forward.id ? (
+                    <SortableForwardCard key={forward.id} forward={forward} />
+                  ) : null,
+                )}
               </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无转发配置
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何转发配置，点击上方按钮开始创建
-                </p>
+            </SortableContext>
+          </DndContext>
+        ) : (
+          /* 空状态 */
+          <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
+            <CardBody className="text-center py-16">
+              <div className="flex flex-col items-center gap-4">
+                <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
+                  <svg
+                    aria-hidden="true"
+                    className="w-8 h-8 text-default-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground">
+                    暂无转发配置
+                  </h3>
+                  <p className="text-default-500 text-sm mt-1">
+                    还没有创建任何转发配置，点击上方按钮开始创建
+                  </p>
+                </div>
               </div>
-            </div>
-          </CardBody>
-        </Card>
-      )}
+            </CardBody>
+          </Card>
+        )}
 
       {/* 新增/编辑模态框 */}
       <Modal
@@ -2335,11 +2398,10 @@ export default function ForwardPage() {
                     {importResults.map((result, index) => (
                       <div
                         key={index}
-                        className={`p-2 rounded border ${
-                          result.success
-                            ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
-                            : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
-                        }`}
+                        className={`p-2 rounded border ${result.success
+                          ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
+                          : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
+                          }`}
                       >
                         <div className="flex items-center gap-2">
                           {result.success ? (
@@ -2372,11 +2434,10 @@ export default function ForwardPage() {
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 mb-0.5">
                               <span
-                                className={`text-xs font-medium ${
-                                  result.success
-                                    ? "text-success-700 dark:text-success-300"
-                                    : "text-danger-700 dark:text-danger-300"
-                                }`}
+                                className={`text-xs font-medium ${result.success
+                                  ? "text-success-700 dark:text-success-300"
+                                  : "text-danger-700 dark:text-danger-300"
+                                  }`}
                               >
                                 {result.success ? "成功" : "失败"}
                               </span>
@@ -2388,11 +2449,10 @@ export default function ForwardPage() {
                               </code>
                             </div>
                             <div
-                              className={`text-xs ${
-                                result.success
-                                  ? "text-success-600 dark:text-success-400"
-                                  : "text-danger-600 dark:text-danger-400"
-                              }`}
+                              className={`text-xs ${result.success
+                                ? "text-success-600 dark:text-success-400"
+                                : "text-danger-600 dark:text-danger-400"
+                                }`}
                             >
                               {result.message}
                             </div>
@@ -2575,20 +2635,18 @@ export default function ForwardPage() {
                                     return (
                                       <tr
                                         key={index}
-                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${
-                                          result.success
-                                            ? "bg-white dark:bg-gray-800"
-                                            : "bg-danger-50 dark:bg-danger-900/30"
-                                        }`}
+                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${result.success
+                                          ? "bg-white dark:bg-gray-800"
+                                          : "bg-danger-50 dark:bg-danger-900/30"
+                                          }`}
                                       >
                                         <td className="px-3 py-2">
                                           <div className="flex items-center gap-2">
                                             <span
-                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
-                                                result.success
-                                                  ? "bg-success text-white"
-                                                  : "bg-danger text-white"
-                                              }`}
+                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${result.success
+                                                ? "bg-success text-white"
+                                                : "bg-danger text-white"
+                                                }`}
                                             >
                                               {result.success ? "✓" : "✗"}
                                             </span>
@@ -2630,11 +2688,10 @@ export default function ForwardPage() {
                                         <td className="px-3 py-2 text-center">
                                           {result.success ? (
                                             <span
-                                              className={`font-semibold ${
-                                                (result.packetLoss || 0) > 0
-                                                  ? "text-warning"
-                                                  : "text-success"
-                                              }`}
+                                              className={`font-semibold ${(result.packetLoss || 0) > 0
+                                                ? "text-warning"
+                                                : "text-success"
+                                                }`}
                                             >
                                               {result.packetLoss?.toFixed(1)}%
                                             </span>
@@ -2748,19 +2805,17 @@ export default function ForwardPage() {
                                 return (
                                   <div
                                     key={index}
-                                    className={`border rounded-lg p-3 ${
-                                      result.success
-                                        ? "border-divider bg-white dark:bg-gray-800"
-                                        : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
-                                    }`}
+                                    className={`border rounded-lg p-3 ${result.success
+                                      ? "border-divider bg-white dark:bg-gray-800"
+                                      : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
+                                      }`}
                                   >
                                     <div className="flex items-start gap-2 mb-2">
                                       <span
-                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${
-                                          result.success
-                                            ? "bg-success text-white"
-                                            : "bg-danger text-white"
-                                        }`}
+                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${result.success
+                                          ? "bg-success text-white"
+                                          : "bg-danger text-white"
+                                          }`}
                                       >
                                         {result.success ? "✓" : "✗"}
                                       </span>
@@ -2796,11 +2851,10 @@ export default function ForwardPage() {
                                         </div>
                                         <div className="text-center">
                                           <div
-                                            className={`text-lg font-bold ${
-                                              (result.packetLoss || 0) > 0
-                                                ? "text-warning"
-                                                : "text-success"
-                                            }`}
+                                            className={`text-lg font-bold ${(result.packetLoss || 0) > 0
+                                              ? "text-warning"
+                                              : "text-success"
+                                              }`}
                                           >
                                             {result.packetLoss?.toFixed(1)}%
                                           </div>
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 428f476..66cb8e1 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -1000,7 +1000,7 @@ export default function NodePage() {
 
         <div className="flex gap-2 items-center">
           <Button
-            color="default"
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
diff --git a/vite-frontend/src/pages/panel-sharing.tsx b/vite-frontend/src/pages/panel-sharing.tsx
index 6294f97..98c7e04 100644
--- a/vite-frontend/src/pages/panel-sharing.tsx
+++ b/vite-frontend/src/pages/panel-sharing.tsx
@@ -409,7 +409,7 @@ export default function PanelSharingPage() {
           }
         >
           <Card>
-            <CardBody className="space-y-5 pt-4 md:pt-6">
+            <CardBody className="space-y-5">
               <div className="flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
                 <div className="space-y-1">
                   <h2 className="text-lg font-semibold text-foreground">
@@ -554,7 +554,7 @@ export default function PanelSharingPage() {
           }
         >
           <Card>
-            <CardBody className="space-y-5 pt-4 md:pt-6">
+            <CardBody className="space-y-5">
               <div className="flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
                 <div className="space-y-1">
                   <h2 className="text-lg font-semibold text-foreground">
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index cd53f25..35e7e8e 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -226,9 +226,9 @@ export default function TunnelPage() {
       trafficRatio: tunnel.trafficRatio,
       inIp: tunnel.inIp
         ? tunnel.inIp
-            .split(",")
-            .map((ip: string) => ip.trim())
-            .join("\n")
+          .split(",")
+          .map((ip: string) => ip.trim())
+          .join("\n")
         : "",
       ipPreference: tunnel.ipPreference || "",
       status: tunnel.status,
@@ -678,7 +678,7 @@ export default function TunnelPage() {
 
         <div className="flex items-center gap-2">
           <Button
-            color="default"
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -1127,11 +1127,6 @@ export default function TunnelPage() {
                     </Select>
 
                     <Input
-                      endContent={
-                        <div className="pointer-events-none flex items-center">
-                          <span className="text-default-400 text-small">x</span>
-                        </div>
-                      }
                       errorMessage={errors.trafficRatio}
                       isInvalid={!!errors.trafficRatio}
                       label="流量倍率"
@@ -1386,6 +1381,7 @@ export default function TunnelPage() {
                                       ]}
                                       label="节点"
                                       placeholder="选择节点（可多选）"
+                                      dropdownPlacement="top"
                                       selectedKeys={groupNodes
                                         .filter((ct) => ct.nodeId !== -1)
                                         .map((ct) => ct.nodeId.toString())}
@@ -1452,14 +1448,14 @@ export default function TunnelPage() {
                                               {form.inNodeId.some(
                                                 (ct) => ct.nodeId === node.id,
                                               ) && (
-                                                <Chip
-                                                  color="warning"
-                                                  size="sm"
-                                                  variant="flat"
-                                                >
-                                                  已选为入口
-                                                </Chip>
-                                              )}
+                                                  <Chip
+                                                    color="warning"
+                                                    size="sm"
+                                                    variant="flat"
+                                                  >
+                                                    已选为入口
+                                                  </Chip>
+                                                )}
                                               {form.outNodeId &&
                                                 form.outNodeId.some(
                                                   (ct) => ct.nodeId === node.id,
@@ -1482,14 +1478,14 @@ export default function TunnelPage() {
                                                       ct.nodeId !== -1,
                                                   ),
                                               ) && (
-                                                <Chip
-                                                  color="primary"
-                                                  size="sm"
-                                                  variant="flat"
-                                                >
-                                                  已选为其他跳
-                                                </Chip>
-                                              )}
+                                                  <Chip
+                                                    color="primary"
+                                                    size="sm"
+                                                    variant="flat"
+                                                  >
+                                                    已选为其他跳
+                                                  </Chip>
+                                                )}
                                             </div>
                                           </div>
                                         </SelectItem>
@@ -1603,11 +1599,12 @@ export default function TunnelPage() {
                             isInvalid={!!errors.outNodeId}
                             label="节点"
                             placeholder="请选择出口节点（可多选）"
+                            dropdownPlacement="top"
                             selectedKeys={
                               form.outNodeId
                                 ? form.outNodeId
-                                    .filter((ct) => ct.nodeId !== -1)
-                                    .map((ct) => ct.nodeId.toString())
+                                  .filter((ct) => ct.nodeId !== -1)
+                                  .map((ct) => ct.nodeId.toString())
                                 : []
                             }
                             selectionMode="multiple"
@@ -1674,25 +1671,25 @@ export default function TunnelPage() {
                                     {form.inNodeId.some(
                                       (ct) => ct.nodeId === node.id,
                                     ) && (
-                                      <Chip
-                                        color="warning"
-                                        size="sm"
-                                        variant="flat"
-                                      >
-                                        已选为入口
-                                      </Chip>
-                                    )}
+                                        <Chip
+                                          color="warning"
+                                          size="sm"
+                                          variant="flat"
+                                        >
+                                          已选为入口
+                                        </Chip>
+                                      )}
                                     {getSelectedChainNodeIds().includes(
                                       node.id,
                                     ) && (
-                                      <Chip
-                                        color="primary"
-                                        size="sm"
-                                        variant="flat"
-                                      >
-                                        已选为转发链
-                                      </Chip>
-                                    )}
+                                        <Chip
+                                          color="primary"
+                                          size="sm"
+                                          variant="flat"
+                                        >
+                                          已选为转发链
+                                        </Chip>
+                                      )}
                                   </div>
                                 </div>
                               </SelectItem>
@@ -2055,20 +2052,18 @@ export default function TunnelPage() {
                                     return (
                                       <tr
                                         key={index}
-                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${
-                                          result.success
-                                            ? "bg-white dark:bg-gray-800"
-                                            : "bg-danger-50 dark:bg-danger-900/30"
-                                        }`}
+                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${result.success
+                                          ? "bg-white dark:bg-gray-800"
+                                          : "bg-danger-50 dark:bg-danger-900/30"
+                                          }`}
                                       >
                                         <td className="px-3 py-2">
                                           <div className="flex items-center gap-2">
                                             <span
-                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
-                                                result.success
-                                                  ? "bg-success text-white"
-                                                  : "bg-danger text-white"
-                                              }`}
+                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${result.success
+                                                ? "bg-success text-white"
+                                                : "bg-danger text-white"
+                                                }`}
                                             >
                                               {result.success ? "✓" : "✗"}
                                             </span>
@@ -2110,11 +2105,10 @@ export default function TunnelPage() {
                                         <td className="px-3 py-2 text-center">
                                           {result.success ? (
                                             <span
-                                              className={`font-semibold ${
-                                                (result.packetLoss || 0) > 0
-                                                  ? "text-warning"
-                                                  : "text-success"
-                                              }`}
+                                              className={`font-semibold ${(result.packetLoss || 0) > 0
+                                                ? "text-warning"
+                                                : "text-success"
+                                                }`}
                                             >
                                               {result.packetLoss?.toFixed(1)}%
                                             </span>
@@ -2227,19 +2221,17 @@ export default function TunnelPage() {
                                 return (
                                   <div
                                     key={index}
-                                    className={`border rounded-lg p-3 ${
-                                      result.success
-                                        ? "border-divider bg-white dark:bg-gray-800"
-                                        : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
-                                    }`}
+                                    className={`border rounded-lg p-3 ${result.success
+                                      ? "border-divider bg-white dark:bg-gray-800"
+                                      : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
+                                      }`}
                                   >
                                     <div className="flex items-start gap-2 mb-2">
                                       <span
-                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${
-                                          result.success
-                                            ? "bg-success text-white"
-                                            : "bg-danger text-white"
-                                        }`}
+                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${result.success
+                                          ? "bg-success text-white"
+                                          : "bg-danger text-white"
+                                          }`}
                                       >
                                         {result.success ? "✓" : "✗"}
                                       </span>
@@ -2275,11 +2267,10 @@ export default function TunnelPage() {
                                         </div>
                                         <div className="text-center">
                                           <div
-                                            className={`text-lg font-bold ${
-                                              (result.packetLoss || 0) > 0
-                                                ? "text-warning"
-                                                : "text-success"
-                                            }`}
+                                            className={`text-lg font-bold ${(result.packetLoss || 0) > 0
+                                              ? "text-warning"
+                                              : "text-success"
+                                              }`}
                                           >
                                             {result.packetLoss?.toFixed(1)}%
                                           </div>
diff --git a/vite-frontend/src/shadcn-bridge/heroui/date-picker.tsx b/vite-frontend/src/shadcn-bridge/heroui/date-picker.tsx
index 01a4555..50cd4b7 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/date-picker.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/date-picker.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { CalendarIcon } from "lucide-react";
 
 import { FieldContainer, type FieldMetaProps } from "./shared";
 
@@ -88,7 +87,6 @@ export function DatePicker({
   value,
 }: DatePickerProps) {
   const id = React.useId();
-  const nativePickerRef = React.useRef<HTMLInputElement | null>(null);
   const formattedValue = React.useMemo(() => formatDateValue(value), [value]);
   const [textValue, setTextValue] = React.useState(formattedValue);
 
@@ -160,30 +158,6 @@ export function DatePicker({
     setTextValue(formattedValue);
   };
 
-  const openNativePicker = () => {
-    if (isDisabled) {
-      return;
-    }
-    const picker = nativePickerRef.current;
-
-    if (!picker) {
-      return;
-    }
-
-    const pickerWithShow = picker as HTMLInputElement & {
-      showPicker?: () => void;
-    };
-
-    if (typeof pickerWithShow.showPicker === "function") {
-      pickerWithShow.showPicker();
-
-      return;
-    }
-
-    picker.focus();
-    picker.click();
-  };
-
   return (
     <FieldContainer
       description={description}
@@ -193,71 +167,40 @@ export function DatePicker({
       isRequired={isRequired}
       label={label}
     >
-      {shouldUseTextInput ? (
-        <div className="flex items-center gap-2">
-          <Input
-            aria-invalid={isInvalid}
-            className={cn("flex-1", className)}
-            disabled={isDisabled}
-            id={id}
-            inputMode="numeric"
-            placeholder="YYYY-MM-DD"
-            required={isRequired}
-            type="text"
-            value={textValue}
-            onBlur={commitTextInput}
-            onChange={(event) => {
-              const nextValue = event.target.value;
+      <Input
+        aria-invalid={isInvalid}
+        className={cn(className)}
+        disabled={isDisabled}
+        id={id}
+        inputMode={shouldUseTextInput ? "numeric" : undefined}
+        placeholder={shouldUseTextInput ? "YYYY-MM-DD" : undefined}
+        required={isRequired}
+        type={shouldUseTextInput ? "text" : "date"}
+        value={shouldUseTextInput ? textValue : formattedValue}
+        onChange={(event) => {
+          const nextValue = event.target.value;
 
-              setTextValue(nextValue);
-              notifyTextDateChange(nextValue);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                commitTextInput();
+          if (shouldUseTextInput) {
+            setTextValue(nextValue);
+            notifyTextDateChange(nextValue);
+
+            return;
+          }
+
+          notifyNativeDateChange(nextValue);
+        }}
+        onBlur={shouldUseTextInput ? commitTextInput : undefined}
+        onKeyDown={
+          shouldUseTextInput
+            ? (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitTextInput();
+                }
               }
-            }}
-          />
-          <button
-            aria-label="打开日历选择器"
-            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-input bg-background text-default-600 shadow-sm transition-colors hover:bg-default-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={isDisabled}
-            type="button"
-            onClick={openNativePicker}
-          >
-            <CalendarIcon className="h-4 w-4" />
-          </button>
-          <input
-            ref={nativePickerRef}
-            aria-hidden="true"
-            className="sr-only"
-            disabled={isDisabled}
-            tabIndex={-1}
-            type="date"
-            value={formattedValue}
-            onChange={(event) => {
-              const nextValue = event.target.value;
-
-              setTextValue(nextValue);
-              notifyNativeDateChange(nextValue);
-            }}
-          />
-        </div>
-      ) : (
-        <Input
-          aria-invalid={isInvalid}
-          className={cn(className)}
-          disabled={isDisabled}
-          id={id}
-          required={isRequired}
-          type="date"
-          value={formattedValue}
-          onChange={(event) => {
-            notifyNativeDateChange(event.target.value);
-          }}
-        />
-      )}
+            : undefined
+        }
+      />
     </FieldContainer>
   );
 }
diff --git a/vite-frontend/src/shadcn-bridge/heroui/select.tsx b/vite-frontend/src/shadcn-bridge/heroui/select.tsx
index 8ceaa79..7c8f07d 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/select.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/select.tsx
@@ -37,6 +37,7 @@ export interface SelectProps<T = unknown> extends FieldMetaProps {
   selectionMode?: SelectionMode;
   size?: "sm" | "md" | "lg";
   variant?: string;
+  dropdownPlacement?: "bottom" | "top";
 }
 
 export interface SelectItemProps {
@@ -163,6 +164,7 @@ export function Select<T>({
   selectedKeys,
   selectionMode = "single",
   size,
+  dropdownPlacement = "bottom",
 }: SelectProps<T>) {
   const generatedId = React.useId();
   const options = React.useMemo(
@@ -284,9 +286,16 @@ export function Select<T>({
       return null;
     }
 
+    const placementClasses = dropdownPlacement === "top"
+      ? "bottom-full mb-1"
+      : "top-full mt-1";
+
     return (
       <div
-        className="absolute left-0 top-full z-50 mt-1 max-h-56 w-full space-y-1 overflow-y-auto rounded-md border border-divider bg-background p-2 shadow-md"
+        className={cn(
+          "absolute left-0 z-50 w-full space-y-1 overflow-y-auto rounded-md border border-divider bg-background p-2 shadow-md max-h-56",
+          placementClasses
+        )}
         id={`${generatedId}-listbox`}
         ref={listboxRef}
         role="listbox"
diff --git a/vite-frontend/src/shadcn-bridge/heroui/table.tsx b/vite-frontend/src/shadcn-bridge/heroui/table.tsx
index c05be1f..800fc23 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/table.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/table.tsx
@@ -4,11 +4,15 @@ import { cn } from "@/lib/utils";
 
 interface TableClassNames {
   th?: string;
+  td?: string;
+  tr?: string;
   wrapper?: string;
 }
 
 interface TableStyleContextValue {
   thClassName?: string;
+  tdClassName?: string;
+  trClassName?: string;
 }
 
 const TableStyleContext = React.createContext<TableStyleContextValue>({});
@@ -24,7 +28,13 @@ export function Table({
   ...props
 }: TableProps) {
   return (
-    <TableStyleContext.Provider value={{ thClassName: classNames?.th }}>
+    <TableStyleContext.Provider
+      value={{
+        thClassName: classNames?.th,
+        tdClassName: classNames?.td,
+        trClassName: classNames?.tr,
+      }}
+    >
       <div
         className={cn("w-full overflow-auto rounded-md", classNames?.wrapper)}
       >
@@ -151,11 +161,23 @@ export function TableColumn({
 }
 
 export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  const { trClassName } = React.useContext(TableStyleContext);
+
   return (
-    <tr className={cn("border-b last:border-b-0", className)} {...props} />
+    <tr
+      className={cn("border-b last:border-b-0", trClassName, className)}
+      {...props}
+    />
   );
 }
 
 export function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return <td className={cn("px-3 py-2 align-middle", className)} {...props} />;
+  const { tdClassName } = React.useContext(TableStyleContext);
+
+  return (
+    <td
+      className={cn("px-3 py-2 align-middle", tdClassName, className)}
+      {...props}
+    />
+  );
 }