diff --git a/package-lock.json b/package-lock.json
index 66c6f1b..d4fcc19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "client-vite",
       "version": "0.0.0",
       "dependencies": {
-        "@douyinfe/semi-ui": "^2.49.0",
+        "@douyinfe/semi-ui": "^2.51.3",
         "@lexical/react": "^0.12.5",
         "@monaco-editor/react": "^4.6.0",
         "axios": "^1.6.2",
@@ -469,34 +469,34 @@
       }
     },
     "node_modules/@douyinfe/semi-animation": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.49.0.tgz",
-      "integrity": "sha512-2x+mMAG/+yiEMWUNUepEkBwwCeurAZH6pCNJVyXufTLeU+yZab+/S9NK2y+lmEbZ9wvOE6nE2csHSGLaNsv7lg==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.51.3.tgz",
+      "integrity": "sha512-S9MUvbzHQoV70G29QNpdJvOnGvU5NoQjZDEgcBSBVLcuAVXVTgbl3Syld0CYSzWfVUIdTbK9l7eHYPN2D1Bf0w==",
       "dependencies": {
         "bezier-easing": "^2.1.0"
       }
     },
     "node_modules/@douyinfe/semi-animation-react": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.49.0.tgz",
-      "integrity": "sha512-z0mEdPOl3gPwJVMr4uCQFN6F6xIjlOOQ6SkOVZ6aMIEw1St/QD+HXgPAtP/LvBZZpu7T62rJquTk/gIqbeNEZw==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.51.3.tgz",
+      "integrity": "sha512-esalw4JW6IkzH6BkLvxHmogBlEuFDVmcPN5XNgpjpZCWUGk/qYHExxQ4Fcyp5BCNJDrKNgah4OOUDVPAzBiFPQ==",
       "dependencies": {
-        "@douyinfe/semi-animation": "2.49.0",
-        "@douyinfe/semi-animation-styled": "2.49.0",
+        "@douyinfe/semi-animation": "2.51.3",
+        "@douyinfe/semi-animation-styled": "2.51.3",
         "classnames": "^2.2.6"
       }
     },
     "node_modules/@douyinfe/semi-animation-styled": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.49.0.tgz",
-      "integrity": "sha512-v7WjtR7toe2q62L+jsbRB8e9HuAq+GrYy7mZs1NyeQqo29eH7098rwzawqBUsTJSDn9U4ptsNTVe2LJJmKyNDA=="
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.51.3.tgz",
+      "integrity": "sha512-wb59wgq23ZRh/ma47CW6KDOU9U8PH/j12sk6pvLRPVmCsKQC+Ir3t+TIGOsEAAuaNN860KnW6ks2iJKfgS/2DQ=="
     },
     "node_modules/@douyinfe/semi-foundation": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.49.0.tgz",
-      "integrity": "sha512-uUUxPZKkNrgghZdnhI+/SMnAQjvmE7PiqcUH1vWMi5VNjmMkWIFXVnNOHZX6YurgEFtloWSuIWU7kj2wxPUaoQ==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.51.3.tgz",
+      "integrity": "sha512-Tx9AVTkLhgaSsUo36XZP6OJhNPKE3qUv8u9STy/eDfCdZtBeqG0Zy5A6AkAR3Mnhp4PHyT8Nu8ix+XEcFS/tQQ==",
       "dependencies": {
-        "@douyinfe/semi-animation": "2.49.0",
+        "@douyinfe/semi-animation": "2.51.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -507,9 +507,9 @@
       }
     },
     "node_modules/@douyinfe/semi-icons": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.49.0.tgz",
-      "integrity": "sha512-1ZHyIAWNkspQybsaNNzeJTn3mNDC/AvZwwqYXTtMVUSGQhFBZnVUbzKazC8T8395PoqyZlcMQfy9EQco9DOJ2w==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.51.3.tgz",
+      "integrity": "sha512-jH2XEF3CIvMkPjTc0tNMw+VMFx+xP4DthGmfsyqDR2+wUMqtW+mW8Z5wee/rumyBuEKNEwifHNU6NskNNywLHw==",
       "dependencies": {
         "classnames": "^2.2.6"
       },
@@ -518,35 +518,35 @@
       }
     },
     "node_modules/@douyinfe/semi-illustrations": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.49.0.tgz",
