diff --git a/package.json b/package.json
index 2c0bb3f1..9e2a5654 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "stub": "unbuild --stub",
     "lint": "eslint .",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "lint:fix": "eslint --fix .",
     "prepublishOnly": "npm run build",
     "release": "bumpp && nr changelog && npm publish",
     "dep:up": "taze -I major"
diff --git a/src/client/components.d.ts b/src/client/components.d.ts
index 5ca18ad9..4493db50 100644
--- a/src/client/components.d.ts
+++ b/src/client/components.d.ts
@@ -13,8 +13,10 @@ declare module 'vue' {
     AssetListItem: typeof import('./components/AssetListItem.vue')['default']
     AssetPreview: typeof import('./components/AssetPreview.vue')['default']
     ComponentTreeNode: typeof import('./components/ComponentTreeNode.vue')['default']
+    DocAdd: typeof import('./components/DocAdd.vue')['default']
     DocDetails: typeof import('./components/DocDetails.vue')['default']
     DockingPanel: typeof import('./components/DockingPanel.vue')['default']
+    DocSetting: typeof import('./components/DocSetting.vue')['default']
     DrawerRight: typeof import('./components/DrawerRight.vue')['default']
     FilepathItem: typeof import('./components/FilepathItem.vue')['default']
     GraphSettings: typeof import('./components/GraphSettings.vue')['default']
diff --git a/src/client/components/AssetPreview.vue b/src/client/components/AssetPreview.vue
index e076b0af..1e992eb5 100644
--- a/src/client/components/AssetPreview.vue
+++ b/src/client/components/AssetPreview.vue
@@ -19,7 +19,7 @@ defineProps<{
     />
     <div v-else-if="asset.type === 'text' && !textContent" i-carbon-document text-3xl op20 />
     <div v-else-if="asset.type === 'text' && textContent" w-full self-start p4>
-      <pre max-h-10rem of-hidden font-mono text-xs v-text="textContent" />
+      <pre max-h-10rem of-hidden text-xs font-mono v-text="textContent" />
     </div>
     <div v-else i-carbon-help text-3xl op20 />
   </div>
diff --git a/src/client/components/DocAdd.vue b/src/client/components/DocAdd.vue
new file mode 100644
index 00000000..11c5b726
--- /dev/null
+++ b/src/client/components/DocAdd.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { addDoc } from '../logic/documentations'
+import type { DocumentInfo } from '../../types'
+
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'cancel'): void
+  (event: 'add'): void
+}>()
+
+const value = useVModel(props, 'modelValue', emits, { passive: true })
+
+function hide() {
+  value.value = false
+}
+
+const form = reactive([{
+  label: 'id',
+  necessary: true,
+  value: '',
+},
+{
+  label: 'name',
+  necessary: true,
+  value: '',
+},
+{
+  label: 'website',
+  necessary: true,
+  value: '',
+},
+{
+  label: 'github',
+  necessary: false,
+  value: '',
+},
+{
+  label: 'icon',
+  necessary: false,
+  value: '',
+},
+{
+  label: 'description',
+  necessary: false,
+  value: '',
+}])
+
+function handleAddDoc() {
+  const docInfo = Object.fromEntries(form.map(item => [item.label, item.value])) as any as DocumentInfo
+  addDoc(docInfo)
+  hide()
+}
+</script>
+
+<template>
+  <VDialog v-model="value">
+    <div flex="~ col" min-w-100px w-30vw gap-15px p4>
+      <div v-for="item in form" :key="item.label" flex items-center>
+        <label
+          :class="{
+            'vue-doc-required': item.necessary,
+          }" w-95px
+        >{{ item.label }}</label>
+        <VTextInput v-model="item.value" op50 :placeholder="item.necessary ? 'necessary' : 'not necessary'" flex="1" />
+      </div>
+      <div w-full flex items-center justify-end gap-10px>
+        <VButton border-none bg="gray-300/30" @click.prevent="$emit('cancel'); hide()">
+          cancel
+        </VButton>
+        <VButton border-none bg-primary text-white hover:text-white @click.prevent="handleAddDoc">
+          add
+        </VButton>
+      </div>
+    </div>
+  </VDialog>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/client/components/DocDetails.vue b/src/client/components/DocDetails.vue
index e400da77..1ffcc55c 100644
--- a/src/client/components/DocDetails.vue
+++ b/src/client/components/DocDetails.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { DocumentInfo } from '../../types'
+import { removeDoc } from '../logic/documentations'
 
