diff --git a/src/router/index.ts b/src/router/index.ts
index 65d380a..82a69c2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -34,6 +34,11 @@ const routes = [
     path: "/library/:LibraryId/documents/create",
     name: "library.documents.create",
     component: () => import("@/views/documents/Create.vue"),
+  },
+  {
+    path: "/library/:LibraryId/documents/:DocumentId",
+    name: "library.documents.view",
+    component: () => import("@/views/documents/View.vue"),
   }
 ];
 
diff --git a/src/views/documents/Create.vue b/src/views/documents/Create.vue
index 0e5c18d..2380b9b 100644
--- a/src/views/documents/Create.vue
+++ b/src/views/documents/Create.vue
@@ -1,4 +1,6 @@
 <template>
+  <v-btn class="mb-3" @click="router.back()">返回</v-btn>
+
   <h2>新建文档</h2>
 
   <div class="form-floating mb-3">
@@ -10,7 +12,10 @@
     ></v-text-field>
   </div>
 
-  <MdEditor :theme="theme == 'dark' ? 'dark' : 'light'" v-model="createData.Content" />
+  <MdEditor
+    :theme="theme == 'dark' ? 'dark' : 'light'"
+    v-model="createData.Content"
+  />
 
   <v-btn class="mt-3" color="primary" @click="createDocument">新建文档</v-btn>
 
@@ -22,83 +27,76 @@
     text="您成功创建了一篇文档，稍后我们将开始索引您的文档。在完成后您就可以使用 AI 工具了。"
   ></v-alert>
 
-  <v-snackbar
-      v-model="show_created_failed"
-      vertical
-    >
-      <div class="text-subtitle-1 pb-2">创建失败</div>
+  <v-snackbar v-model="show_created_failed" vertical>
+    <div class="text-subtitle-1 pb-2">创建失败</div>
 
-      <p>可能出现了一些问题，比如您没有完整填写，或者某一个内容超出了长度。</p>
+    <p>可能出现了一些问题，比如您没有完整填写，或者某一个内容超出了长度。</p>
 
-      <template v-slot:actions>
-        <v-btn
-          color="pink"
-          variant="text"
-          @click="show_created_failed = false"
-        >
-          关闭
-        </v-btn>
-      </template>
-    </v-snackbar>
+    <template v-slot:actions>
+      <v-btn color="pink" variant="text" @click="show_created_failed = false">
+        关闭
+      </v-btn>
+    </template>
+  </v-snackbar>
 
-    <v-snackbar
-      v-model="show_title_is_not_filled"
-      
-    >
-      <p>您还没有填写标题。</p>
+  <v-snackbar v-model="show_title_is_not_filled">
+    <p>您还没有填写标题。</p>
 
-      <template v-slot:actions>
-        <v-btn
-          color="pink"
-          variant="text"
-          @click="show_title_is_not_filled = false"
-        >
-          关闭
-        </v-btn>
-      </template>
-    </v-snackbar>
+    <template v-slot:actions>
+      <v-btn
+        color="pink"
+        variant="text"
+        @click="show_title_is_not_filled = false"
+      >
+        关闭
+      </v-btn>
+    </template>
+  </v-snackbar>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { MdEditor } from "md-editor-v3";
 import "md-editor-v3/lib/style.css";
-import router from "@/router/index"
+import router from "@/router/index";
 import { document } from "@/plugins/api";
 import { useTheme } from "vuetify/lib/framework.mjs";
-import { toRef } from "vue";
 
 // get current theme
-const theme = useTheme().name
+const theme = useTheme().name;
 
+const created = ref(false);
 
-const created = ref(false)
-
-const libraryIdInt = parseInt(router.currentRoute.value.params.LibraryId)
+const libraryIdInt = parseInt(router.currentRoute.value.params.LibraryId);
 
 const createData = ref({
   Title: "",
   Content: "# Markdown 支持",
-})
-
-const show_created_failed = ref(false)
-const show_title_is_not_filled = ref(false)
-
+});
 
+const show_created_failed = ref(false);
+const show_title_is_not_filled = ref(false);
 
 function createDocument() {
-
-  if  (createData.value.Title == "") {
-    show_title_is_not_filled.value = true
-    return
+  if (createData.value.Title == "") {
+    show_title_is_not_filled.value = true;
+    return;
   }
 
-  document.libraryLibraryIdDocumentsPost(libraryIdInt, createData.value.Title, null, createData.value.Content).then((r) => {
-    console.log(r)
+  document
+    .libraryLibraryIdDocumentsPost(
+      libraryIdInt,
+      createData.value.Title,
+      null,
+      createData.value.Content
+    )
+    .then((r) => {
+      console.log(r);
 
-    created.value = true
-  }).catch(() => {
-    show_created_failed.value = true
-  })
+      created.value = true;
+    })
+    .catch(() => {
+      show_created_failed.value = true;
+    });
 }
 </script>
diff --git a/src/views/documents/List.vue b/src/views/documents/List.vue
index ea5dd13..6613b6c 100644
--- a/src/views/documents/List.vue
+++ b/src/views/documents/List.vue
@@ -33,7 +33,7 @@
           </v-card-subtitle>
           <v-card-text>{{ document.content }}</v-card-text>
           <v-card-actions>
-            <v-btn text color="primary">详情</v-btn>
+            <v-btn text color="primary" @click="goto_document(document.ID)">预览</v-btn>
             <v-btn text color="secondary">编辑</v-btn>
           </v-card-actions>
         </v-card>
@@ -97,4 +97,14 @@ function goto_create_document() {
     },
   });
 }
+
+function goto_document(documentId) {
+  router.push({
+    name: "library.documents.view",
+    params: {
+      DocumentId: documentId,
+    }
+  })
+}
+
 </script>
diff --git a/src/views/documents/View.vue b/src/views/documents/View.vue
new file mode 100644
index 0000000..4a8dc60
--- /dev/null
+++ b/src/views/documents/View.vue
@@ -0,0 +1,35 @@
+<script setup>
+
+import router from '@/router';
+import { ref } from 'vue'
+import { document } from '@/plugins/api';
+import { MdPreview, MdCatalog } from 'md-editor-v3';
+
+
+const libraryId = parseInt(router.currentRoute.value.params.LibraryId)
+const documentId = parseInt(router.currentRoute.value.params.DocumentId)
+
+const docu = ref({
+    Title: "",
+    Content: ""
+})
+
+document.libraryLibraryIdDocumentDocumentIdGet(libraryId, documentId).then((r) => {
+    docu.value = r.data
+
+    console.log(r.data)
+})
+
+
+</script>
+
+
+<template>
+
+    <v-btn @click="router.back(0)">返回</v-btn>
+
+    <h2>{{ docu.Title }}</h2>
+
+    <MdPreview  :modelValue="docu.Content" />
+
+</template>
\ No newline at end of file