-      "integrity": "sha512-zvm31F7zoO+gUHQwCna575wvrw2rRCQEikcBjr7pUkSuV5Q+ru9f1BU7I5XZ1+EgEEhxz6c/o/uwT8a0OkAfQA==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.51.3.tgz",
+      "integrity": "sha512-UK7i8+MT/pDwRMgOOint+JjnjdL2XsAGiMVKXsaxB4dz2OO+xa4QYcXg5Y62ggJwebKeKXJP0J22Dm3SG+hpxw==",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@douyinfe/semi-theme-default": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.49.0.tgz",
-      "integrity": "sha512-ndhZZqKAK9zXU7Hn892Mh2QkPtTA38F1T01rlRTZ/OVPHj3wUsLHBblvJ6j44YwbmEiDBtpg00AmouvxzKg+Tg==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.51.3.tgz",
+      "integrity": "sha512-WH3O3igZiYR2s2tPCyMz6GJmrITcP32gAgPCth7W6KofD3ez2JNDYhtSmwnsKEya9N3ER8ADRroZNbVrI4gK8A==",
       "dependencies": {
         "glob": "^7.1.6"
       }
     },
     "node_modules/@douyinfe/semi-ui": {
-      "version": "2.49.0",
-      "resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.49.0.tgz",
-      "integrity": "sha512-wqgOPeKF+AwGiTnqGeP0cWjTTpuH08O6H6fpWwk+cRAN7pXYFIWnm1etk4ZzumCySN9Uwa07Q967SyFfPElNSw==",
+      "version": "2.51.3",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.51.3.tgz",
+      "integrity": "sha512-uqyEeH9OrNpp4VOK/wKzpteEYoGaYv4IIJ9oYyyGGFpZgF4ev2azRs/rNGWgrPMYDCw/jAc32QD/edaBIsNbVQ==",
       "dependencies": {
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.49.0",
-        "@douyinfe/semi-animation-react": "2.49.0",
-        "@douyinfe/semi-foundation": "2.49.0",
-        "@douyinfe/semi-icons": "2.49.0",
-        "@douyinfe/semi-illustrations": "2.49.0",
-        "@douyinfe/semi-theme-default": "2.49.0",
+        "@douyinfe/semi-animation": "2.51.3",
+        "@douyinfe/semi-animation-react": "2.51.3",
+        "@douyinfe/semi-foundation": "2.51.3",
+        "@douyinfe/semi-icons": "2.51.3",
+        "@douyinfe/semi-illustrations": "2.51.3",
+        "@douyinfe/semi-theme-default": "2.51.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -2187,9 +2187,9 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "node_modules/clsx": {
       "version": "1.2.1",
diff --git a/package.json b/package.json
index 1edc03a..3b46123 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-ui": "^2.49.0",
+    "@douyinfe/semi-ui": "^2.51.3",
     "@lexical/react": "^0.12.5",
     "@monaco-editor/react": "^4.6.0",
     "axios": "^1.6.2",
diff --git a/src/assets/template_screenshot.png b/src/assets/template_screenshot.png
new file mode 100644
index 0000000..714f4d3
Binary files /dev/null and b/src/assets/template_screenshot.png differ
diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx
index 4e65df8..00b9e91 100644
--- a/src/pages/Templates.jsx
+++ b/src/pages/Templates.jsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import logo_light from "../assets/logo_light_46.png";
+import template_screenshot from "../assets/template_screenshot.png"
 import { Link } from "react-router-dom";
-import { Tabs, TabPane } from "@douyinfe/semi-ui";
+import { Tabs, TabPane, Banner, Steps } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { db } from "../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
@@ -81,9 +82,8 @@ function Thumbnail({ diagram, i }) {
                     </div>
                     {table.fields.map((f, j) => (
                       <div
-                        className={`flex justify-between items-center py-[2px] px-[3px] ${
-                          j < table.fields.length - 1 ? "border-b" : ""
-                        }`}
+                        className={`flex justify-between items-center py-[2px] px-[3px] ${j < table.fields.length - 1 ? "border-b" : ""
+                          }`}
                         key={j}
                       >
                         <div className="flex items-center justify-start">
@@ -127,24 +127,19 @@ function Thumbnail({ diagram, i }) {
             return (
               <g key={n.id}>
                 <path
-                  d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
-                    x + w
-                  } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
-                    x + w - r
-                  } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
-                    y + h - r
-                  } L${x} ${y + fold}`}
+                  d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${x + w
+                    } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${x + w - r
+                    } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${y + h - r
+                    } L${x} ${y + fold}`}
                   fill={n.color}
                   stroke="rgb(168 162 158)"
                   strokeLinejoin="round"
                   strokeWidth="0.5"
                 />
                 <path
-                  d={`M${x} ${y + fold} L${x + fold - r} ${
-                    y + fold
-                  } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
-                    x + fold
-                  } ${y} L${x} ${y + fold} Z`}
+                  d={`M${x} ${y + fold} L${x + fold - r} ${y + fold
+                    } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${x + fold
+                    } ${y} L${x} ${y + fold} Z`}
                   fill={n.color}
                   stroke={"rgb(168 162 158)"}
                   strokeLinejoin="round"
@@ -255,48 +250,81 @@ export default function Templates() {
               tab={<span className="mx-2">Your templates</span>}
               itemKey="2"
             >
-              <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
-                {customTemplates?.map((c, i) => (
-                  <div
-                    key={i}
-                    className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
-                  >
-                    <Thumbnail diagram={c} i={"2" + i} />
-                    <div className="px-4 py-3 w-full">
-                      <div className="flex justify-between">
-                        <div className="text-lg font-bold text-zinc-700">
-                          {c.title}
-                        </div>
-                        <div>
-                          <button
-                            className="me-1 border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
-                            onClick={() => forkTemplate(c.id)}
-                          >
-                            <i className="fa-solid fa-code-fork"></i>
-                          </button>
+              {
+                customTemplates?.length > 0 ?
+                  <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
+                    {customTemplates?.map((c, i) => (
+                      <div
+                        key={i}
+                        className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
+                      >
+                        <Thumbnail diagram={c} i={"2" + i} />
+                        <div className="px-4 py-3 w-full">
+                          <div className="flex justify-between">
+                            <div className="text-lg font-bold text-zinc-700">
+                              {c.title}
+                            </div>
+                            <div>
+                              <button
+                                className="me-1 border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
+                                onClick={() => forkTemplate(c.id)}
+                              >
+                                <i className="fa-solid fa-code-fork"></i>
+                              </button>
+                            </div>
+                          </div>
+                          <div className="flex justify-around mt-2">
+                            <button
+                              className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
+                              onClick={() => editTemplate(c.id)}
+                            >
+                              <i className="bi bi-pencil-fill"></i>
+                              <div className="ms-1.5 font-semibold">Edit</div>
+                            </button>
+                            <div className="border-l border-gray-300 mx-2" />
+                            <button
+                              className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
+                              onClick={() => deleteTemplate(c.id)}
+                            >
+                              <IconDeleteStroked />
+                              <div className="ms-1.5 font-semibold">Delete</div>
+                            </button>
+                          </div>
                         </div>
                       </div>
-                      <div className="flex justify-around mt-2">
-                        <button
-                          className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
-                          onClick={() => editTemplate(c.id)}
-                        >
-                          <i className="bi bi-pencil-fill"></i>
-                          <div className="ms-1.5 font-semibold">Edit</div>
-                        </button>
-                        <div className="border-l border-gray-300 mx-2" />
-                        <button
-                          className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
-                          onClick={() => deleteTemplate(c.id)}
-                        >
-                          <IconDeleteStroked />
-                          <div className="ms-1.5 font-semibold">Delete</div>
-                        </button>
+                    ))}
+                  </div> :
+                  <div className="py-5">
+                    <Banner
+                      fullMode={false}
+                      type="info"
+                      bordered
+                      icon={null}
+                      closeIcon={null}
+                      description={<div>You have no custom templates saved.</div>}
+                    />
+                    <div className="grid grid-cols-5 sm:grid-cols-1 gap-4 place-content-center my-4">
+                      <img src={template_screenshot} className="border col-span-3 sm:cols-span-1 rounded" />
+                      <div className="col-span-2 sm:cols-span-1">
+                        <div className="text-xl font-bold my-4">How to save a template</div>
+                        <Steps direction="vertical" style={{ margin: "12px" }}>
+                          <Steps.Step
+                            title="Build a diagram"
+                            description="Build the template in the editor"
+                          />
+                          <Steps.Step
+                            title="Save as template"
+                            description="Editor > File > Save as template"
+                          />
+                          <Steps.Step
+                            title="Load a template"
+                            description="Fork a template to build on"
+                          />
+                        </Steps>
                       </div>
                     </div>
                   </div>
-                ))}
-              </div>
+              }
             </TabPane>
           </Tabs>
         </div>