diff --git a/web/package-lock.json b/web/package-lock.json
index 99591b633..779be6386 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -27,6 +27,7 @@
         "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-toast": "^1.2.2",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "@tanstack/react-query": "^5.40.0",
         "@tanstack/react-query-devtools": "^5.51.5",
         "@uiw/react-markdown-preview": "^5.1.3",
@@ -5532,6 +5533,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
+      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tanstack/match-sorter-utils": {
       "version": "8.11.3",
       "resolved": "https://registry.npmmirror.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.11.3.tgz",
diff --git a/web/package.json b/web/package.json
index d4ed83b1a..061b17352 100644
--- a/web/package.json
+++ b/web/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/react-query": "^5.40.0",
     "@tanstack/react-query-devtools": "^5.51.5",
     "@uiw/react-markdown-preview": "^5.1.3",
diff --git a/web/src/pages/profile-setting/components.tsx b/web/src/pages/profile-setting/components.tsx
new file mode 100644
index 000000000..90bdca802
--- /dev/null
+++ b/web/src/pages/profile-setting/components.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export function Title({ children }: PropsWithChildren) {
+  return <span className="font-bold text-xl">{children}</span>;
+}
diff --git a/web/src/pages/profile-setting/prompt/index.tsx b/web/src/pages/profile-setting/prompt/index.tsx
new file mode 100644
index 000000000..7ae30ab99
--- /dev/null
+++ b/web/src/pages/profile-setting/prompt/index.tsx
@@ -0,0 +1,48 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Plus, Trash2 } from 'lucide-react';
+import { Title } from '../components';
+
+const text = `You are an intelligent assistant. Please summarize the content of the knowledge base to answer the question. Please list the data in the knowledge base and answer in detail. When all knowledge base content is irrelevant to the question, your answer must include the sentence "The answer you are looking for is not found in the knowledge base!" Answers need to consider chat history.
+      Here is the knowledge base:
+      {knowledge}
+      The above is the knowledge base.`;
+
+const PromptManagement = () => {
+  const modelLibraryList = new Array(8).fill(1);
+
+  return (
+    <div className="p-8 ">
+      <div className="mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-4xl font-bold">Prompt templates</h1>
+          <Button variant={'tertiary'} size={'sm'}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create template
+          </Button>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-4">
+        {modelLibraryList.map((x, idx) => (
+          <Card className="p-0" key={idx}>
+            <CardContent className="space-y-4 p-4">
+              <Title>Prompt name</Title>
+              <p className="line-clamp-3">{text}</p>
+
+              <div className="flex justify-end gap-2">
+                <Button size={'sm'} variant={'secondary'}>
+                  <Trash2 />
+                </Button>
+                <Button variant={'outline'} size={'sm'}>
+                  Edit
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PromptManagement;
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 1a182b648..ed8243e0f 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -153,6 +153,10 @@ const routes = [
         path: '/profile-setting/model',
         component: '@/pages/profile-setting/model',
       },
+      {
+        path: '/profile-setting/prompt',
+        component: '@/pages/profile-setting/prompt',
+      },
     ],
   },
 ];
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index c558d594b..d7641ca00 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -177,5 +177,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp')],
 };