diff --git a/package.json b/package.json
index ae0ce2d..114af73 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cn.memocast.app",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "An Awesome WizNote Desktop Application",
   "productName": "Memocast",
   "author": "tanknee <nee@tanknee.cn>",
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 99b0b03..f65b418 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,10 +1,10 @@
 <template>
   <q-page class='flex'>
     <q-splitter
-      v-model='splitterModel'
-      :limits='splitterLimit'
+      v-model='splitterWidthValue'
+      :limits='[10, 60]'
       class='full-width'
-      unit='px'
+      unit='%'
       separator-class='bg-transparent'
       before-class='overflow-hidden'
       after-class='hide-scrollbar'
@@ -187,20 +187,16 @@ export default {
     contentsListLoaded: function () {
       return this.contentsList && !!this.contentsList.length
     },
-    splitterLimit: function () {
-      if (this.noteListVisible) return [150, 600]
-      return [0, 0]
-    },
     ...mapServerGetters(['currentNote', 'currentNoteInfo']),
     ...mapServerState(['contentsList', 'isCurrentNoteLoading', 'noteState']),
-    ...mapClientState(['noteListVisible', 'enablePreviewEditor'])
+    ...mapClientState(['noteListVisible', 'enablePreviewEditor', 'splitterWidth'])
   },
   data () {
     return {
-      splitterModel: 300,
       isOutlineShow: false,
       isSourceMode: false,
       isMindmapMode: false,
+      splitterWidthValue: 200,
       tempNoteData: {},
       wordCount: {
         word: '0',
@@ -254,7 +250,7 @@ export default {
         message: this.enablePreviewEditor ? this.$t('lockModeOff') : this.$t('lockModeOn')
       })
     },
-    ...mapClientActions(['toggleChanged'])
+    ...mapClientActions(['toggleChanged', 'updateStateAndStore'])
   },
   mounted () {
     bus.$on(events.VIEW_SHORTCUT_CALL.lockMode, this.lockModeHandler)
@@ -262,6 +258,7 @@ export default {
     bus.$on(events.GENERATE_MINDMAP, this.generateMindmapHandler)
     bus.$on(events.UPDATE_WORD_COUNT, this.wordCountUpdateHandler)
     this.$nextTick(this.hideInitLoadingPage)
+    this.splitterWidthValue = this.splitterWidth
   },
   watch: {
     isSourceMode: function (val) {
@@ -284,6 +281,14 @@ export default {
           this.saveButtonIcon = 'save'
         }, 3000)
       }
+    },
+    noteListVisible: function (val) {
+      if (!val) {
+        this.updateStateAndStore({ splitterWidth: this.splitterWidthValue })
+        this.splitterWidthValue = 0
+      } else {
+        this.splitterWidthValue = this.splitterWidth
+      }
     }
   }
 }
diff --git a/src/store/client/state.js b/src/store/client/state.js
index 1d90c9b..c6e006f 100644
--- a/src/store/client/state.js
+++ b/src/store/client/state.js
@@ -22,6 +22,7 @@ export default function () {
     rightClickCategoryItem: '',
     theme: 'Default-Light',
     themes: [],
-    autoSaveGap: 0
+    autoSaveGap: 0,
+    splitterWidth: 15
   }
 }