diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 8232566c..a7bc0587 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -8,14 +8,14 @@ useColorMode()
 const router = useRouter()
 const route = useRoute()
 const { connected } = useDevToolsState()
-const clientState = useDevToolsClientState()
+const clientState = devtoolsClientState
 
 const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
 const viewModeSwitchVisible = computed(() => viewMode.value === 'overlay' && isInChromePanel)
 const { toggle } = useToggleViewMode()
 
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
-const sidebarExpanded = false
+const sidebarExpanded = computed(() => clientState.value.expandSidebar)
 
 watch(connected, (v) => {
   if (v) {
diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index 02f6e058..e3bedd06 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -6,11 +6,10 @@ const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
 const buttonMoreTabs = ref<HTMLButtonElement>()
-const sidebarExpanded = ref(false)
+const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = ref(false)
 
-// @TODO: dynamic tabs
-const displayedTabs = builtinTab
+const displayedTabs = categorizedTabs
 </script>
 
 <template>
@@ -21,7 +20,7 @@ const displayedTabs = builtinTab
     <div
       sticky top-0 z-1 w-full p1 bg-base border="b base"
     >
-      <VueDropdown placement="left-start" :distance="6" :skidding="5" trigger="click" :shown="showDocking">
+      <VueDropdown placement="left-start" :distance="6" :skidding="5" trigger="click" :shown="showDocking" class="w-full">
         <button
           ref="buttonDocking"
           flex="~ items-center justify-center gap-2"
@@ -34,7 +33,7 @@ const displayedTabs = builtinTab
         >
           <div i-logos-vue h-6 w-6 />
           <template v-if="sidebarExpanded">
-            <span text="lg white" font-600>
+            <span text-lg text-base font-600>
               DevTools
             </span>
             <div flex-auto />
@@ -51,16 +50,15 @@ const displayedTabs = builtinTab
       flex="~ auto col gap-0.5 items-center" w-full p1 class="no-scrollbar"
       :class="sidebarExpanded ? '' : 'of-x-hidden of-y-auto'"
     >
-      <template v-for="[name, tabs], idx of displayedTabs" :key="name">
-        <template v-if="tabs.length">
-          <div v-if="idx" my1 h-1px w-full border="b base" />
-          <SideNavItem
-            v-for="tab of tabs"
-            :key="tab.name"
-            :tab="tab"
-            :minimized="!sidebarExpanded"
-          />
-        </template>
+      <template v-for="[name, tabs], idx of displayedTabs.filter(([{ hidden }, items]) => items.length && !hidden)" :key="name">
+        <!-- if is not the first nonempty list, render the top divider -->
+        <div v-if="idx" my1 h-1px w-full border="b base" />
+        <SideNavItem
+          v-for="tab of tabs.filter(item => !item.hidden)"
+          :key="tab.name"
+          :tab="tab"
+          :minimized="!sidebarExpanded"
+        />
       </template>
       <div flex-auto />
     </div>
diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
index f57740d3..8d52f561 100644
--- a/packages/client/src/components/common/SideNavItem.vue
+++ b/packages/client/src/components/common/SideNavItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { toValue } from '@vueuse/core'
+import { VueTooltip } from '@vue-devtools-next/ui'
 import type { ModuleBuiltinTab } from '~/types'
 
 const props = withDefaults(
@@ -27,17 +28,17 @@ function onClick() {
 </script>
 
 <template>
-  <VTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
+  <VueTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
     <component
       :is="target === 'main' ? RouterLink : 'button'"
       :to="tabPath"
       :flex="`~ items-center ${minimized ? 'justify-center' : 'justify-between'}`"
-      hover="bg-active"
-      relative block h-10
+      hover="bg-active op-100"
+      relative block h-10 op65
       :w="minimized ? '10' : 'full'" select-none
       :rounded="minimized ? 'xl' : ''"
       :p="minimized ? '1' : 'x3'" text-secondary
-      exact-active-class="!text-primary-600 bg-active"
+      exact-active-class="!text-primary-600 bg-active op-100!"
       @click="onClick"
     >
       <div flex="~ items-center gap-3">
@@ -47,7 +48,7 @@ function onClick() {
           title="Settings"
           :show-title="false"
         />
-        <span v-if="!minimized" overflow-hidden text-ellipsis ws-nowrap>
+        <span v-if="!minimized" text-md overflow-hidden text-ellipsis ws-nowrap>
           {{ tab.title }}
         </span>
       </div>
@@ -67,5 +68,5 @@ function onClick() {
         <Component :is="tab.extraTabVNode" />
       </div>
     </template>
-  </VTooltip>
+  </VueTooltip>
 </template>
diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts
index bb53d71a..26c081a7 100644
--- a/packages/client/src/composables/graph.ts
+++ b/packages/client/src/composables/graph.ts
@@ -1,7 +1,6 @@
 import type { ModuleInfo } from '@vue-devtools-next/core'
 import { DataSet } from 'vis-network/standalone'
 import type { Edge, Node, Options } from 'vis-network'
-import type { RemovableRef } from '@vueuse/core'
 
 // #region file types
 export const fileTypes = {
@@ -86,10 +85,11 @@ export interface GraphSettings {
   lib: boolean
 }
 
-export const graphSettings: RemovableRef<GraphSettings> = useLocalStorage<GraphSettings>('vue-devtools-next-graph-settings', {
-  node_modules: false,
-  virtual: false,
-  lib: false,
+export const graphSettings = computed({
+  get: () => devtoolsClientState.value.graphSettings,
+  set: (value: GraphSettings) => {
+    devtoolsClientState.value.graphSettings = value
+  },
 })
 
 watch(graphSettings, () => {
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
new file mode 100644
index 00000000..e5fa487c
--- /dev/null
+++ b/packages/client/src/composables/state-tab.ts
@@ -0,0 +1,45 @@
+import type { ModuleBuiltinTab } from '~/types/tab'
+
+export interface TabSettings {
+  hiddenTabCategories: string[]
+  hiddenTabs: string[]
+  pinnedTabs: string[]
+}
+
+export interface CategorizedTab extends ModuleBuiltinTab {
+  hidden: boolean
+}
+
+export interface CategorizedCategory {
+  name: string
+  hidden: boolean
+}
+
+export const categorizedTabs = computed(() => {
+  const { hiddenTabCategories, hiddenTabs, pinnedTabs } = devtoolsClientState.value.tabSettings
+  // TODO: custom tabs
+  const tabs = builtinTab.reduce<[CategorizedCategory, CategorizedTab[]][]>((prev, [category, tabs]) => {
+    const data: [CategorizedCategory, CategorizedTab[]] = [{ hidden: false, name: category }, []]
+    let hiddenCount = 0
+    tabs.forEach((tab) => {
+      const hidden = hiddenTabs.includes(tab.name) || hiddenTabCategories.includes(category)
+      if (hidden)
+        hiddenCount += 1
+
+      if (pinnedTabs.includes(tab.name)) {
+        prev[0][1].push({
+          ...tab,
+          hidden,
+        })
+      }
+      else { data[1].push({ ...tab, hidden }) }
+    })
+    if (hiddenCount === tabs.length)
+      data[0].hidden = true
+    prev.push(data)
+    return prev
+  }, [[{ name: 'pinned', hidden: false }, []]])
+  // sort pinned tabs by pinned order
+  tabs[0][1].sort((a, b) => pinnedTabs.indexOf(a.name) - pinnedTabs.indexOf(b.name))
+  return tabs
+})
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index fae4d45b..2bea1121 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -1,13 +1,29 @@
 import type { RemovableRef } from '@vueuse/core'
+import type { GraphSettings } from './graph'
+import type { TabSettings } from './state-tab'
 
-export function useDevToolsClientState(): RemovableRef<{
+export const devtoolsClientState: RemovableRef<{
   isFirstVisit: boolean
   route: string
-}> {
-  const state = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
-    isFirstVisit: true,
-    route: '/',
-  })
+  graphSettings: GraphSettings
+  tabSettings: TabSettings
+  expandSidebar: boolean
+}> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
+  isFirstVisit: true,
+  route: '/',
+  graphSettings: {
+    node_modules: false,
+    virtual: false,
+    lib: false,
+  },
+  tabSettings: {
+    hiddenTabCategories: [],
+    hiddenTabs: [],
+    pinnedTabs: [],
+  },
+  expandSidebar: false,
+}, { mergeDefaults: true })
 
-  return state
+export function clearDevtoolsClientState() {
+  devtoolsClientState.value = undefined
 }
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index 4f88cac5..1a57ad59 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -17,6 +17,7 @@ import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
 import Graph from '~/pages/graph.vue'
 import Index from '~/pages/index.vue'
+import Settings from '~/pages/settings.vue'
 
 import 'uno.css'
 import '~/assets/styles/main.css'
@@ -39,6 +40,7 @@ const routes = [
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
+  { path: '/settings', component: Settings },
 ]
 
 // @TODO: find a better way to handle it
diff --git a/packages/client/src/pages/index.vue b/packages/client/src/pages/index.vue
index fb3798a3..8021c27a 100644
--- a/packages/client/src/pages/index.vue
+++ b/packages/client/src/pages/index.vue
@@ -2,7 +2,7 @@
 import { VueButton } from '@vue-devtools-next/ui'
 
 const router = useRouter()
-const clientState = useDevToolsClientState()
+const clientState = devtoolsClientState
 
 function visit() {
   clientState.value.isFirstVisit = false
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
new file mode 100644
index 00000000..03637bd1
--- /dev/null
+++ b/packages/client/src/pages/settings.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { VueButton, VueCard, VueCheckbox, VueDarkToggle, VueSwitch } from '@vue-devtools-next/ui'
+
+const categories = categorizedTabs
+
+const { hiddenTabCategories, hiddenTabs, pinnedTabs } = toRefs(devtoolsClientState.value.tabSettings)
+const expandSidebar = computed({
+  get: () => devtoolsClientState.value.expandSidebar,
+  set: v => (devtoolsClientState.value.expandSidebar = v),
+})
+
+function toggleTab(name: string, v: boolean) {
+  if (v)
+    hiddenTabs.value = hiddenTabs.value.filter(i => i !== name)
+  else
+    hiddenTabs.value.push(name)
+}
+
+function toggleTabCategory(name: string, v: boolean) {
+  if (v)
+    hiddenTabCategories.value = hiddenTabCategories.value.filter(i => i !== name)
+  else
+    hiddenTabCategories.value.push(name)
+}
+
+function togglePinTab(name: string) {
+  if (pinnedTabs.value.includes(name))
+    pinnedTabs.value = pinnedTabs.value.filter(i => i !== name)
+  else
+    pinnedTabs.value.push(name)
+}
+
+function pinMove(name: string, delta: number) {
+  const index = pinnedTabs.value.indexOf(name)
+  if (index === -1)
+    return
+
+  const newIndex = index + delta
+  if (newIndex < 0 || newIndex >= pinnedTabs.value.length)
+    return
+
+  const newPinnedTabs = [...pinnedTabs.value]
+  newPinnedTabs.splice(index, 1)
+  newPinnedTabs.splice(newIndex, 0, name)
+  pinnedTabs.value = newPinnedTabs
+}
+
+async function clearOptions() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Are you sure you to reset all local settings & state? Devtools will reload.')) {
+    clearDevtoolsClientState()
+    window.location.reload()
+  }
+}
+</script>
+
+<template>
+  <div px8 py6 of-auto w-full h-full>
+    <IconTitle
+      class="mb-5 text-xl op75"
+      icon="i-carbon-settings-adjust"
+      text="DevTools Settings"
+    />
+    <div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
+      <div flex="~ col gap-2">
+        <h3 text-lg>
+          Tabs
+        </h3>
+        <template v-for="[{ name, hidden }, tabs] of categories" :key="name">
+          <VueCard
+            v-if="tabs.length" p3 flex="~ col gap-1"
+            :class="hidden ? 'op50 grayscale' : ''"
+          >
+            <VueSwitch
+              :model-value="!hiddenTabCategories.includes(name)"
+              class="flex row-reverse py1 pl2 pr1 hover:bg-active"
+              @update:model-value="(v: boolean) => toggleTabCategory(name, v)"
+            >
+              <div flex="~ gap-2" flex-auto items-center justify-start>
+                <span capitalize op75>{{ name }}</span>
+              </div>
+            </VueSwitch>
+
+            <div mx--1 my1 h-1px border="b base" op75 />
+
+            <template v-for="tab of tabs" :key="tab.name">
+              <VueSwitch
+                class="flex row-reverse py1 pl2 pr1 n-primary hover:bg-active"
+                :model-value="!hiddenTabs.includes(tab.name)"
+                :class="tab.hidden ? 'op35' : ''"
+                @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
+              >
+                <div flex="~ gap-2" text-sm flex-auto items-center justify-start pr-4>
+                  <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
+                  <span>{{ tab.title }}</span>
+                  <div flex-auto />
+                  <template v-if="pinnedTabs.includes(tab.name)">
+                    <button
+                      class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65"
+                      @click.stop="() => {
+                        if (pinnedTabs.indexOf(tab.name) === 0) return
+                        pinMove(tab.name, -1)
+                      }"
+                    >
+                      <div class="i-carbon-caret-up" />
+                    </button>
+                    <button
+                      class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65"
+                      @click.stop="() => {
+                        if (pinnedTabs.indexOf(tab.name) === pinnedTabs.length - 1) return
+                        pinMove(tab.name, 1)
+                      }"
+                    >
+                      <div class="i-carbon-caret-down" />
+                    </button>
+                  </template>
+                  <button class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65" @click.stop="togglePinTab(tab.name)">
+                    <div :class="pinnedTabs.includes(tab.name) ? ' i-carbon-pin-filled rotate--45' : ' i-carbon-pin op45'" />
+                  </button>
+                </div>
+              </VueSwitch>
+            </template>
+          </VueCard>
+        </template>
+      </div>
+      <div flex="~ col gap-2">
+        <h3 text-lg>
+          Appearance
+        </h3>
+        <VueCard p4 flex="~ col gap-2">
+          <div>
+            <VueDarkToggle v-slot="{ isDark, toggle }">
+              <VueButton outlined type="primary" @click="toggle">
+                <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
+              </VueButton>
+            </VueDarkToggle>
+          </div>
+          <div mx--2 my1 h-1px border="b base" op75 />
+          <div class="flex items-center gap2 text-sm">
+            <VueCheckbox v-model="expandSidebar" />
+            <span op75>Expand Sidebar</span>
+          </div>
+        </VueCard>
+        <h3 mt2 text-lg>
+          Debug
+        </h3>
+        <div flex="~ gap-2">
+          <VueButton outlined type="warning" @click="clearOptions">
+            <div i-carbon-breaking-change />
+            Reset Local Settings & State
+          </VueButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/Button.vue b/packages/ui/src/components/Button.vue
index beef9456..3c58232d 100644
--- a/packages/ui/src/components/Button.vue
+++ b/packages/ui/src/components/Button.vue
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
   size: 'normal',
   flat: false,
+  outlined: false,
 })
 
 const emit = defineEmits<{
@@ -26,6 +27,7 @@ export interface ButtonProps {
   disabled?: boolean
   size?: 'normal' | 'mini'
   flat?: boolean
+  outlined?: boolean
 }
 
 export type ButtonType = 'default' | 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success'
@@ -52,7 +54,7 @@ function handleClick(e: MouseEvent) {
   emit('click', e)
 }
 
-const styles: Record<'common' | 'normal' | 'flat', Record<ButtonType, string>> = {
+const styles: Record<'common' | 'normal' | 'flat' | 'outlined', Record<ButtonType, string>> = {
   common: {
     default: 'active:bg-primary-100-darker dark:active:bg-gray-800-darker',
     primary: 'active:bg-primary-500-darker',
@@ -80,9 +82,26 @@ const styles: Record<'common' | 'normal' | 'flat', Record<ButtonType, string>> =
     info: 'hover:(bg-primary-100 text-info-500) dark:(hover:(bg-gray-800 text-info-400))',
     success: 'hover:(bg-primary-100 text-primary-500) dark:(hover:(bg-primary-800 text-primary-400))',
   },
+  outlined: {
+    default: 'hover:(border-primary-100 text-primary-300 active:(ring-primary-100:5 bg-primary-100:5))',
+    primary: 'hover:(border-primary-500 text-primary-500) active:(ring-primary-500:5 bg-primary-500:5)',
+    accent: 'hover:(border-accent-500 text-accent-500) active:(ring-accent-500:5 bg-accent-500:5)',
+    danger: 'hover:(border-danger-500 text-danger-500) active:(ring-danger-500:5 bg-danger-500:5)',
+    warning: 'hover:(border-warning-500 text-warning-500) active:(ring-warning-500:5 bg-warning-500:5)',
+    info: 'hover:(border-info-500 text-info-500) active:(ring-info-500:5 bg-info-500:5)',
+    success: 'hover:(border-primary-500 text-primary-500) active:(ring-primary-500:5 bg-primary-500:5)',
+  },
 }
 
 const slots = useSlots()
+
+const variantClasses = computed(() => {
+  if (props.flat)
+    return styles.flat[props.type]
+  if (props.outlined)
+    return styles.outlined[props.type]
+  return styles.normal[props.type]
+})
 </script>
 
 <template>
@@ -90,18 +109,19 @@ const slots = useSlots()
     :is="component" v-bind="$attrs"
     role="button" :aria-disabled="disabled"
     class="$ui-base select-none inline-flex no-underline
-       $ui-inline-fcc border-none cursor-pointer py-0 gap5px"
+       $ui-inline-fcc cursor-pointer py-0 gap5px $ui-transition"
     :class="[
       [styles.common[props.type]],
       {
         'rounded-full': props.round === 'full',
         '$ui-base-br': props.round === 'normal',
         'opacity-50 cursor-not-allowed': disabled,
-        'bg-transparent': props.flat,
+        'bg-transparent': props.flat || props.outlined,
       },
       [
+        outlined ? 'b-1 $ui-border-base active:ring-3 shadow-sm' : 'border-none',
         size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
-        flat ? styles.flat[props.type] : styles.normal[props.type],
+        variantClasses,
       ],
     ]"
     @click.capture="handleClick"
diff --git a/packages/ui/src/components/Dropdown.vue b/packages/ui/src/components/Dropdown.vue
index 4431c911..58d02aa0 100644
--- a/packages/ui/src/components/Dropdown.vue
+++ b/packages/ui/src/components/Dropdown.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts" generic="T">
-import type { Placement } from 'floating-vue'
 import { Dropdown } from 'floating-vue'
 import { computed, provide } from 'vue'
+import type { FloatingVueCommonProps } from '../types'
 import type { ButtonProps } from './Button.vue'
 import VueButton from './Button.vue'
 
 const props = withDefaults(defineProps<{
   label?: string
-  autoHide?: boolean
-  trigger?: 'click' | 'hover'
   buttonProps?: ButtonProps
   buttonClass?: ''
-  distance?: number
-  skidding?: number
-  placement?: Placement
-  disabled?: boolean
-  shown?: boolean
-}>(), {
-  autoHide: true,
+} & FloatingVueCommonProps>(), {
   trigger: 'click',
   buttonClass: '',
   distance: 0,
diff --git a/packages/ui/src/components/Switch.vue b/packages/ui/src/components/Switch.vue
index d90c9490..a32d4c62 100644
--- a/packages/ui/src/components/Switch.vue
+++ b/packages/ui/src/components/Switch.vue
@@ -28,7 +28,7 @@ const toggleValue = useToggle(value)
       }"
       class="$ui-base w32px h16px rounded-8px transition-colors
             relative bg-primary-100 dark:bg-gray-700 group
-            [&.selected]:bg-primary-500
+            [&.selected]:bg-primary-500!
       "
     >
       <div
diff --git a/packages/ui/src/components/Tooltip.vue b/packages/ui/src/components/Tooltip.vue
new file mode 100644
index 00000000..cb586b2b
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+import type { FloatingVueCommonProps } from '../types'
+
+defineProps<FloatingVueCommonProps>()
+</script>
+
+<template>
+  <Tooltip
+    :disabled="disabled"
+    :placement="placement"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template #popper>
+      <slot name="popper" />
+    </template>
+  </Tooltip>
+</template>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index f4227dda..6848e1b1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -16,6 +16,7 @@ import Checkbox from './Checkbox.vue'
 import Drawer from './Drawer.vue'
 import Overlay from './Overlay.vue'
 import Notification from './Notification.vue'
+import Tooltip from './Tooltip.vue'
 
 export {
   Badge as VueBadge,
@@ -36,4 +37,5 @@ export {
   Select as VueSelect,
   Switch as VueSwitch,
   Notification as VueNotification,
+  Tooltip as VueTooltip,
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 6b621848..18d9ac9e 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -8,6 +8,7 @@ import { VTooltip } from 'floating-vue'
 
 export * from './components'
 export * from './composables'
+export * from './types'
 
 export {
   VTooltip,
diff --git a/packages/ui/src/types/floating-vue.ts b/packages/ui/src/types/floating-vue.ts
new file mode 100644
index 00000000..3e95a9a3
--- /dev/null
+++ b/packages/ui/src/types/floating-vue.ts
@@ -0,0 +1,10 @@
+import type { Placement } from 'floating-vue'
+
+export interface FloatingVueCommonProps {
+  trigger?: 'click' | 'hover'
+  distance?: number
+  skidding?: number
+  placement?: Placement
+  disabled?: boolean
+  shown?: boolean
+}
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
new file mode 100644
index 00000000..8ffe5808
--- /dev/null
+++ b/packages/ui/src/types/index.ts
@@ -0,0 +1 @@
+export * from './floating-vue'
diff --git a/packages/ui/storybook/Button.story.vue b/packages/ui/storybook/Button.story.vue
index 96924731..013bb6ea 100644
--- a/packages/ui/storybook/Button.story.vue
+++ b/packages/ui/storybook/Button.story.vue
@@ -13,6 +13,7 @@ const state = reactive<{
 })
 
 const flat = ref(false)
+const outlined = ref(false)
 </script>
 
 <template>
@@ -32,34 +33,35 @@ const flat = ref(false)
         }"
       />
       <HstCheckbox v-model="flat" title="Flat" />
+      <HstCheckbox v-model="outlined" title="Outlined" />
     </template>
     <Variant title="Normal Button">
-      <Button :flat="flat" :type="state.type" @click="logEvent('click event', $event)">
+      <Button :flat="flat" :outlined="outlined" :type="state.type" @click="logEvent('click event', $event)">
         Button
       </Button>
     </Variant>
     <Variant title="A Button">
-      <Button :flat="flat" href="https://vuejs.org" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" href="https://vuejs.org" :type="state.type">
         A Button
       </Button>
     </Variant>
     <Variant title="RouterLink Button">
-      <Button :flat="flat" to="router-path" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" to="router-path" :type="state.type">
         RouterLink Button
       </Button>
     </Variant>
     <Variant title="Round Button">
-      <Button :flat="flat" round="full" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" round="full" :type="state.type">
         Round Button
       </Button>
     </Variant>
     <Variant title="Loading Button">
-      <Button :flat="flat" loading :type="state.type">
+      <Button :flat="flat" :outlined="outlined" loading :type="state.type">
         Loading Button
       </Button>
     </Variant>
     <Variant title="With Icon">
-      <Button :flat="flat" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" :type="state.type">
         <template #icon>
           <Icon class="i-carbon-moon" />
         </template>
@@ -67,18 +69,25 @@ const flat = ref(false)
       </Button>
     </Variant>
     <Variant title="With Badge">
-      <Button :flat="flat" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" :type="state.type">
         Badge Button
         <Badge>10</Badge>
       </Button>
     </Variant>
     <Variant title="Mini Button">
-      <Button :flat="flat" :type="state.type" size="mini">
+      <Button :flat="flat" :outlined="outlined" :type="state.type" size="mini">
         <template #icon>
           <Icon icon="i-material-symbols-more-vert" />
         </template>
       </Button>
     </Variant>
+    <Variant title="Padding">
+      <div class="p5">
+        <Button :flat="flat" :outlined="outlined" :type="state.type">
+          123
+        </Button>
+      </div>
+    </Variant>
   </Story>
 </template>
 
diff --git a/packages/ui/storybook/Tooltip.story.vue b/packages/ui/storybook/Tooltip.story.vue
new file mode 100644
index 00000000..eddaee2c
--- /dev/null
+++ b/packages/ui/storybook/Tooltip.story.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { VueButton } from '../src'
+import VueTooltip from '../src/components/Tooltip.vue'
+</script>
+
+<template>
+  <Story>
+    <div class="flex">
+      <VueTooltip>
+        <VueButton>Hover me</VueButton>
+        <template #popper>
+          <div class="p-4">
+            Tooltip content
+          </div>
+        </template>
+      </VueTooltip>
+    </div>
+  </Story>
+</template>