diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index bb88f3cca5..7e9e46f168 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -499,7 +499,8 @@
     "AddMore": "Add More",
     "Save": "Save",
     "Recommended": "Recommended Template",
-    "confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?"
+    "Confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?",
+    "ConfirmDeleteTemplate": "Are you sure you want to delete this function template？"
   },
   "Create function template success": "Create function template successfully",
   "Publish": "release",
@@ -509,4 +510,4 @@
   "DaysAgo": " Days Ago",
   "WeeksAgo": " Weeks Ago",
   "MonthsAgo": " Months Ago"
-}
+}
\ No newline at end of file
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
index fffd4a1935..e0853aee9c 100644
--- a/web/public/locales/zh-CN/translation.json
+++ b/web/public/locales/zh-CN/translation.json
@@ -478,7 +478,8 @@
     "AddMore": "继续添加",
     "Save": "保存",
     "Recommended": "推荐模板",
-    "confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？"
+    "Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
+    "ConfirmDeleteTemplate": "确定删除模板吗"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -509,4 +510,4 @@
   "DaysAgo": " 天前",
   "MonthsAgo": " 月前",
   "WeeksAgo": " 周前"
-}
+}
\ No newline at end of file
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
index dbcd541221..73d3ed0c51 100644
--- a/web/public/locales/zh/translation.json
+++ b/web/public/locales/zh/translation.json
@@ -478,7 +478,8 @@
     "AddMore": "继续添加",
     "Save": "保存",
     "Recommended": "推荐模板",
-    "confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？"
+    "Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
+    "ConfirmDeleteTemplate": "确定删除模板吗"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -509,4 +510,4 @@
   "DaysAgo": " 天前",
   "MonthsAgo": " 月前",
   "WeeksAgo": " 周前"
-}
+}
\ No newline at end of file
diff --git a/web/src/App.css b/web/src/App.css
index 62f0540e1a..6a4d9329c9 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -71,8 +71,3 @@ a {
     background: black;
   }
 }
