diff --git a/src-electron/main-process/api.js b/src-electron/main-process/api.js
index 84081c6..80008a3 100644
--- a/src-electron/main-process/api.js
+++ b/src-electron/main-process/api.js
@@ -49,10 +49,10 @@ export default {
     /**
      *  export single note
      */
-    handleApi('export-markdown-file', (event, content) => {
+    handleApi('export-markdown-file', (event, { content, title }) => {
       return dialog.showSaveDialog({
         title: 'Export',
-        defaultPath: app.getPath('documents'),
+        defaultPath: path.join(app.getPath('documents'), `${title}`),
         filters: [
           {
             name: 'Markdown File',
@@ -78,10 +78,10 @@ export default {
           })
       }).catch(err => throw err)
     }).catch(err => throw err)
-    handleApi('export-png', (event, content) => {
+    handleApi('export-png', (event, { content, title }) => {
       return dialog.showSaveDialog({
         title: 'Export',
-        defaultPath: app.getPath('documents'),
+        defaultPath: path.join(app.getPath('documents'), `${title}`),
         filters: [
           {
             name: 'Portable Network Graphics',
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0d5f170..a0404e2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -41,15 +41,8 @@
     >
       <q-icon name="account_tree" color="#16A2B8" />
       <q-tooltip
-        v-if='darkMode'
         :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4 text-h7"
-        >{{ $t('noteCategory') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
-        :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4 text-h7"
+        :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ $t('noteCategory') }}
       </q-tooltip>
     </q-avatar>
@@ -70,42 +63,11 @@
     >
       <q-icon name="local_offer" color="#16A2B8" />
       <q-tooltip
-        v-if="darkMode"
         :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4  text-h7"
-        >{{ $t('tag') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
-        :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4  text-h7"
+        :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ $t('tag') }}
       </q-tooltip>
     </q-avatar>
-    <q-avatar
-      size="36px"
-      class="cursor-pointer q-electron-drag--exception"
-      v-ripple
-      @click.stop="
-        () => {
-          toggleChanged({ key: 'enablePreviewEditor', value: !enablePreviewEditor })
-        }
-      "
-    >
-      <q-icon :name="enablePreviewEditor ? 'lock_open' : 'lock'" color="#16A2B8" />
-      <q-tooltip
-        v-if="darkMode"
-        :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4  text-h7"
-        >{{ enablePreviewEditor ? $t('lock') : $t('unlock') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
-        :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4  text-h7"
-        >{{ enablePreviewEditor ? $t('lock') : $t('unlock') }}
-      </q-tooltip>
-    </q-avatar>
     <q-avatar
       size="26px"
       class="cursor-pointer q-electron-drag--exception"
@@ -114,15 +76,8 @@
     >
       <img :src="avatarUrl ? avatarUrl : defaultAvatar" />
       <q-tooltip
-        v-if="darkMode"
-        :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4 text-h7"
-        >{{ isLogin ? $t('logout') : $t('login') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
         :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4 text-h7"
+        :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ isLogin ? $t('logout') : $t('login') }}
       </q-tooltip>
     </q-avatar>
@@ -155,15 +110,8 @@
         />
       </template>
       <q-tooltip
-        v-if="darkMode"
-        :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4  text-h7"
-        >{{ $t('search') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
         :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4  text-h7"
+        :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ $t('search') }}
       </q-tooltip>
     </q-input>
@@ -197,15 +145,8 @@
     >
       <q-icon name="table_chart" />
       <q-tooltip
-        v-if="darkMode"
-        :offset="[20, 10]"
-        content-class="bg-darkMode text-white shadow-4 text-h7"
-        >{{ $t('switchView') }}
-      </q-tooltip>
-      <q-tooltip
-        v-else
         :offset="[20, 10]"
-        content-class="bg-light text-white shadow-4 text-h7"
+        :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ $t('switchView') }}
       </q-tooltip>
     </q-avatar>
@@ -216,10 +157,7 @@
       @click="$refs.settingsDialog.toggle()"
     >
       <q-icon name="settings" />
-      <q-tooltip v-if="darkMode" :offset="[20, 10]" content-class="text-white shadow-4 text-h7 bg-darkMode"
-        >{{ $t('settings') }}
-      </q-tooltip>
-      <q-tooltip v-else :offset="[20, 10]" content-class="text-white shadow-4 text-h7 bg-light"
+      <q-tooltip :offset="[20, 10]" :content-class = '`${ darkMode ? "bg-darkMode" : "bg-light" } text-white shadow-4  text-h7`'
         >{{ $t('settings') }}
       </q-tooltip>
     </q-avatar>
@@ -356,12 +294,6 @@ export default {
         value: !this.noteListVisible
       })
     },
-    lockModeHandler: function () {
-      this.toggleChanged({
-        key: 'enablePreviewEditor',
-        value: !this.enablePreviewEditor
-      })
-    },
     clearInputHandler: function () {
       this.searchText = ''
       this.getCategoryNotes({ category: this.currentCategory })
@@ -379,7 +311,6 @@ export default {
       this.$refs.loginDialog.toggle()
     }
     bus.$on(events.VIEW_SHORTCUT_CALL.switchView, this.switchViewHandler)
-    bus.$on(events.VIEW_SHORTCUT_CALL.lockMode, this.lockModeHandler)
   },
   watch: {
     isLogin: function (currentData) {
@@ -392,7 +323,6 @@ export default {
 </script>
 
 <style scoped>
-@import '../css/style.css';
 .header-note-title {
   display: flex;
   align-items: center;
diff --git a/src/components/NoteList.vue b/src/components/NoteList.vue
index eaa80db..6f39339 100644
--- a/src/components/NoteList.vue
+++ b/src/components/NoteList.vue
@@ -267,8 +267,8 @@ export default {
     exportNoteAsMdHandler: function (current = false) {
       this.exportMarkdownFile({ noteField: this.rightClickNoteItem, current })
     },
-    exportNoteAsPngHandler: function () {
-      this.exportPng()
+    exportNoteAsPngHandler: function (current = false) {
+      this.exportPng({ noteField: this.rightClickNoteItem, current })
     },
     noteItemContextMenuHandler: function (e, noteField) {
       const isCurrentNote = noteField.docGuid === this.currentNote.info.docGuid
diff --git a/src/store/server/actions.js b/src/store/server/actions.js
index 2efd15d..156b291 100644
--- a/src/store/server/actions.js
+++ b/src/store/server/actions.js
@@ -838,6 +838,7 @@ export default {
       message: i18n.t('prepareExportData')
     })
     const result = await _getContent(kbGuid, docGuid)
+    const title = result.info.title.split('.')[0]
     const isHtml = !_.endsWith(result.info.title, '.md')
     const {
       html,
@@ -855,10 +856,26 @@ export default {
       )
     }
     Loading.hide()
-    await exportMarkdownFile(content)
+    await exportMarkdownFile({ content, title })
   },
-  async exportPng ({ state }) {
-    const { currentNote } = state
+  async exportPng ({ state }, {
+    noteField,
+    current
+  }) {
+    const {
+      kbGuid,
+      currentNote
+    } = state
+    let docGuid
+    if (current) {
+      docGuid = currentNote.info.docGuid
+    } else if (noteField) {
+      docGuid = noteField.docGuid
+    } else {
+      return
+    }
+    const result = await _getContent(kbGuid, docGuid)
+    const title = result.info.title.split('.')[0]
     if (_.isEmpty(currentNote)) return
     Loading.show({
       spinner: QSpinnerGears,
@@ -876,7 +893,7 @@ export default {
       document.body.removeChild(dom)
       const content = dom.toDataURL('image/png')
       Loading.hide()
-      exportPng(content)
+      exportPng({ content, title })
     })
   },
   /**