-defineProps<{
+const props = defineProps<{
   data: DocumentInfo
 }>()
 const emit = defineEmits<{
@@ -11,6 +12,17 @@ const emit = defineEmits<{
 function navigate(path: string) {
   window.open(path, '_blank')
 }
+
+const showConfirm = ref(false)
+const message = ref('')
+function handleShowConfirm() {
+  message.value = `Are you sure you want to remove the document of ${props.data.name} ?`
+  showConfirm.value = true
+}
+
+function confirmHandler() {
+  removeDoc(props.data.name)
+}
 </script>
 
 <template>
@@ -29,13 +41,10 @@ function navigate(path: string) {
           </VTooltip>
         </span>
       </div>
-
       <div v-if="data.description" class="line-clamp-2" mt--1 text-sm op50>
         {{ data.description }}
       </div>
-
       <div flex-auto />
-
       <div v-if="data.website" flex="~ gap-2" title="Documentation">
         <span i-carbon-link text-lg op50 />
         <span
@@ -54,13 +63,16 @@ function navigate(path: string) {
           {{ data.github.replace(/^https?:\/\/github.com\//, "") }}
         </span>
       </div>
-
       <slot name="items" />
     </div>
-    <div flex="~ col">
+    <div flex="~ col" justify-between>
       <div v-if="data.icon" h-20 w-20 flex flex-none rounded bg-gray:3 p4>
         <img v-if="data.icon" :src="data.icon" :alt="data.name" ma h-full>
       </div>
+      <div flex justify-end>
+        <VIconButton icon="material-symbols:delete" class="hover:color-red" @click.stop="handleShowConfirm" />
+      </div>
     </div>
+    <VConfirm v-model="showConfirm" :message="message" @confirm="confirmHandler" />
   </VCard>
 </template>
diff --git a/src/client/components/DocSetting.vue b/src/client/components/DocSetting.vue
new file mode 100644
index 00000000..f335d95c
--- /dev/null
+++ b/src/client/components/DocSetting.vue
@@ -0,0 +1,29 @@
+<script lang='ts' setup>
+import { resetDoc } from '../logic/documentations'
+
+const showDocAdd = ref(false)
+const showConfirm = ref(false)
+const message = ref('')
+
+function handleShowConfirm() {
+  message.value = 'Are you sure you want to reset documents?'
+  showConfirm.value = true
+}
+
+function confirmResetHandler() {
+  resetDoc()
+}
+</script>
+
+<template>
+  <div>
+    <VButton mr-10px n="primary" @click="showDocAdd = true">
+      Add Documents
+    </VButton>
+    <VButton n="primary" @click="handleShowConfirm">
+      Reset Documents
+    </VButton>
+  </div>
+  <DocAdd v-model="showDocAdd" />
+  <VConfirm v-model="showConfirm" :message="message" @confirm="confirmResetHandler" />
+</template>
diff --git a/src/client/components/DockingPanel.vue b/src/client/components/DockingPanel.vue
index 2ecfe6f1..bb75f8a1 100644
--- a/src/client/components/DockingPanel.vue
+++ b/src/client/components/DockingPanel.vue
@@ -8,7 +8,7 @@ import { isInPopup } from '../logic/state'
       <PopupButton v-if="!isInPopup" />
       <VDarkToggle v-slot="{ toggle, isDark }">
         <VButton n="sm primary" @click="toggle">
-          <div carbon-sun dark:carbon-moon translate-y--1px />
+          <div carbon-sun translate-y--1px dark:carbon-moon />
           {{ isDark.value ? "Dark" : "Light" }}
         </VButton>
       </VDarkToggle>
diff --git a/src/client/components/RoutePathItem.vue b/src/client/components/RoutePathItem.vue
index 73163acb..53262e8a 100644
--- a/src/client/components/RoutePathItem.vue
+++ b/src/client/components/RoutePathItem.vue
@@ -48,7 +48,7 @@ function navigate() {
             <div px2 text-sm op50>
               Fill params and navigate:
             </div>
-            <div flex="~" items-center p2 font-mono text-sm>
+            <div flex="~" items-center p2 text-sm font-mono>
               <template v-for="part, idx of parts" :key="idx">
                 <VTextInput
                   v-if="part[0] === ':'"
diff --git a/src/client/components/RoutesTable.vue b/src/client/components/RoutesTable.vue
index 88194217..99d8785b 100644
--- a/src/client/components/RoutesTable.vue
+++ b/src/client/components/RoutesTable.vue
@@ -57,7 +57,7 @@ const sorted = computed(() => {
               />
             </div>
           </td>
-          <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op50>
+          <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op50>
             {{ item.name ?? '-' }}
           </td>
         </tr>
diff --git a/src/client/constants.ts b/src/client/constants.ts
index 42dc377d..8d35b38b 100644
--- a/src/client/constants.ts
+++ b/src/client/constants.ts
@@ -1,3 +1,4 @@
 export const FRAME_STATE_STORAGE_KEY = '__vue-devtools-frame-state__'
 export const TABS_STORAGE_KEY = '__vue-devtools-tabs__'
 export const TABS_GROUP_STORAGE_KEY = '__vue-devtools-tabs-group__'
+export const DOC_GROUP_KEY = '__vue-devtools-doc-group__'
diff --git a/src/client/logic/documentations.ts b/src/client/logic/documentations.ts
index 080ef640..d1d322c4 100644
--- a/src/client/logic/documentations.ts
+++ b/src/client/logic/documentations.ts
@@ -1,8 +1,10 @@
 import VueIcon from '../assets/icons/vue.svg'
 import PiniaIcon from '../assets/icons/pinia.svg'
 import VueUseIcon from '../assets/icons/vueuse.svg'
+import type { DocumentInfo } from '../../types'
+import { DOC_GROUP_KEY } from '../constants'
 
-export const data = [
+const normalData: DocumentInfo[] = [
   {
     id: 'vue',
     name: 'Vue.js',
@@ -38,3 +40,20 @@ export const data = [
     icon: VueUseIcon,
   },
 ]
+
+const localData = [...normalData]
+
+export const data = useLocalStorage(DOC_GROUP_KEY, localData)
+
+export function addDoc(docInfo: DocumentInfo) {
+  data.value.push(docInfo)
+}
+
+export function removeDoc(id: string) {
+  const idx = data.value.findIndex(i => i.name === id)
+  data.value.splice(idx, 1)
+}
+
+export function resetDoc() {
+  data.value = normalData
+}
diff --git a/src/client/pages/documentations.vue b/src/client/pages/documentations.vue
index 42a41158..9def3bb3 100644
--- a/src/client/pages/documentations.vue
+++ b/src/client/pages/documentations.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
+import { useFuse } from '@vueuse/integrations/useFuse'
 import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
 
-const items = ref(data)
+let localItems = data.value
+let packagesName
+
+const items = ref(localItems)
 const iframeViewUrl = ref('')
+
 rpc.getPackages().then((res) => {
-  const packagesName = Object.keys(res.packages)
-  items.value = items.value.filter(item => packagesName.includes(item.id))
+  packagesName = Object.keys(res.packages)
+  items.value = localItems.filter(item => packagesName.includes(item.id))
 })
 
 function navigate(data: DocumentInfo) {
@@ -17,24 +22,53 @@ function navigate(data: DocumentInfo) {
     iframeViewUrl.value = data.website
 }
 
+const keywords = ref('')
+const { results: filterDocuments } = useFuse(keywords, localItems.map(i => i.name), {
+  matchAllWhenSearchEmpty: true,
+})
+
+function handleFilterDoc() {
+  items.value = localItems.filter(item => (filterDocuments.value.map(i => i.item).includes(item.name) && packagesName.includes(item.id)))
+}
+
+// when remove the doc item from groups, need to update
+watch(data, () => {
+  localItems = data.value
+  handleFilterDoc()
+})
+
+/**
+ * Why listen to filterDocuments instead of keywords,
+ * because the final filtering is based on filterDocuments,
+ * and its change is less than keywords
+ */
+watch(filterDocuments, () => {
+  handleFilterDoc()
+})
+
 function back() {
   iframeViewUrl.value = ''
 }
 </script>
 
 <template>
-  <div v-if="iframeViewUrl" relative h-screen>
-    <IframeView :src="iframeViewUrl" />
-    <teleport to="body">
-      <span
-        fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
-        bg-base hover="text-primary" @click.prevent.stop="back"
-      >
-        <i tabler:arrow-back-up />
-      </span>
-    </teleport>
-  </div>
-  <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
-    <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+  <div class="overflow-y-scroll">
+    <div border="b base" flex="~ col gap1" px4 py3 navbar-glass>
+      <VTextInput v-model="keywords" font-mono icon="carbon:search" placeholder="Filter Documentations" op50 />
+    </div>
+    <div v-if="iframeViewUrl">
+      <IframeView :src="iframeViewUrl" />
+      <teleport to="body">
+        <span
+          fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
+          bg-base hover="text-primary" @click.prevent.stop="back"
+        >
+          <i tabler:arrow-back-up />
+        </span>
+      </teleport>
+    </div>
+    <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
+      <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+    </div>
   </div>
 </template>
diff --git a/src/client/pages/npm.vue b/src/client/pages/npm.vue
index 7f645972..0ae2d880 100644
--- a/src/client/pages/npm.vue
+++ b/src/client/pages/npm.vue
@@ -225,8 +225,8 @@ useInfiniteScroll(
               </td>
               <VDropdown max-w="10" placement="bottom-start" :distance="5">
                 <td
-                  hover="text-primary" h-7 cursor-pointer ws-nowrap pr-1 text-left font-mono text-sm lh-7 underline
-                  op70
+                  hover="text-primary"
+                  h-7 cursor-pointer ws-nowrap pr-1 text-left text-sm lh-7 font-mono underline op70
                 >
                   {{ item.activeVersion ?? item.version }}
                 </td>
@@ -243,12 +243,12 @@ useInfiniteScroll(
                   </ul>
                 </template>
               </VDropdown>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm underline op70 hover="text-primary">
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono underline op70 hover="text-primary">
                 <a :href="item?.owner?.link" target="_blank">
                   {{ item?.owner?.name ?? '-' }}
                 </a>
               </td>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op70>
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op70>
                 {{ item.humanDownloadsLast30Days }}
               </td>
               <td w-30 text-center>
diff --git a/src/client/pages/settings.vue b/src/client/pages/settings.vue
index 8be58c91..4f85a56e 100644
--- a/src/client/pages/settings.vue
+++ b/src/client/pages/settings.vue
@@ -104,7 +104,7 @@ const showTabGroup = ref(false)
           <div>
             <VDarkToggle v-slot="{ toggle, isDark }">
               <VButton n="primary" @click="toggle">
-                <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
+                <div carbon-sun translate-y--1px dark:carbon-moon /> {{ isDark.value ? 'Dark' : 'Light' }}
               </VButton>
             </VDarkToggle>
           </div>
@@ -119,6 +119,12 @@ const showTabGroup = ref(false)
             </option>
           </VSelect>
         </div>
+        <div py3 flex="~ col gap-1" border="b base">
+          <h3 mb1 text-lg>
+            Documentions
+          </h3>
+          <DocSetting />
+        </div>
         <div py3 flex="~ justify-between gap-1">
           <h3 mb1 text-lg>
             Close DevTools when clicking outside
diff --git a/src/client/uno.config.ts b/src/client/uno.config.ts
index faf51ff6..9e58ca50 100644
--- a/src/client/uno.config.ts
+++ b/src/client/uno.config.ts
@@ -35,6 +35,9 @@ export default defineConfig({
       // Vue tag
       'vue-tag-symbol': 'text-gray-400 dark:text-gray-600',
       'vue-tag-symbol-active': 'text-white/60',
+
+      // Vue Doc
+      'vue-doc-required': 'after:content-["*"] after:color-primary after:ml-4px',
     },
     [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`],
   ],
diff --git a/src/types.ts b/src/types.ts
index 3f9a94c7..df9d3b63 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -101,12 +101,12 @@ export type BuiltinTab = WithOptional<Tab, 'group' | 'groupIndex' | 'disabled'>
 export interface DocumentInfo {
   id: string
   name: string
-  description: string
   website: string
-  github: string
-  icon: string
-  tips: string
-  openInBlank: boolean
+  description?: string
+  github?: string
+  icon?: string
+  tips?: string
+  openInBlank?: boolean
 }
 
 export interface PackageInfo {