-
-.chakra-portal {
-  position: relative;
-  z-index: 9999;
-}
\ No newline at end of file
diff --git a/web/src/layouts/Template.tsx b/web/src/layouts/Template.tsx
index efbc0be939..3ecfb88e0e 100644
--- a/web/src/layouts/Template.tsx
+++ b/web/src/layouts/Template.tsx
@@ -18,21 +18,30 @@ export default function TemplateLayout() {
   }, [init]);
 
   return (
-    <div className={clsx("h-screen overflow-hidden", darkMode ? "" : "bg-white")}>
-      <div className={clsx("flex justify-center", darkMode ? "" : "bg-gray-100")}>
+    <>
+      <div
+        className={clsx(
+          "sticky top-0 z-50 flex justify-center",
+          darkMode ? "" : "border-b border-[#E4E9EE] bg-gray-100",
+        )}
+      >
         <Header width="max-w-screen-xl" />
       </div>
-      <div className={clsx("flex justify-center", darkMode ? "" : "border-t border-[#E4E9EE]")}>
-        <div className="w-full max-w-screen-xl">
-          {loading ? (
-            <Center style={{ minHeight: 300 }}>
-              <Spinner />
-            </Center>
-          ) : (
-            <Outlet />
-          )}
+      <div className="overflow-auto">
+        <div className="fixed bottom-0 left-0 right-0 top-0 -z-40 bg-white"></div>
+
+        <div className="flex justify-center">
+          <div className="w-full max-w-screen-xl">
+            {loading ? (
+              <Center style={{ minHeight: 300 }}>
+                <Spinner />
+              </Center>
+            ) : (
+              <Outlet />
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
index ee5f86adb5..dd4f9cae89 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
@@ -36,7 +36,7 @@ const FuncTemplate = (props: { children?: React.ReactElement }) => {
 
       <Modal isOpen={isOpen} onClose={handleModalClose}>
         <ModalOverlay />
-        <ModalContent minH={"90%"} maxW={"80%"} m={"auto"}>
+        <ModalContent height={"95%"} maxW={"80%"} m={"auto"} overflow={"auto"}>
           <ModalHeader pb={-0.5}>{t("HomePage.NavBar.funcTemplate")}</ModalHeader>
           <ModalBody>
             <ModalCloseButton />
diff --git a/web/src/pages/functionTemplate/CreateFuncTemplate/index.tsx b/web/src/pages/functionTemplate/CreateFuncTemplate/index.tsx
index 0e4388d034..9788849f10 100644
--- a/web/src/pages/functionTemplate/CreateFuncTemplate/index.tsx
+++ b/web/src/pages/functionTemplate/CreateFuncTemplate/index.tsx
@@ -7,6 +7,7 @@ import { Box, Button, Radio, RadioGroup, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import { TextIcon } from "@/components/CommonIcon";
+import ConfirmButton from "@/components/ConfirmButton";
 import FileTypeIcon from "@/components/FileTypeIcon";
 
 import {
@@ -145,9 +146,14 @@ export default function CreateFuncTemplate() {
   return (
     <div className={clsx("flex flex-col px-20 2xl:px-48", colorMode === "dark" ? "" : "bg-white")}>
       <div className="pt-8 text-lg">
-        <a href="/market/templates/my" className="text-second">
-          {t("Template.MyTemplate")}
-        </a>
+        <span
+          className="cursor-pointer text-second"
+          onClick={() => {
+            navigate(-1);
+          }}
+        >
+          {t("HomePage.NavBar.funcTemplate")}
+        </span>
         <span className="px-3">
           <ChevronRightIcon />
         </span>
@@ -273,17 +279,19 @@ export default function CreateFuncTemplate() {
 
           <div className="mt-4 flex justify-center pb-4">
             {isEdit && (
-              <Button
-                className="mr-12 w-36 bg-red-100"
-                variant={"warnText"}
-                onClick={async () => {
+              <ConfirmButton
+                headerText={t("Delete")}
+                bodyText={t("Template.ConfirmDeleteTemplate")}
+                onSuccessAction={async () => {
                   await deleteFunctionMutation.mutateAsync({ id: templateId });
                   showSuccess(t("DeleteSuccess"));
                   navigate("/market/templates/my");
                 }}
               >
-                {t("Delete")}
-              </Button>
+                <Button className="mr-4 w-36 bg-red-100" variant={"warnText"}>
+                  {t("Delete")}
+                </Button>
+              </ConfirmButton>
             )}
             <Button className="w-36" onClick={handleSubmit(onSubmit)}>
               {isEdit ? t("Template.Save") : t("Publish")}
@@ -300,10 +308,7 @@ export default function CreateFuncTemplate() {
                 return (
                   <div
                     key={item.name}
-                    className={clsx(
-                      "group my-3 flex cursor-pointer items-center justify-between rounded-md py-1 font-medium hover:opacity-100",
-                      darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100",
-                    )}
+                    className="my-3 flex items-center justify-between rounded-md py-1 font-medium hover:opacity-100"
                   >
                     <div className="flex w-10/12 items-center">
                       <FileTypeIcon type="ts" fontSize={18} />
@@ -326,10 +331,7 @@ export default function CreateFuncTemplate() {
                 return (
                   <Box
                     key={item.package.name}
-                    className={clsx(
-                      "group my-3 flex cursor-pointer items-center justify-between rounded-md py-1 font-medium",
-                      darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100",
-                    )}
+                    className="my-3 flex items-center justify-between py-1 font-medium"
                   >
                     <div>
                       <FileTypeIcon type="npm" />
@@ -340,9 +342,7 @@ export default function CreateFuncTemplate() {
                       <DeleteIcon
                         boxSize={3}
                         color={"gray.400"}
-                        className={clsx(
-                          "mr-2 opacity-0 hover:text-gray-800 group-hover:opacity-100",
-                        )}
+                        className="cursor-pointer hover:text-gray-800"
                         onClick={() => {
                           setPackageList(
                             packageList.filter((pkg) => pkg.package.name !== item.package.name),
diff --git a/web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx b/web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx
index 574a25f81c..aa90368d3e 100644
--- a/web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx
+++ b/web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx
@@ -22,21 +22,26 @@ const TemplateFunctionInfo = ({
 
   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>
+      {!popover && (
+        <div>
+          <div className="mb-2 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>
-      </div>
-      <Divider marginY={4} variant="dashed" />
-      <div className="mb-2 flex w-full overflow-auto">
+      )}
+      <div className="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]",
+              "mr-2 cursor-pointer whitespace-nowrap 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",
+              popover ? "mb-2" : "mb-4",
             )}
             onClick={() => {
               setCurrentFunction(item);
@@ -50,7 +55,7 @@ const TemplateFunctionInfo = ({
       <div
         className="overflow-auto"
         style={{
-          height: popover ? "400px" : "60vh",
+          height: popover ? "250px" : "60vh",
         }}
       >
         <MonacoEditor
@@ -59,6 +64,7 @@ const TemplateFunctionInfo = ({
           readOnly={true}
           title={currentFunction.name}
           currentFunction={currentFunction}
+          popover={popover}
         />
       </div>
     </>
diff --git a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
index 0c22db3312..741e0ed157 100644
--- a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
+++ b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
@@ -12,8 +12,8 @@ import TemplateFunctionInfo from "./TemplateFunctionInfo";
 
 import { TFunctionTemplate } from "@/apis/typing";
 
-const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isModal: boolean }) => {
-  const { setSelectedItem, isModal } = props;
+const FuncTemplateItem = (props: { isModal: boolean }) => {
+  const { isModal } = props;
   const { colorMode } = useColorMode();
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -56,7 +56,6 @@ const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isMo
           className="cursor-pointer text-second"
           onClick={() => {
             navigate(-1);
-            setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
           }}
         >
           {t("HomePage.NavBar.funcTemplate")}
diff --git a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
index 6f60553275..e604892411 100644
--- a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
@@ -77,6 +77,7 @@ const MonacoEditor = (props: {
   setCurrentFunction?: any;
   functionList?: any;
   setFunctionList?: any;
+  popover?: boolean;
 }) => {
   const {
     readOnly,
@@ -88,6 +89,7 @@ const MonacoEditor = (props: {
     setCurrentFunction,
     functionList,
     setFunctionList,
+    popover,
   } = props;
   const monacoEl = useRef<HTMLDivElement | null>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
@@ -113,7 +115,7 @@ const MonacoEditor = (props: {
         formatOnPaste: true,
         overviewRulerLanes: 0,
         lineNumbersMinChars: 4,
-        fontSize: 14,
+        fontSize: popover ? 10 : 14,
         theme: darkMode ? "lafEditorThemeDark" : "lafEditorTheme",
       });
     }
@@ -143,7 +145,7 @@ const MonacoEditor = (props: {
   return (
     <div
       className={clsx(
-        "h-full overflow-hidden rounded-md border",
+        "h-full overflow-hidden rounded-md border border-grayModern-200",
         darkMode ? "bg-[#202631]" : "bg-white",
       )}
     >
diff --git a/web/src/pages/functionTemplate/Mods/PaginationBar/index.tsx b/web/src/pages/functionTemplate/Mods/PaginationBar/index.tsx
index 56521ed54b..6930486dd1 100644
--- a/web/src/pages/functionTemplate/Mods/PaginationBar/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/PaginationBar/index.tsx
@@ -11,7 +11,7 @@ const PaginationBar = (props: { page: number; setPage: any; total?: number; page
   const darkMode = colorMode === "dark";
 
   return (
-    <div className="flex w-full flex-wrap-reverse items-center justify-end pb-8 pr-16 pt-4 text-lg">
+    <div className="flex w-full flex-wrap-reverse items-center justify-end pb-8 pr-8 pt-4 text-lg">
       <span className="mr-4">
         {t("Template.Total")}: {total}
       </span>
diff --git a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
index 57318e37c6..a59b83b4ed 100644
--- a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
+++ b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
@@ -9,8 +9,10 @@ import IconWrap from "@/components/IconWrap";
 import { formatDate } from "@/utils/format";
 
 import { useDeleteFunctionTemplateMutation } from "../../service";
+import TemplatePopOver from "../TemplatePopover/TemplatePopover";
 
 import { TFunctionTemplate } from "@/apis/typing";
+import useGlobalStore from "@/pages/globalStore";
 
 interface IProps {
   className?: string;
@@ -25,6 +27,7 @@ const TemplateCard = (props: IProps) => {
   const navigate = useNavigate();
   const deleteFunctionMutation = useDeleteFunctionTemplateMutation();
   const { t } = useTranslation();
+  const { showSuccess } = useGlobalStore();
 
   const darkMode = colorMode === "dark";
 
@@ -43,101 +46,104 @@ const TemplateCard = (props: IProps) => {
           e.currentTarget.style.boxShadow = "0px 2px 4px rgba(0, 0, 0, 0.1)";
         }}
       >
-        <div className="mx-5" onClick={onClick}>
-          <div className={clsx("mb-3 flex justify-between pt-4")}>
-            <div
-              className={clsx(
-                "flex items-center text-2xl font-semibold",
-                templateCategory === "my" ? "w-9/12" : "w-full",
-              )}
-            >
-              <div className="truncate">{template.name}</div>
-            </div>
-            {templateCategory === "my" && (
-              <div className="flex items-center">
-                <span
-                  className={clsx(
-                    "mr-3 px-2 font-semibold",
-                    template.private === false
-                      ? "bg-blue-100 text-blue-600"
-                      : "bg-adora-200 text-adora-600",
-                  )}
-                >
-                  {template.private ? "Private" : "Public"}
-                </span>
-                <Menu placement="bottom-end">
-                  <MenuButton
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
+        <TemplatePopOver template={template}>
+          <div className="mx-5" onClick={onClick}>
+            <div className={clsx("mb-3 flex justify-between pt-4")}>
+              <div
+                className={clsx(
+                  "flex items-center text-2xl font-semibold",
+                  templateCategory === "my" ? "w-9/12" : "w-full",
+                )}
+              >
+                <div className="truncate">{template.name}</div>
+              </div>
+              {templateCategory === "my" && (
+                <div className="flex items-center">
+                  <span
+                    className={clsx(
+                      "mr-3 px-2 font-semibold",
+                      template.private === false
+                        ? "bg-blue-100 text-blue-600"
+                        : "bg-adora-200 text-adora-600",
+                    )}
                   >
-                    <IconWrap>
-                      <BsThreeDotsVertical size={12} />
-                    </IconWrap>
-                  </MenuButton>
-                  <MenuList width={12} minW={24}>
-                    <MenuItem
+                    {template.private ? "Private" : "Public"}
+                  </span>
+                  <Menu placement="bottom-end">
+                    <MenuButton
                       onClick={(e) => {
                         e.stopPropagation();
-                        navigate(`/market/templates/${templateCategory}/${template._id}/edit`);
                       }}
                     >
-                      {t("Template.EditTemplate")}
-                    </MenuItem>
-                    <MenuItem
-                      onClick={async (e) => {
-                        e.stopPropagation();
-                        await deleteFunctionMutation.mutateAsync({ id: template._id });
-                        window.location.reload();
-                      }}
-                    >
-                      {t("Template.DeleteTemplate")}
-                    </MenuItem>
-                  </MenuList>
-                </Menu>
-              </div>
-            )}
-          </div>
-
-          <div
-            className={clsx(
-              "mb-3 flex h-4 items-center truncate",
-              darkMode ? "text-gray-300" : "text-second",
-            )}
-          >
-            {template.description}
-          </div>
-
-          <div className="flex w-full overflow-hidden">
-            {template.items.map((item) => {
-              return (
-                <div
-                  key={item.name}
-                  className="mr-2 whitespace-nowrap rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700"
-                >
-                  {item.name}
+                      <IconWrap>
+                        <BsThreeDotsVertical size={12} />
+                      </IconWrap>
+                    </MenuButton>
+                    <MenuList width={12} minW={24}>
+                      <MenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigate(`/market/templates/${templateCategory}/${template._id}/edit`);
+                        }}
+                      >
+                        {t("Template.EditTemplate")}
+                      </MenuItem>
+                      <MenuItem
+                        onClick={async (e) => {
+                          e.stopPropagation();
+                          await deleteFunctionMutation.mutateAsync({ id: template._id });
+                          showSuccess(t("DeleteSuccess"));
+                          window.location.reload();
+                        }}
+                      >
+                        {t("Template.DeleteTemplate")}
+                      </MenuItem>
+                    </MenuList>
+                  </Menu>
                 </div>
-              );
-            })}
-          </div>
+              )}
+            </div>
 
-          <div className="my-3 flex items-center justify-between">
-            <span
+            <div
               className={clsx(
-                "flex items-center pr-2",
-                darkMode ? "text-gray-300" : "text-grayModern-500",
+                "mb-3 flex h-4 items-center truncate",
+                darkMode ? "text-gray-300" : "text-second",
               )}
             >
-              <TimeIcon className="mr-1.5" />
-              {t("Template.updatedAt")} {formatDate(template.updatedAt)}
-            </span>
-            <div className="flex text-base">
-              <span className="pl-2">
-                <LikeIcon /> {template.star}
+              {template.description}
+            </div>
+
+            <div className="flex w-full overflow-hidden">
+              {template.items.map((item) => {
+                return (
+                  <div
+                    key={item.name}
+                    className="mr-2 whitespace-nowrap rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700"
+                  >
+                    {item.name}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="my-3 flex items-center justify-between">
+              <span
+                className={clsx(
+                  "flex items-center pr-2",
+                  darkMode ? "text-gray-300" : "text-grayModern-500",
+                )}
+              >
+                <TimeIcon className="mr-1.5" />
+                {t("Template.updatedAt")} {formatDate(template.updatedAt)}
               </span>
+              <div className="flex text-base">
+                <span className="pl-2">
+                  <LikeIcon /> {template.star}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
+        </TemplatePopOver>
       </div>
     </div>
   );
diff --git a/web/src/pages/functionTemplate/Mods/TemplatePopover/TemplatePopover.tsx b/web/src/pages/functionTemplate/Mods/TemplatePopover/TemplatePopover.tsx
index 27a978707d..3dc22b9c4e 100644
--- a/web/src/pages/functionTemplate/Mods/TemplatePopover/TemplatePopover.tsx
+++ b/web/src/pages/functionTemplate/Mods/TemplatePopover/TemplatePopover.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal } from "@chakra-ui/react";
+import { Popover, PopoverBody, PopoverContent, PopoverTrigger } from "@chakra-ui/react";
 
 import TemplateFunctionInfo from "../../FuncTemplateItem/TemplateFunctionInfo";
 
@@ -12,20 +12,23 @@ const TemplatePopOver = (props: { children?: ReactNode; template: TFunctionTempl
       trigger="hover"
       isLazy
       preventOverflow
-      offset={[80, -80]}
-      placement="auto"
-      strategy="fixed"
+      placement="auto-start"
+      strategy="absolute"
+      openDelay={500}
     >
       <PopoverTrigger>
         <span>{children}</span>
       </PopoverTrigger>
-      <Portal appendToParentPortal>
-        <PopoverContent width={761} height={561}>
-          <PopoverBody px="6" py="4">
-            <TemplateFunctionInfo template={template} popover />
-          </PopoverBody>
-        </PopoverContent>
-      </Portal>
+      <PopoverContent
+        width={528}
+        height={314}
+        borderRadius={12}
+        boxShadow={"0px 11px 20px 0px rgba(0, 0, 0, 0.25);"}
+      >
+        <PopoverBody px="6" py="4">
+          <TemplateFunctionInfo template={template} popover />
+        </PopoverBody>
+      </PopoverContent>
     </Popover>
   );
 };
diff --git a/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx b/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx
index 36ad095bd8..cbbbd688a5 100644
--- a/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx
@@ -88,7 +88,7 @@ const UseTemplateModal = (props: { children: any; templateId: string; packageLis
                     <ConfirmButton
                       headerText={t("Confirm")}
                       confirmButtonText={String(t("Confirm"))}
-                      bodyText={t("Template.confirm")}
+                      bodyText={t("Template.Confirm")}
                       onSuccessAction={async () => {
                         const res = await useTemplateMutation.mutateAsync({
                           appid: item?.appid,
diff --git a/web/src/pages/functionTemplate/index.tsx b/web/src/pages/functionTemplate/index.tsx
index 7175f6aa37..0a49d60684 100644
--- a/web/src/pages/functionTemplate/index.tsx
+++ b/web/src/pages/functionTemplate/index.tsx
@@ -23,7 +23,6 @@ import EmptyBox from "@/components/EmptyBox";
 import { changeURL } from "@/utils/format";
 
 import TemplateCard from "./Mods/TemplateCard/TemplateCard";
-import TemplatePopOver from "./Mods/TemplatePopover/TemplatePopover";
 import FuncTemplateItem from "./FuncTemplateItem";
 import {
   useGetFunctionTemplatesQuery,
@@ -302,23 +301,23 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
               </div>
             </div>
           </div>
-          <div className={clsx("flex flex-wrap", isModal ? "pl-52" : "pl-72 pr-8")}>
+          <div className={isModal ? "pl-52" : "pl-72 pr-8"}>
             {isLoading ? (
-              <Center className="h-full w-full">
+              <Center className="w-full pt-36">
                 <Spinner />
               </Center>
             ) : templateList && templateList.list.length > 0 ? (
-              templateList.list.map((item) => (
-                <section
-                  className={clsx(
-                    "mb-3 min-w-[18rem]",
-                    selectedItem.value === "all" || selectedItem.value === "recommended"
-                      ? "w-1/3"
-                      : "w-1/2",
-                  )}
-                  key={item._id}
-                >
-                  <TemplatePopOver template={item}>
+              <div className="flex flex-wrap">
+                {templateList.list.map((item) => (
+                  <section
+                    className={clsx(
+                      "mb-3 min-w-[18rem]",
+                      selectedItem.value === "all" || selectedItem.value === "recommended"
+                        ? "w-1/3"
+                        : "w-1/2",
+                    )}
+                    key={item._id}
+                  >
                     <TemplateCard
                       onClick={() => {
                         navigate(changeURL(`/${item._id}`));
@@ -327,9 +326,17 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                       template={item}
                       templateCategory={selectedItem.value}
                     />
-                  </TemplatePopOver>
-                </section>
-              ))
+                  </section>
+                ))}
+                <PaginationBar
+                  page={page}
+                  setPage={setPage}
+                  total={templateList?.total || 0}
+                  pageSize={
+                    selectedItem.value === "all" || selectedItem.value === "recommended" ? 12 : 8
+                  }
+                />
+              </div>
             ) : (
               <div className="w-full pt-20">
                 <EmptyBox>
@@ -338,23 +345,9 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
               </div>
             )}
           </div>
-          {templateList && templateList.list.length > 0 && (
-            <PaginationBar
-              page={page}
-              setPage={setPage}
-              total={templateList?.total || 0}
-              pageSize={
-                selectedItem.value === "all" || selectedItem.value === "recommended" ? 12 : 8
-              }
-            />
-          )}
         </div>
       ) : (
-        <FuncTemplateItem
-          setSelectedItem={setSelectedItem}
-          selectedItem={selectedItem}
-          isModal={isModal!}
-        />
+        <FuncTemplateItem isModal={isModal!} />
       )}
     </div>
   );