diff --git a/ui/src/pages/SettingLayout.tsx b/ui/src/pages/SettingLayout.tsx
index 83c9ee11..e170e7e0 100644
--- a/ui/src/pages/SettingLayout.tsx
+++ b/ui/src/pages/SettingLayout.tsx
@@ -30,7 +30,7 @@ const SettingLayout = () => {
       <div className="text-muted-foreground border-b dark:border-stone-500 py-5">
         偏好设置
       </div>
-      <div className="w-full mt-5 p-3 flex justify-center">
+      <div className="w-full mt-5 p-0 md:p-3 flex justify-center">
         <Tabs defaultValue="account" className="w-full" value={tabValue}>
           <TabsList className="mx-auto">
             <TabsTrigger
@@ -62,7 +62,7 @@ const SettingLayout = () => {
               className="px-5"
             >
               <Megaphone size={14} />
-              <div className="ml-1">推送渠道</div>
+              <div className="ml-1">消息推送</div>
             </TabsTrigger>
           </TabsList>
           <TabsContent value={tabValue}>
diff --git a/ui/src/pages/setting/Notify.tsx b/ui/src/pages/setting/Notify.tsx
index de5ff52d..0fb66820 100644
--- a/ui/src/pages/setting/Notify.tsx
+++ b/ui/src/pages/setting/Notify.tsx
@@ -4,48 +4,54 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import React from "react";
 
 const Notify = () => {
   return (
-    <div>
-      <Accordion type={"multiple"} className="dark:text-stone-200">
-        <AccordionItem value="item-1" className="dark:border-stone-200">
-          <AccordionTrigger>邮箱</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
+    <>
+      <div className="border rounded-sm p-5">
+        <Accordion type={"multiple"} className="dark:text-stone-200">
+          <AccordionItem value="item-1" className="dark:border-stone-200">
+            <AccordionTrigger>模板</AccordionTrigger>
+            <AccordionContent>
+              <Input value="您有证书即将过期" />
+              <Textarea
+                className="mt-2"
+                value={
+                  "有{COUNT}张证书即将过期,域名分别为{DOMAINS},请保持关注！"
+                }
+              ></Textarea>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div className="border rounded-md p-5 mt-7">
+        <Accordion type={"multiple"} className="dark:text-stone-200">
+          <AccordionItem value="item-2" className="dark:border-stone-200">
+            <AccordionTrigger>钉钉</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </AccordionItem>
 
-        <AccordionItem value="item-2" className="dark:border-stone-200">
-          <AccordionTrigger>钉钉</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
+          <AccordionItem value="item-4" className="dark:border-stone-200">
+            <AccordionTrigger>Telegram</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </AccordionItem>
 
-        <AccordionItem value="item-3" className="dark:border-stone-200">
-          <AccordionTrigger>微信公众号</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-4" className="dark:border-stone-200">
-          <AccordionTrigger>Telegram</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-5" className="dark:border-stone-200">
-          <AccordionTrigger>Webhook</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
+          <AccordionItem value="item-5" className="dark:border-stone-200">
+            <AccordionTrigger>Webhook</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </>
   );
 };