diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListAction.ts b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListAction.ts
new file mode 100644
index 0000000..642ba1e
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListAction.ts
@@ -0,0 +1,13 @@
+export default async ({request}) => {
+    const formData = await request.formData()
+    switch(formData.get("action")){
+        case "add":
+            await window.api.sql(
+                `insert into contents (title, content, created_at) values ('未命名', '', datetime())`, 
+                "create")
+            break
+    }
+
+    return {}
+
+}
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
index 371a750..1a9ac73 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
@@ -1,12 +1,14 @@
 import { Form, NavLink, Outlet, useLoaderData, useSubmit} from "react-router-dom"
 import "./contentList.scss"
 import dayjs from "dayjs"
+import { Add } from "@icon-park/react"
 
 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 
@@ -18,7 +20,17 @@ export const ContentList = () => {
                     submit(e.target.form)
                 }}
             />
+            <Add
+                theme="outline"
+                size="18"
+                fill="#000000"
+                strokeWidth={2}
+                onClick={()=>{
+                    submit({action: 'add'}, {method: 'post'})
+                }}
+            />
             </div>
+            </Form>
             {contentList.map(content => (
                 <NavLink 
                    key={content.id} 
@@ -28,7 +40,6 @@ 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 />
diff --git a/ui/autoMate/src/renderer/src/router/index.tsx b/ui/autoMate/src/renderer/src/router/index.tsx
index 7ee730a..a004c13 100644
--- a/ui/autoMate/src/renderer/src/router/index.tsx
+++ b/ui/autoMate/src/renderer/src/router/index.tsx
@@ -9,6 +9,7 @@ import ContentLoader from "@renderer/pages/Content/ContentLoader";
 import { Content } from "@renderer/pages/Content/Content";
 import ContentAction from "@renderer/pages/Content/ContentAction";
 import { Welcome } from "@renderer/pages/Welcome";
+import ContentListAction from "@renderer/pages/ContentList/ContentListAction";
 
 const router = createHashRouter([
   {
@@ -28,6 +29,7 @@ const router = createHashRouter([
           {
             path: "contentList/:cid?",
             loader: ContentListLoader,
+            action: ContentListAction,
             element: <ContentList />,
             children: [
               {