diff --git a/packages/docs/next.config.mjs b/packages/docs/next.config.mjs
index 2d658464..fd98cdeb 100644
--- a/packages/docs/next.config.mjs
+++ b/packages/docs/next.config.mjs
@@ -12,7 +12,7 @@ const withNextra = nextra({
 
 export default withNextra({
   output: 'export',
-  reactStrictMode: true,
+  reactStrictMode: false,
   trailingSlash: true,
   images: {
     unoptimized: true
diff --git a/packages/docs/src/pages/docs/_meta.json b/packages/docs/src/pages/docs/_meta.json
index 72a804b4..eb705109 100644
--- a/packages/docs/src/pages/docs/_meta.json
+++ b/packages/docs/src/pages/docs/_meta.json
@@ -1,6 +1,7 @@
 {
   "index": "Introduction",
-  "guide": "Guide",
+  "start": "Install",
+  "player-configuration": "Configuration",
 
   "-- Plugins": {
     "type": "separator",
diff --git a/packages/docs/src/pages/docs/guide/_meta.json b/packages/docs/src/pages/docs/guide/_meta.json
deleted file mode 100644
index 73b9ca46..00000000
--- a/packages/docs/src/pages/docs/guide/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "start": "Get Started",
-  "player-configuration": "Player Configuration",
-  "advanced": "Advanced"
-}
\ No newline at end of file
diff --git a/packages/docs/src/pages/docs/guide/advanced.mdx b/packages/docs/src/pages/docs/guide/advanced.mdx
deleted file mode 100644
index c85964d4..00000000
--- a/packages/docs/src/pages/docs/guide/advanced.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-# Advanced
-
-## Listening and sending events
-
-```ts
-type eventName =
-  | 'abort'
-  | 'canplay'
-  | 'canplaythrough'
-  | 'durationchange'
-  | 'emptied'
-  | 'ended'
-  | 'error'
-  | 'loadeddata'
-  | 'loadedmetadata'
-  | 'loadstart'
-  | 'pause'
-  | 'play'
-  | 'playing'
-  | 'progress'
-  | 'ratechange'
-  | 'seeked'
-  | 'seeking'
-  | 'stalled'
-  | 'suspend'
-  | 'timeupdate'
-  | 'volumechange'
-  | 'waiting'
-  | 'encrypted'
-  | 'waitingforkey'
-  | 'enterpictureinpicture'
-  | 'leavepictureinpicture'
-  | 'fullscreenchange'
-  | 'fullscreenerror'
-  | 'loadedplugin'
-  | 'videoqualitychange'
-  | 'videosourcechange'
-  | 'destroy'
-```
-
-```js
-const listener = (event) => {
-  console.log(event)
-}
-
-// listen
-player.on('play', listener)
-
-// listen multiple event
-player.on(['play', 'pause'], listener)
-
-// only once
-player.once('play', listener)
-
-// remove listener
-player.off('play', listener)
-
-// emit event
-player.emit('cool', { msg: "It's pretty cool!" })
-```
-
-## Dynamic change video source / qualiry
-
-```js
-// First, create empty source player
-const player = Player.make('#player').create()
-
-// just change source
-player.changeSource({ src, poster })
-
-// will keep time or play state
-player.changeQuality({ src })
-
-// also be a promise
-player.changeSource(
-  fetch('xxx').then((resp) => {
-    // do anything
-    return { src, poster }
-  })
-)
-```
-
-## Write a plugin
-
-```js
-class HelloPlugin {
-  key = 'hello'
-  name = 'oplayer-plugin-hello'
-  version = '0.0.1'
-
-  apply(player) {
-    this.say()
-
-    player.on('play', () => {
-      console.log('enjoy the video!')
-    })
-
-    // The return value will be mounted to the player's context
-    return this
-  }
-
-  say(who = this.name) {
-    console.log(`hello! ${who}`)
-  }
-
-  destroy() {
-    console.log('bye bye!')
-  }
-}
-
-const player = Player.make('#player', {
-  source: {
-    title: '君の名は',
-    src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.mp4',
-    poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
-  }
-})
-  .use([new HelloPlugin()])
-  .create()
-
-player.context.hello.say('world')
-```
diff --git a/packages/docs/src/pages/docs/guide/player-configuration.mdx b/packages/docs/src/pages/docs/player-configuration.mdx
similarity index 66%
rename from packages/docs/src/pages/docs/guide/player-configuration.mdx
rename to packages/docs/src/pages/docs/player-configuration.mdx
index da348355..f978a6fc 100644
--- a/packages/docs/src/pages/docs/guide/player-configuration.mdx
+++ b/packages/docs/src/pages/docs/player-configuration.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra-theme-docs'
 
 <Callout>
   `@oplayer/core` does not provide any ui related functions such as thumbnail, subtitles, etc. If
-  you need these functions please install `@oplayer/ui`
+  you need these functions please install `[@oplayer/ui](./ui)`
 </Callout>
 
 ```js
@@ -62,3 +62,27 @@ export interface PlayerOptions {
   isNativeUI?: () => boolean
 }
 ```
+
+## persisted state
+
+```js
+player.on('ratechange', () => {
+  if (!player.isSourceChanging)
+    localStorage.setItem('@oplayer/UserPreferences/speed', player.playbackRate.toString())
+})
+
+player.on('volumechange', () => {
+  localStorage.setItem('@oplayer/UserPreferences/volume', player.volume.toString())
+})
+
+player.on('timeupdate', () => {
+  localStorage.setItem(player.options.source.src, player.currentTime.toString())
+})
+
+player.on('loadedmetadata', () => {
+  var prevTime = localStorage.getItem(e.payload.src)
+  if (prevTime) {
+    player.seek(prevTime - 3)
+  }
+})
+```
diff --git a/packages/docs/src/pages/docs/guide/start.mdx b/packages/docs/src/pages/docs/start.mdx
similarity index 100%
rename from packages/docs/src/pages/docs/guide/start.mdx
rename to packages/docs/src/pages/docs/start.mdx