diff --git a/src/renderer/components/DocHistory.vue b/src/renderer/components/DocHistory.vue
index ab96665a..e66e78b0 100644
--- a/src/renderer/components/DocHistory.vue
+++ b/src/renderer/components/DocHistory.vue
@@ -6,11 +6,12 @@
         <div class="versions" v-if="versions && versions.length">
           <div
             v-for="(version, i) in versions"
-            :key="version"
-            :class="{item: true, selected: version === currentVersion}"
-            @click="choose(version)">
+            :key="version.value"
+            :class="{item: true, selected: version.value === currentVersion}"
+            :title="version.title"
+            @click="choose(version.value)">
             <span class="seq">{{i.toString().padStart(4, '0')}}</span>
-            <span>{{versionStr(version)}}</span>
+            <span>{{version.label}}</span>
           </div>
         </div>
         <div class="content" v-if="content">
@@ -35,6 +36,7 @@
 </template>
 
 <script lang="ts" setup>
+import dayjs from 'dayjs'
 import type * as Monaco from 'monaco-editor'
 import { useStore } from 'vuex'
 import { ref, onMounted, onUnmounted, watch, toRef } from 'vue'
@@ -63,7 +65,7 @@ const getDisplayTypes = () => [
 
 const currentDoc = ref<Doc | null>(null)
 const currentVersion = ref('')
-const versions = ref<string[]>([])
+const versions = ref<{value: string, label: string, title: string}[]>([])
 const content = ref('')
 const displayType = ref<'content' | 'diff'>('content')
 const refEditor = ref<HTMLElement | null>(null)
@@ -79,12 +81,6 @@ function hide () {
   currentDoc.value = null
 }
 
-function versionStr (version: string) {
-  const tmp = version.replace(/\.md$/i, '').split(' ')
-  tmp[1] = tmp[1].replaceAll('-', ':')
-  return tmp.join(' ')
-}
-
 function choose (version: string) {
   currentVersion.value = version
 }
@@ -170,11 +166,18 @@ function updateEditor () {
 }
 
 watch(currentDoc, async val => {
-  versions.value = val ? await fetchHistoryList(val) : []
+  versions.value = (val ? await fetchHistoryList(val) : []).map(value => {
+    const tmp = value.replace(/\.md$/i, '').split(' ')
+    tmp[1] = tmp[1].replaceAll('-', ':')
+    const time = tmp.join(' ')
+    const title = dayjs().to(time)
+
+    return { value, label: time, title }
+  })
 })
 
 watch(versions, async val => {
-  currentVersion.value = (val && val.length) ? val[0] : ''
+  currentVersion.value = (val && val.length) ? val[0].value : ''
 })
 
 watch(currentVersion, async val => {
diff --git a/src/renderer/support/api.ts b/src/renderer/support/api.ts
index 14ee6e3a..314c5b1e 100644
--- a/src/renderer/support/api.ts
+++ b/src/renderer/support/api.ts
@@ -132,13 +132,13 @@ export async function deleteFile (file: FileItem): Promise<ApiResult<any>> {
   return fetchHttp(`/api/file?path=${encodeURIComponent(path)}&repo=${encodeURIComponent(repo)}`, { method: 'DELETE' })
 }
 
-export async function fetchHistoryList (file: PathItem) {
+export async function fetchHistoryList (file: PathItem): Promise<string[]> {
   const { path, repo } = file
   const { data } = await fetchHttp(`/api/history/list?path=${encodeURIComponent(path)}&repo=${encodeURIComponent(repo)}`)
   return data
 }
 
-export async function fetchHistoryContent (file: PathItem, version: string) {
+export async function fetchHistoryContent (file: PathItem, version: string): Promise<string> {
   const { path, repo } = file
   const { data } = await fetchHttp(`/api/history/content?path=${encodeURIComponent(path)}&repo=${encodeURIComponent(repo)}&version=${encodeURIComponent(version)}`)
   return data