diff --git a/components.d.ts b/components.d.ts
index 461db47..70a5bb1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -25,10 +25,14 @@ declare module 'vue' {
     NGrid: typeof import('naive-ui')['NGrid']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
+    NInputNu: typeof import('naive-ui')['NInputNu']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NModalProvider: typeof import('naive-ui')['NModalProvider']
+    NS: typeof import('naive-ui')['NS']
     NSplit: typeof import('naive-ui')['NSplit']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
diff --git a/src/api.ts b/src/api.ts
index 8e80685..8ae4767 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -60,16 +60,16 @@ export class Tutorial {
     return res.data
   }
 
-  static async create(payload: TutorialIn) {
+  static async createOrUpdate(payload: TutorialIn) {
     const res = await http.post("/tutorial/", payload)
     return res.data
   }
 
-  static async remove(display: string) {
+  static async remove(display: number) {
     await http.delete(`/tutorial/${display}`)
   }
 
-  static async get(display: string) {
+  static async get(display: number) {
     const res = await http.get(`/tutorial/${display}`)
     return res.data
   }
diff --git a/src/pages/Markdown.vue b/src/pages/Markdown.vue
index be36274..2fa41ea 100644
--- a/src/pages/Markdown.vue
+++ b/src/pages/Markdown.vue
@@ -3,12 +3,23 @@
     <n-gi :span="2" class="col">
       <n-flex vertical class="list">
         <n-card
-          style="cursor: pointer"
           v-for="item in list"
           :key="item.display"
           @click="show(item.display)"
+          style="cursor: pointer"
         >
-          <template #header>({{ item.display }}) {{ item.title }}</template>
+          <template #header>
+            <n-flex align="center">
+              <Icon
+                :icon="
+                  item.is_public
+                    ? 'twemoji:check-mark-button'
+                    : 'twemoji:locked'
+                "
+              ></Icon>
+              <span>【{{ item.display }}】{{ item.title }}</span>
+            </n-flex>
+          </template>
           <template #header-extra>
             <n-button text type="default" @click="remove(item.display)">
               <Icon width="20" icon="material-symbols:close-rounded"></Icon>
@@ -21,10 +32,10 @@
 
     <n-gi :span="3" class="col">
       <n-form>
-        <n-grid x-gap="10" :cols="3">
+        <n-grid x-gap="10" :cols="4">
           <n-gi :span="1">
             <n-form-item label="序号">
-              <n-input v-model:value="tutorial.display" />
+              <n-input-number v-model:value="tutorial.display" />
             </n-form-item>
           </n-gi>
           <n-gi :span="2">
@@ -32,9 +43,18 @@
               <n-input v-model:value="tutorial.title" />
             </n-form-item>
           </n-gi>
+          <n-gi :span="1">
+            <n-form-item label="公开">
+              <n-switch v-model:value="tutorial.is_public" />
+            </n-form-item>
+          </n-gi>
         </n-grid>
         <n-form-item label="内容">
-          <n-input v-model:value="tutorial.content" type="textarea" class="editor" />
+          <n-input
+            v-model:value="tutorial.content"
+            type="textarea"
+            class="editor"
+          />
         </n-form-item>
         <n-button block type="primary" @click="submit" :disabled="!canSubmit">
           提交
@@ -60,9 +80,10 @@ const confirm = useDialog()
 const list = ref<TutorialSlim[]>([])
 const content = ref("")
 const tutorial = useStorage("web-tutorial", {
-  display: "",
+  display: 0,
   title: "",
   content: "",
+  is_public: false,
 })
 
 const canSubmit = computed(
@@ -77,18 +98,20 @@ async function getContent() {
 }
 
 function createNew() {
-  tutorial.value.display = ""
+  tutorial.value.display = list.value[list.value.length - 1].display + 1
   tutorial.value.title = ""
   tutorial.value.content = ""
+  tutorial.value.is_public = false
   content.value = ""
 }
 
 async function submit() {
   try {
-    await Tutorial.create(tutorial.value)
-    tutorial.value.display = ""
+    await Tutorial.createOrUpdate(tutorial.value)
+    tutorial.value.display = 0
     tutorial.value.title = ""
     tutorial.value.content = ""
+    tutorial.value.is_public = false
     await getContent()
     content.value = ""
   } catch (error: any) {
@@ -96,7 +119,7 @@ async function submit() {
   }
 }
 
-async function remove(display: string) {
+async function remove(display: number) {
   confirm.warning({
     title: "警告",
     content: "你确定要删除吗？",
@@ -110,13 +133,15 @@ async function remove(display: string) {
   })
 }
 
-async function show(display: string) {
+async function show(display: number) {
   const item = await Tutorial.get(display)
   tutorial.value.display = item.display
   tutorial.value.title = item.title
   tutorial.value.content = item.content
+  tutorial.value.is_public = item.is_public
   content.value = await marked.parse(item.content, { async: true })
 }
+
 watch(
   () => tutorial.value.content,
   async (v: string) => {
diff --git a/src/utils/type.ts b/src/utils/type.ts
index 6a33a02..2e5eb3c 100644
--- a/src/utils/type.ts
+++ b/src/utils/type.ts
@@ -5,13 +5,13 @@ export enum Role {
 }
 
 export interface TutorialSlim {
-  display: string
+  display: number
   title: string
   is_public: boolean
 }
 
 export interface TutorialIn {
-  display: string
+  display: number
   title: string
   content: string
 }