diff --git a/web/package-lock.json b/web/package-lock.json
index 99591b6337..779be63867 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 d4ed83b1a1..061b17352f 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 0000000000..90bdca802c
--- /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 0000000000..7ae30ab998
--- /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 1a182b6481..ed8243e0f1 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 c558d594b1..d7641ca006 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')],
 };