diff --git a/homepage/src/components/Home/Version/FunctionTable.tsx b/homepage/src/components/Home/Version/FunctionTable.tsx
index 834878cf..a7143074 100644
--- a/homepage/src/components/Home/Version/FunctionTable.tsx
+++ b/homepage/src/components/Home/Version/FunctionTable.tsx
@@ -13,7 +13,7 @@ import {
   alpha,
   Tooltip,
 } from "@mui/material";
-import { useState } from "react";
+import React, { useState } from "react";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import { Icon } from "@/components";
@@ -32,83 +32,124 @@ const Unlimited = () => {
 };
 
 const FunctionTable = () => {
-  const [open, setOpen] = useState(true);
-  const bodyCell = [
-    {
-      name: "智能语义分析引擎",
-      tip: "",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "可防护站点数量",
-      experience: <Unlimited />,
-      basics: <Unlimited />,
-    },
-    {
-      name: "自定义白名单",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "自定义黑名单",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "反向代理接入",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "软件形态",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "硬件形态",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "智能业务建模",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "动态防护",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "分布式集群部署",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
+  const [open, setOpen] = useState<string[]>(["基本功能", "高级防护能力", "部署形态", "流量接入方式"]);
+
+  const cells = [
     {
-      name: "SDK 接入",
-      experience: <NotSupport />,
-      basics: <Support />,
+      title: "基本功能",
+      data: [
+        {
+          name: "可视化 DashBoard",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "自定义黑白名单",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "自定义防护策略",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "可防护站点数量",
+          experience: <Unlimited />,
+          basics: <Unlimited />,
+        }, {
+          name: "可支撑流量大小",
+          experience: <Unlimited />,
+          basics: <Unlimited />,
+        }
+      ]
     },
     {
-      name: "透明代理接入",
-      experience: <NotSupport />,
-      basics: <Support />,
+      title: "高级防护能力",
+      data: [
+        {
+          name: "智能语义分析引擎",
+          tip: "",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "智能业务建模",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "动态防护",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "API 防护",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "Bot 管理",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "拟态防护",
+          experience: <NotSupport />,
+          basics: <Support />,
+        },
+      ]
     },
     {
-      name: "透明桥接接入",
-      experience: <NotSupport />,
-      basics: <Support />,
+      title: "部署形态",
+      data: [
+        {
+          name: "软件形态",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "硬件形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "分布式集群形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "云原生 K8S 集群形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }
+      ]
     },
     {
-      name: "旁路镜像接入",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-  ];
+      title: "流量接入方式",
+      data: [
+        {
+          name: "反向代理接入",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "SDK 接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "透明代理接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "透明桥接接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "旁路镜像接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }
+      ]
+    }
+  ]
 
-  const handleClick = () => {
-    setOpen(!open);
+  const handleClick = (id: string) => {
+    if (open?.includes(id)) {
+      const udpateOpen = [...open]
+      udpateOpen.splice(open?.indexOf(id), 1)
+      setOpen([...udpateOpen])
+    } else {
+      setOpen((open) => [...open, id])
+    }
   };
 
   return (
@@ -162,77 +203,79 @@ const FunctionTable = () => {
           </TableHead>
         </Table>
       </TableContainer>
-      <ListItem
-        onClick={handleClick}
-        sx={{
-          backgroundColor: "#EFF1F8",
-          borderRadius: "4px",
-          cursor: "pointer",
-          pl: "20px",
-        }}
-      >
-        <ListItemText
-          primary="详细参数"
-          sx={{ ".MuiTypography-root": { fontSize: "16px" } }}
-        />
-        <ListItemIcon sx={{ color: "#000" }}>
-          {open ? <ExpandLess /> : <ExpandMore />}
-        </ListItemIcon>
-      </ListItem>
-      <Collapse in={open} timeout="auto" unmountOnExit sx={{ width: "100%" }}>
-        <TableContainer>
-          <Table
+      {cells?.map(data =>
+        <React.Fragment key={`sub-table-${data.title}`}>
+          <ListItem
+            onClick={() => handleClick(data?.title)}
             sx={{
-              ".MuiTableRow-root": {
-                "&:last-of-type": {
-                  ".MuiTableCell-root": {
-                    borderBottom: "none",
-                  },
-                },
-              },
-              ".MuiTableCell-root": {
-                pl: "20px !important",
-                pr: "8px !important",
-                py: "12px !important",
-                backgroundColor: "transparent !important",
-                color: "#000",
-                borderRight: "1px solid",
-                borderColor: "rgba(0,0,0,.04)",
-                "&:last-of-type": {
-                  borderRight: "none",
-                },
-              },
+              backgroundColor: "#EFF1F8",
+              borderRadius: "4px",
+              cursor: "pointer",
+              pl: "20px",
             }}
           >
-            <TableBody
-              sx={{
-                backgroundColor: alpha("#EFF1F8", 0.6),
-              }}
-            >
-              {bodyCell.map((item) => (
-                <TableRow key={item.name}>
-                  <TableCell sx={{ width: "33%" }}>
-                    <Box sx={{ display: "flex", alignItems: "center" }}>
-                      {item.name}
-                      <Tooltip title={item.tip} arrow placement="right">
-                        <Box component="span" sx={{ ml: 1 }}>
-                          <Icon type="icon-bangzhu1" />
+            <ListItemText
+              primary={data.title}
+              sx={{ ".MuiTypography-root": { fontSize: "16px" } }}
+            />
+            <ListItemIcon sx={{ color: "#000" }}>
+              {open?.includes(data?.title) ? <ExpandLess /> : <ExpandMore />}
+            </ListItemIcon>
+          </ListItem>
+          <Collapse in={open?.includes(data?.title)} timeout="auto" unmountOnExit sx={{ width: "100%" }}>
+            <TableContainer>
+              <Table
+                sx={{
+                  ".MuiTableRow-root": {
+                    "&:last-of-type": {
+                      ".MuiTableCell-root": {
+                        borderBottom: "none",
+                      },
+                    },
+                  },
+                  ".MuiTableCell-root": {
+                    pl: "20px !important",
+                    pr: "8px !important",
+                    py: "12px !important",
+                    backgroundColor: "transparent !important",
+                    color: "#000",
+                    borderRight: "1px solid",
+                    borderColor: "rgba(0,0,0,.04)",
+                    "&:last-of-type": {
+                      borderRight: "none",
+                    },
+                  },
+                }}
+              >
+                <TableBody
+                  sx={{
+                    backgroundColor: alpha("#EFF1F8", 0.6),
+                  }}
+                >
+                  {data.data.map((item) => (
+                    <TableRow key={item.name}>
+                      <TableCell sx={{ width: "33%" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                          {item.name}
+                          <Tooltip title={item.tip} arrow placement="right">
+                            <Box component="span" sx={{ ml: 1 }}>
+                              <Icon type="icon-bangzhu1" />
+                            </Box>
+                          </Tooltip>
                         </Box>
-                      </Tooltip>
-                    </Box>
-                  </TableCell>
-                  <TableCell sx={{ width: "33%" }} align="center">
-                    {item.experience}
-                  </TableCell>
-                  <TableCell sx={{ width: "33%" }} align="center">
-                    {item.basics}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Collapse>
+                      </TableCell>
+                      <TableCell sx={{ width: "33%" }} align="center">
+                        {item.experience}
+                      </TableCell>
+                      <TableCell sx={{ width: "33%" }} align="center">
+                        {item.basics}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Collapse></React.Fragment>)}
     </>
   );
 };