diff --git a/web/src/pages/functionTemplate/funcTemplateItem/TemplateFunctionInfo.tsx b/web/src/pages/functionTemplate/funcTemplateItem/TemplateFunctionInfo.tsx
deleted file mode 100644
index 574a25f81c..0000000000
--- a/web/src/pages/functionTemplate/funcTemplateItem/TemplateFunctionInfo.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useState } from "react";
-import { Divider, useColorMode } from "@chakra-ui/react";
-import clsx from "clsx";
-
-import MonacoEditor from "../Mods/MonacoEditor";
-
-import { TFunctionTemplate } from "@/apis/typing";
-
-const TemplateFunctionInfo = ({
-  template,
-  popover = false,
-}: {
-  template: TFunctionTemplate;
-  popover?: boolean;
-}) => {
-  const { colorMode } = useColorMode();
-  const darkMode = colorMode === "dark";
-
-  const [currentFunction, setCurrentFunction] = useState<TFunctionTemplate["items"][number]>(
-    template.items[0],
-  );
-
-  return (
-    <>
-      <div className="flex justify-between">
-        <div className="w-full">
-          <div className="truncate pb-2 text-[24px] font-semibold">{template.name}</div>
-          <div className="truncate text-second">{template.description}</div>
-        </div>
-      </div>
-      <Divider marginY={4} variant="dashed" />
-      <div className="mb-2 flex w-full overflow-auto">
-        {template.items.map((item) => (
-          <div
-            className={clsx(
-              "mb-2 mr-2 cursor-pointer rounded-md border px-8 py-1 text-[14px]",
-              !darkMode && "bg-[#F6F8F9]",
-              "hover:border-blue-400 hover:bg-blue-100 hover:text-blue-700",
-              currentFunction?.name === item.name && "border-blue-400 bg-blue-100 text-blue-700",
-            )}
-            onClick={() => {
-              setCurrentFunction(item);
-            }}
-            key={item.name}
-          >
-            {item.name}
-          </div>
-        ))}
-      </div>
-      <div
-        className="overflow-auto"
-        style={{
-          height: popover ? "400px" : "60vh",
-        }}
-      >
-        <MonacoEditor
-          value={currentFunction.source.code}
-          colorMode={colorMode}
-          readOnly={true}
-          title={currentFunction.name}
-          currentFunction={currentFunction}
-        />
-      </div>
-    </>
-  );
-};
-
-export default TemplateFunctionInfo;
diff --git a/web/src/pages/functionTemplate/funcTemplateItem/index.tsx b/web/src/pages/functionTemplate/funcTemplateItem/index.tsx
deleted file mode 100644
index 6425e04424..0000000000
--- a/web/src/pages/functionTemplate/funcTemplateItem/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { ChevronRightIcon } from "@chakra-ui/icons";
-import { useColorMode } from "@chakra-ui/react";
-import clsx from "clsx";
-
-import { changeURL } from "@/utils/format";
-
-import TemplateInfo from "../Mods/TemplateInfo";
-import { useGetFunctionTemplateUsedByQuery, useGetOneFunctionTemplateQuery } from "../service";
-
-import TemplateFunctionInfo from "./TemplateFunctionInfo";
-
-import { TFunctionTemplate } from "@/apis/typing";
-
-const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isModal: boolean }) => {
-  const { setSelectedItem, isModal } = props;
-  const { colorMode } = useColorMode();
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  const [template, setTemplate] = useState<TFunctionTemplate>();
-  const [usedBy, setUsedBy] = useState<any[]>([]);
-  const pathname = window.location.href;
-  const id = pathname.split("/").pop();
-
-  useGetOneFunctionTemplateQuery(
-    { id: id },
-    {
-      enabled: (id as string)?.length > 12,
-      onSuccess: (data: any) => {
-        setTemplate(data.data[0]);
-      },
-    },
-  );
-
-  useGetFunctionTemplateUsedByQuery(
-    { id: id },
-    {
-      enabled: (id as string)?.length > 12,
-      onSuccess: (data: any) => {
-        setUsedBy(data.data.list);
-      },
-    },
-  );
-
-  return (
-    <div
-      className={clsx(
-        "flex flex-col",
-        colorMode === "dark" ? "" : "bg-white",
-        isModal ? "" : "px-20 pt-8",
-      )}
-    >
-      <div className="text-lg">
-        <span
-          className="cursor-pointer text-second"
-          onClick={() => {
-            navigate(changeURL(`/recommended`));
-            setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
-          }}
-        >
-          {t("HomePage.NavBar.funcTemplate")}
-        </span>
-        <span className="px-3">
-          <ChevronRightIcon />
-        </span>
-        <span>{t("Template.Details")}</span>
-      </div>
-      {template && (
-        <div className="flex pt-3">
-          <div className="mr-9 h-full w-4/5">
-            <TemplateFunctionInfo template={template} />
-          </div>
-          <div className="w-1/5">
-            <TemplateInfo functionTemplate={template} usedBy={usedBy} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FuncTemplateItem;