diff --git a/ui/autoMate/src/main/db/query.ts b/ui/autoMate/src/main/db/query.ts
index faf1e42..75afbfe 100644
--- a/ui/autoMate/src/main/db/query.ts
+++ b/ui/autoMate/src/main/db/query.ts
@@ -1,7 +1,7 @@
 import {db} from './connect'
 
-export const findAll = (sql: string) => {
-    return db.prepare(sql).all();
+export const findAll = (sql: string, params={}) => {
+    return db.prepare(sql).all(params);
 }
 
 export const findOne = (sql: string) => {
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
index 1746dcc..7299c88 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
@@ -1,9 +1,15 @@
-export default async({params}) => {
+export default async({params, request}) => {
+    const url = new URL(request.url)
+    const searchWord = url.searchParams.get("searchWord")
     let sql = "select * from contents"
+    if (searchWord) {
+        sql += ` where title like @searchWord order by id desc`
+        console.log("hello")
+        return window.api.sql(sql, "findAll", {searchWord: `%${searchWord}%`})
+    }
     if (params.cid) {
         sql += ` where category_id=${params.cid}`
     }
     sql += " order by id desc"
-    const res = await window.api.sql(sql, "findAll")
-    return res
+    return  window.api.sql(sql, "findAll")
 }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss b/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
index 8c143dc..4fab0f1 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
@@ -1,7 +1,7 @@
 .contentList-page{
     @apply h-screen  text-xs text-slate-700;
     display: grid;
-    grid-template: "list content" auto / 150px auto;
+    grid-template: "list content" auto / 220px auto;
     .list{
         @apply border-r overflow-y-auto;
         grid-area: list;
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
index b902260..371a750 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
@@ -1,18 +1,24 @@
-import { NavLink, Outlet, useLoaderData} from "react-router-dom"
+import { Form, NavLink, Outlet, useLoaderData, useSubmit} from "react-router-dom"
 import "./contentList.scss"
 import dayjs from "dayjs"
 
 export const ContentList = () => {
     const contentList = useLoaderData() as ContentType[]
+    const submit = useSubmit()
     return (<main className="contentList-page">
         <div className="list">
+            <Form>
+            <div className="border-b px-3 flex justify-between items-center">
             <input 
+                name="searchWord"
                 type="text" 
                 placeholder="搜索..." 
-                className="outline-none text-sm font-bold py-2 px-3 border-b
-                w-full"
-                
+                className="outline-none text-sm font-bold py-2 w-full"
+                onChange={(e) => {
+                    submit(e.target.form)
+                }}
             />
+            </div>
             {contentList.map(content => (
                 <NavLink 
                    key={content.id} 
@@ -22,6 +28,7 @@ export const ContentList = () => {
                    <div className="text-[10px] opacity-80 ">{dayjs(content.created_at).format("YYYY/MM/DD")}</div>
                    </NavLink>
             ))}
+            </Form>
         </div>
         <div className="content">
             <Outlet />