diff --git a/packages/lib/src/App/app-comp.vue b/packages/lib/src/App/app-comp.vue
index e0ac3be..8940f62 100644
--- a/packages/lib/src/App/app-comp.vue
+++ b/packages/lib/src/App/app-comp.vue
@@ -89,6 +89,7 @@
         variant="outlined"
       />
       <Select placeholder="Select" span multiple :items="['one', 'two']" />
+      <Select placeholder="Select" span :items="['one', 'two']" />
       <div class="flex">
         <Switch />
         <Switch variant="filled" />
diff --git a/packages/lib/src/assets/button.scss b/packages/lib/src/assets/button.scss
index 63b3dfe..4e7c259 100644
--- a/packages/lib/src/assets/button.scss
+++ b/packages/lib/src/assets/button.scss
@@ -12,7 +12,7 @@
 .md-chip {
   --size: calc(var(--component-xs) * var(--scale));
 
-  padding-inline: calc(var(--sm) * var(--scale));
+  padding-inline: calc(var(--xs) * var(--scale));
 }
 
 .md-button,
diff --git a/packages/lib/src/assets/input.scss b/packages/lib/src/assets/input.scss
index 8f96d7d..e4dcc5b 100644
--- a/packages/lib/src/assets/input.scss
+++ b/packages/lib/src/assets/input.scss
@@ -48,7 +48,6 @@
     grid-area: input;
     font: inherit;
     width: 100%;
-    min-height: 100%;
     color: currentcolor;
 
     &:focus {
@@ -97,22 +96,26 @@
     transition: all 0.2s;
   }
 
-  &.outlined {
-    border-radius: var(--xxs);
-    box-shadow: 0 0 0 1px inset var(--outline);
+  &[variant='outlined'] {
+    .md-input-wrapper {
+      border-radius: var(--xxs);
+      box-shadow: 0 0 0 1px inset var(--outline);
+    }
 
     &:focus-within .md-input-wrapper {
       box-shadow: 0 0 0 2px inset var(--primary);
     }
   }
 
-  &.outlined &-placeholder {
+  &[variant='outlined'] &-placeholder {
     background: var(--surface);
   }
 
-  &.filled {
-    border-radius: var(--xxs) var(--xxs) 0 0;
-    background: var(--surface-container-highest);
+  &[variant='filled'] {
+    .md-input-wrapper {
+      border-radius: var(--xxs) var(--xxs) 0 0;
+      background: var(--surface-container-highest);
+    }
 
     input {
       padding-top: var(--md);
@@ -123,8 +126,8 @@
     }
   }
 
-  &.filled &-wrapper::before,
-  &.filled &-wrapper::after {
+  &[variant='filled'] &-wrapper::before,
+  &[variant='filled'] &-wrapper::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -132,22 +135,22 @@
     height: 2px;
   }
 
-  &.filled &-wrapper::before {
+  &[variant='filled'] &-wrapper::before {
     height: 1px;
     background: var(--on-surface-variant);
   }
 
-  &.filled &-wrapper::after {
+  &[variant='filled'] &-wrapper::after {
     scale: 0 1;
     transition: all 0.2s;
   }
 
-  &.filled &-prefix,
-  &.filled &-suffix {
+  &[variant='filled'] &-prefix,
+  &[variant='filled'] &-suffix {
     padding: var(--md) var(--xs) 0 0;
   }
 
-  &.filled:focus-within &-wrapper::after {
+  &[variant='filled']:focus-within &-wrapper::after {
     background: var(--primary);
     scale: 1 1;
   }
@@ -168,6 +171,7 @@
     width: 100%;
   }
 
+  &[open],
   &:focus-within {
     .md-input-placeholder {
       color: var(--primary);
@@ -188,16 +192,16 @@
     }
   }
 
-  &.filled:focus-within,
-  &.filled:not([empty]) {
+  &[variant='filled']:focus-within,
+  &[variant='filled']:not([empty]) {
     .md-input-placeholder {
       top: var(--xxs);
       font-size: var(--font-sm);
     }
   }
 
-  &.outlined:focus-within,
-  &.outlined:not([empty]) {
+  &[variant='outlined']:focus-within,
+  &[variant='outlined']:not([empty]) {
     .md-input-placeholder {
       left: var(--sm) !important;
       padding-inline: var(--xxs);
diff --git a/packages/lib/src/assets/layout.scss b/packages/lib/src/assets/layout.scss
index 9689c96..71020ef 100644
--- a/packages/lib/src/assets/layout.scss
+++ b/packages/lib/src/assets/layout.scss
@@ -18,6 +18,7 @@
   --lg: var(--padding-lg);
   --xl: var(--padding-xl);
   --xxl: var(--padding-xxl);
+  --bottom-offset: 0px;
 
   transform: translate3d(0, 0, 0);
   background: var(--surface);
@@ -33,8 +34,9 @@
   inset: 0;
 
   .md-layout-content {
-    position: absolute;
     inset: 0;
+    position: absolute;
+    bottom: var(--bottom-offset);
   }
 
   &:has(> .md-navbar) {
@@ -67,9 +69,7 @@
     }
 
     &:has(> .md-navbar) {
-      > .md-layout-content {
-        bottom: var(--navbar-size);
-      }
+      --bottom-offset: var(--navbar-size);
     }
   }
 }
diff --git a/packages/lib/src/assets/ripple.scss b/packages/lib/src/assets/ripple.scss
index bb471a5..bb2c720 100644
--- a/packages/lib/src/assets/ripple.scss
+++ b/packages/lib/src/assets/ripple.scss
@@ -4,7 +4,7 @@
   position: absolute;
   transform: translate(-50%, -50%);
   pointer-events: none;
-  opacity: 0.1;
+  opacity: 0.05;
   scale: 0.1;
   transform-origin: left top;
   background-image: radial-gradient(
diff --git a/packages/lib/src/components/Input/number.vue b/packages/lib/src/components/Input/number.vue
index c254bf3..a1d4cf6 100644
--- a/packages/lib/src/components/Input/number.vue
+++ b/packages/lib/src/components/Input/number.vue
@@ -48,8 +48,7 @@
   <div
     class="md-input number"
     @click="input?.focus()"
-    :class="variant ?? 'filled'"
-    :data-placeholder="placeholder"
+    :variant="variant ?? 'filled'"
   >
     <div class="md-input-wrapper">
       <HybridIcon class="md-input-icon left" :icon="leftIcon" />
diff --git a/packages/lib/src/components/Input/text.vue b/packages/lib/src/components/Input/text.vue
index c6d7687..2bd795e 100644
--- a/packages/lib/src/components/Input/text.vue
+++ b/packages/lib/src/components/Input/text.vue
@@ -50,7 +50,7 @@
   <div
     class="md-input text"
     @click="inputRef?.focus()"
-    :class="variant ?? 'filled'"
+    :variant="variant ?? 'filled'"
     :empty="area.empty || undefined"
   >
     <div class="md-input-wrapper">
diff --git a/packages/lib/src/components/Layout/fab.vue b/packages/lib/src/components/Layout/fab.vue
index acb2850..5bd5e26 100644
--- a/packages/lib/src/components/Layout/fab.vue
+++ b/packages/lib/src/components/Layout/fab.vue
@@ -4,13 +4,14 @@
   import { keyClick } from '@/utils/dom/events'
   import { rippleEffect } from '@/utils/dom/ripple'
   import { inject, ref } from 'vue'
+
   import HybridIcon from '../Misc/hybrid-icon.vue'
 
   interface FabProperties extends /* @vue-ignore */ ButtonHTMLAttributes {
     icon?: string | Component
   }
 
-  const scrollTop = inject('content-scroll-top', ref(0))
+  const scroll = inject('scroll-container', ref({ x: 0, y: 0 }))
 
   defineProps<FabProperties>()
   defineOptions({ name: 'MdFloatingActionButton' })
@@ -20,7 +21,7 @@
   <button
     class="md-fab"
     tabindex="0"
-    :class="{ 'on-top': scrollTop < 6 }"
+    :class="{ 'on-top': scroll.x < 6 }"
     @pointerdown="rippleEffect"
     @keydown="keyClick"
   >
@@ -33,8 +34,8 @@
 
 <style lang="scss">
   .md-fab {
-    position: absolute;
-    bottom: var(--md);
+    position: fixed;
+    bottom: calc(var(--bottom-offset, 0) + var(--md));
     right: var(--md);
     padding-inline: var(--md);
     height: var(--fab-size);
@@ -60,7 +61,7 @@
       transition: all 0.2s var(--timing-standard);
     }
 
-    &.on-top .md-fab-label {
+    &.on-top &-label {
       opacity: 1;
       padding-left: var(--sm);
       max-width: 300px;
diff --git a/packages/lib/src/components/Layout/layout.vue b/packages/lib/src/components/Layout/layout.vue
index f1f48d2..44170b8 100644
--- a/packages/lib/src/components/Layout/layout.vue
+++ b/packages/lib/src/components/Layout/layout.vue
@@ -15,10 +15,10 @@
   <ThemeProvider class="md-layout" v-bind="$props">
     <slot name="navbar" />
     <div class="md-layout-content">
-      <slot name="fab" />
       <ScrollContainer>
         <template #header>
           <slot name="header" />
+          <slot name="fab" />
         </template>
         <slot />
       </ScrollContainer>
diff --git a/packages/lib/src/components/Layout/scroll-container.vue b/packages/lib/src/components/Layout/scroll-container.vue
index f5e19a9..c440229 100644
--- a/packages/lib/src/components/Layout/scroll-container.vue
+++ b/packages/lib/src/components/Layout/scroll-container.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { onBeforeUnmount, onMounted, provide, ref } from 'vue'
+  import { onMounted, onUnmounted, provide, ref } from 'vue'
 
   interface ScrollPosition {
     x: number
@@ -11,16 +11,12 @@
     (e: 'scroll', value: ScrollPosition): void
   }
 
-  defineOptions({ name: 'MdScrollContainer' })
   const emit = defineEmits<ScrollContainerEmits>()
-
-  const element = ref<HTMLElement>()
+  const root = ref<HTMLElement>()
   const model = defineModel<ScrollPosition>({
     default: () => ({ x: 0, y: 0 })
   })
 
-  provide('scroll-container', model)
-
   function onScroll(event: Event) {
     const target = event.currentTarget as HTMLElement
 
@@ -31,17 +27,15 @@
     emit('change', { x, y })
   }
 
-  onMounted(() => {
-    element.value!.addEventListener('scroll', onScroll)
-  })
+  onMounted(() => root.value?.addEventListener('scroll', onScroll))
+  onUnmounted(() => root.value?.removeEventListener('scroll', onScroll))
 
-  onBeforeUnmount(() => {
-    element.value!.removeEventListener('scroll', onScroll)
-  })
+  provide('scroll-container', model)
+  defineOptions({ name: 'MdScrollContainer' })
 </script>
 
 <template>
-  <div class="md-scroll" ref="element">
+  <div class="md-scroll" ref="root">
     <slot name="header" />
     <slot
       name="wrapper"
diff --git a/packages/lib/src/components/Navigation/navigation-bar.vue b/packages/lib/src/components/Navigation/navigation-bar.vue
index b53ec92..4704fb7 100644
--- a/packages/lib/src/components/Navigation/navigation-bar.vue
+++ b/packages/lib/src/components/Navigation/navigation-bar.vue
@@ -137,16 +137,16 @@
     }
 
     &-item:hover &-item-icon {
-      background: var(--surface);
+      background: var(--surface-container-highest);
     }
 
     &-item.active {
       .md-navbar-item-icon {
-        color: var(--on-secondary-container);
+        color: var(--on-secondary);
 
         &::before {
           width: var(--size-lg);
-          background: var(--secondary-container);
+          background: var(--secondary);
         }
       }
 
diff --git a/packages/lib/src/components/Select/option-item.vue b/packages/lib/src/components/Select/option-item.vue
index 343367a..99020a9 100644
--- a/packages/lib/src/components/Select/option-item.vue
+++ b/packages/lib/src/components/Select/option-item.vue
@@ -11,8 +11,6 @@
 
 <style lang="scss" scoped>
   .md-select-option-item {
-    cursor: pointer;
-    padding-inline: 1rem;
     user-select: none;
   }
 </style>
diff --git a/packages/lib/src/components/Select/select.vue b/packages/lib/src/components/Select/select.vue
index 0179f73..575eef3 100644
--- a/packages/lib/src/components/Select/select.vue
+++ b/packages/lib/src/components/Select/select.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
-  import type { HTMLAttributes } from 'vue'
+  import '@/assets/input.scss'
+
+  import type { Component, HTMLAttributes } from 'vue'
   import type { MixedValues } from '@/utils/other/to-object-value'
 
-  import { keyClick } from '@/utils/dom/events'
   import { rippleEffect } from '@/utils/dom/ripple'
-  import { Icon } from '@iconify/vue'
   import { computed, onMounted, onUnmounted, ref } from 'vue'
   import { filterByLabel, toggleItem } from './util'
   import { useValue } from '@/ref/use-form-value'
   import { toObjectValue } from '@/utils/other/to-object-value'
 
   import OptionItem from './option-item.vue'
+  import HybridIcon from '../Misc/hybrid-icon.vue'
+  import Chip from '../Chip/chip.vue'
 
   interface SelectProps
     extends /* @vue-ignore */ Omit<HTMLAttributes, 'onChange'> {
     value?: (string | number)[]
     defaultValue?: (string | number)[]
+    prefix?: string
+    variant?: 'filled' | 'outlined'
+    icon?: string | Component
     items?: MixedValues
     multiple?: boolean
     required?: boolean
@@ -27,26 +32,31 @@
   }
 
   const show = ref(false)
+  const root = ref<HTMLElement>()
   const search = ref('')
-  const select = ref<HTMLElement>()
 
   const props = defineProps<SelectProps>()
   const emits = defineEmits<SelectEmits>()
   const model = defineModel<(string | number)[]>()
   const values = computed(() => toObjectValue(props.items ?? []))
-  const selected = useValue([], props, model, (value) => {
-    emits('change', value)
-    return value
-  })
+  const selected = useValue([], props, model, (v) => emits('change', v))
 
   const filteredItems = computed(() => {
     const query = search.value.toLowerCase()
     return query ? filterByLabel(values.value, query) : values.value
   })
 
-  const firstSelected = computed(() => {
-    if (props.multiple || selected.value.length === 0) return
-    return values.value.find((item) => item.value === selected.value[0])
+  function getValue(key: string | number) {
+    return values.value.find((item) => item.value === key)
+  }
+
+  const active = computed(() => {
+    const values = selected.value
+
+    return {
+      first: getValue(values[0] ?? ''),
+      values: values.map((item) => getValue(item)!).filter(Boolean)
+    }
   })
 
   defineOptions({ name: 'MdSelect' })
@@ -64,234 +74,145 @@
   }
 
   function closeIfClickOutside(event: MouseEvent) {
-    if (show.value && !select.value?.contains(event.target as Node)) {
+    if (show.value && !root.value?.contains(event.target as Node)) {
       show.value = false
     }
   }
 
+  const isEmpty = computed(() => {
+    if (props.multiple) return active.value.values.length === 0
+    return !active.value.first && !show.value
+  })
+
+  const multiSearch = computed({
+    get: (): string => {
+      const length = active.value.values.length
+
+      return length && !show.value
+        ? length + ' items selected'
+        : search.value
+    },
+    set: (value) => (search.value = value)
+  })
+
   onMounted(() => addEventListener('click', closeIfClickOutside))
   onUnmounted(() => removeEventListener('click', closeIfClickOutside))
 </script>
 
 <template>
   <div
-    ref="select"
-    class="md-select"
+    ref="root"
+    class="md-input"
+    type="select"
+    :variant="variant ?? 'filled'"
+    :empty="isEmpty || undefined"
     :open="show || undefined"
-    :multiple="multiple || undefined"
   >
-    <div
-      tabindex="0"
-      class="md-select-wrapper"
-      @click="show = !show"
-      @pointerdown="rippleEffect"
-      @keypress="keyClick"
-    >
-      <div class="md-select-single" v-if="!multiple">
-        <div class="md-select-option" v-if="firstSelected">
-          <slot v-bind="firstSelected">
-            <OptionItem v-bind="firstSelected" />
-          </slot>
-        </div>
-        <div class="md-select-placeholder" v-else>{{ placeholder }}</div>
-      </div>
-
-      <div class="md-select-multi" v-if="multiple">
-        <template v-if="selected.length > 0">
-          <div
-            :key="item"
-            v-for="item in selected"
-            class="md-select-multi-chip"
-          >
-            <span> {{ values.find((i) => i.value === item)?.label }} </span>
-            <Icon icon="mdi:close" @click="handleClick(item)" />
-          </div>
-        </template>
+    <div class="md-input-selected" v-if="multiple">
+      <Chip
+        variant="tonal"
+        :key="item.value"
+        :label="item.label"
+        right-icon="lsicon:close-small-filled"
+        v-for="item in active.values"
+        @click="handleClick(item.value)"
+      />
+    </div>
+    <div class="md-input-wrapper" @click="show = !show">
+      <HybridIcon class="md-input-icon left" :icon />
+      <span class="md-input-placeholder">{{ placeholder }}</span>
+      <span class="md-input-prefix" v-if="prefix">{{ prefix }}</span>
+      <HybridIcon
+        :rotate="show || undefined"
+        class="md-input-icon right"
+        icon="mdi:chevron-down"
+      />
 
+      <template v-if="!multiple">
         <input
+          v-if="!active.first"
+          class="md-input-field"
           v-model="search"
-          type="text"
-          class="search"
-          placeholder="Search..."
         />
-      </div>
-      <div class="md-select-icon">
-        <Icon icon="mdi:chevron-down" :width="24" />
-      </div>
-    </div>
-
-    <div class="md-select-dropdown" @click="show = false">
-      <div
-        class="md-select-option empty"
-        v-if="!required && !multiple"
-        :tabindex="show ? 0 : -1"
-        @click="handleClick()"
-        @pointerdown="rippleEffect"
-        :class="{ active: selected.length === 0 }"
-      />
-      <div
-        class="md-select-option"
-        v-for="item in filteredItems"
-        :tabindex="show ? 0 : -1"
-        :key="item.value"
-        @keypress="keyClick"
-        @click="handleClick(item.value)"
-        @pointerdown="rippleEffect"
-        :class="{ active: selected.includes(item.value) }"
-      >
-        <slot v-bind="item" :active="selected.includes(item.value)">
+        <div class="md-input-field md-input-selected-item" v-else>
+          <slot v-bind="active.first">
+            <OptionItem v-bind="active.first" />
+          </slot>
+        </div>
+      </template>
+
+      <template v-else>
+        <input class="md-input-field" v-model="multiSearch" />
+      </template>
+
+      <div class="md-input-select-dropdown">
+        <div
+          v-if="!multiple && !required"
+          class="md-input-select-item"
+          @click="handleClick()"
+          @pointerdown="rippleEffect"
+        />
+        <div
+          class="md-input-select-item"
+          v-for="item in filteredItems"
+          @click="handleClick(item.value)"
+          @pointerdown="rippleEffect"
+          :key="item.value"
+        >
           <OptionItem v-bind="item" />
-        </slot>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss">
-  .md-select {
-    position: relative;
-
-    --size: var(--component-lg);
-
-    &.span {
-      width: 100%;
-    }
-
-    > :has(.md-select-placeholder) {
-      grid-area: placeholder;
-    }
-
-    &-wrapper {
-      display: grid;
-      grid-template-columns: 1fr 48px;
-      grid-template-areas: 'placeholder icon';
-      align-items: center;
-      min-height: var(--size);
-      position: relative;
+  .md-input {
+    &-select-item {
       overflow: hidden;
-      border-radius: var(--xxs);
-      border: 1px solid var(--outline);
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: var(--component-md);
+      padding-inline: var(--md);
+    }
 
-      &:empty::after {
-        content: 'No item selected';
-        display: block;
-        text-align: center;
-        font-size: var(--font-lg);
-      }
+    &-icon[rotate] {
+      rotate: 180deg;
     }
 
-    &-multi {
+    &-selected {
+      margin-bottom: var(--xs);
+      flex-wrap: wrap;
       display: flex;
       gap: var(--xs);
-      padding: var(--xs);
-      flex-wrap: wrap;
-      align-items: center;
 
-      input {
-        height: 100%;
-        background: none;
-        border: none;
-        outline: none;
-        font: inherit;
+      &-item {
+        padding-top: var(--md);
       }
 
-      &-chip {
-        background: var(--primary);
-        color: var(--on-primary);
-        padding: var(--xxs) var(--xs);
-        border-radius: var(--xxs);
-        font-size: var(--font-sm);
-        display: flex;
-        align-items: center;
+      &:empty {
+        display: none;
       }
     }
 
-    &-icon {
-      line-height: 0;
-      grid-area: icon;
-      place-self: center;
-      transition: transform 0.25s var(--timing-standard);
-    }
-
-    &-placeholder {
-      font-size: var(--font-lg);
-      padding-inline: var(--lg);
-      color: var(--mono-60);
-    }
-
-    &-dropdown {
+    &-select-dropdown {
+      z-index: 1;
       position: absolute;
-      top: var(--size);
-      left: 0;
+      align-self: last baseline;
+      top: 100%;
       width: 100%;
-      background: var(--surface-container);
-      border: 1px solid var(--outline);
+      overflow: auto;
+      max-height: 300%;
+      background: var(--surface-container-low);
+      transition: scale 0.2s var(--timing-standard);
       border-radius: 0 0 var(--xxs) var(--xxs);
-      border-top: none;
-      pointer-events: none;
-      min-height: var(--size);
-      max-height: calc(var(--size) * 3.1);
+      box-shadow: var(--shadow-1);
       transform-origin: top;
-      transform: scaleY(0.9);
-      overflow: auto;
-      opacity: 0;
-      z-index: 5;
-      transition:
-        opacity 0.25s var(--timing-standard),
-        transform 0.25s var(--timing-standard);
     }
 
-    &-option {
-      display: grid;
-      align-content: center;
-      position: relative;
-      overflow: hidden;
-      height: var(--size);
-      color: var(--on-surface-variant);
-      cursor: pointer;
-
-      &::before {
-        content: '';
-        position: absolute;
-        inset: var(--xxs);
-        opacity: 0;
-        z-index: -1;
-        border-radius: var(--xxs);
-        background: var(--primary);
-        transition: opacity 0.25s var(--timing-standard);
-      }
-
-      &.active {
-        color: var(--on-primary);
-
-        &::before {
-          opacity: 1;
-        }
-      }
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    &[open],
-    &:has(input:focus) {
-      .md-select-wrapper {
-        box-shadow: 0 0 0 2px inset var(--primary);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-
-        > .md-select-icon {
-          transform: rotate(180deg);
-          transform-origin: center;
-        }
-      }
-
-      .md-select-dropdown {
-        opacity: 1;
-        pointer-events: initial;
-        transform: scaleY(1);
-      }
+    &:not([open]) &-select-dropdown {
+      scale: 1 0;
     }
   }
 </style>
diff --git a/packages/lib/src/components/Snackbar/snackbar.vue b/packages/lib/src/components/Snackbar/snackbar.vue
index 17de925..bd65a29 100644
--- a/packages/lib/src/components/Snackbar/snackbar.vue
+++ b/packages/lib/src/components/Snackbar/snackbar.vue
@@ -86,7 +86,7 @@
       position: fixed;
       z-index: 20;
       right: var(--md);
-      bottom: var(--sm);
+      bottom: calc(var(--bottom-offset, 0) + var(--sm));
       width: calc(100% - (var(--md) * 2));
     }
 
diff --git a/packages/lib/src/ref/tools.ts b/packages/lib/src/ref/tools.ts
index 53d3940..5d01dda 100644
--- a/packages/lib/src/ref/tools.ts
+++ b/packages/lib/src/ref/tools.ts
@@ -1,34 +1,32 @@
 import type { MaybeFunction } from '@/utils'
-import { replaceDeep } from '@/utils/object/merge'
-import type { ComputedRef, Ref, ShallowReactive, UnwrapRef } from 'vue'
+import type { ComputedRef, Ref, ShallowReactive } from 'vue'
 
+import { replaceDeep } from '@/utils/object/merge'
 import { computed, isReadonly, isRef, shallowReactive, watch } from 'vue'
 
 export const ProxyValue = Symbol('value')
-
-export type WithProxyRef<T extends Ref> = ShallowReactive<UnwrapRef<T>> & {
-  [ProxyValue]: UnwrapRef<T>
+export type WithProxyRef<T extends object> = ShallowReactive<T> & {
+  [ProxyValue]: T
 }
-export function toProxy<T extends Ref<object>>(
-  refValue: T,
+export function toProxy<T extends object>(
+  ref: Ref<T>,
   readonly = false
 ): WithProxyRef<T> {
-  const reactiveTarget = shallowReactive<any>(refValue.value)
-  watch(refValue, (v) => replaceDeep(reactiveTarget, v), {
-    immediate: true
+  const state = shallowReactive<any>(ref.value)
+  watch(ref, (v) => replaceDeep(state, v, true), {
+    immediate: true,
+    deep: true
   })
 
-  return new Proxy(reactiveTarget, {
+  return new Proxy(state, {
     get: (t, k, r) => (k === ProxyValue ? t : Reflect.get(t, k, r)),
-    set(_, key, value, receiver) {
-      if (readonly || isReadonly(refValue)) return false
-
-      if (key === ProxyValue) {
-        refValue.value = value
-        return true
-      }
+    set(_, key, value) {
+      if (readonly || isReadonly(ref)) return false
 
-      return Reflect.set(refValue.value, key, value, receiver)
+      key === ProxyValue
+        ? (ref.value = value)
+        : ((ref.value as any)[key] = value)
+      return true
     }
   }) as WithProxyRef<T>
 }
diff --git a/packages/lib/src/ref/use-idb-storage.ts b/packages/lib/src/ref/use-idb-storage.ts
index b6e19f2..91897b0 100644
--- a/packages/lib/src/ref/use-idb-storage.ts
+++ b/packages/lib/src/ref/use-idb-storage.ts
@@ -1,40 +1,59 @@
-import type { Ref } from 'vue'
+import type { Ref, UnwrapRef } from 'vue'
 
 import { IDBStorage as IDB } from '@/utils/idb'
 
-import { replaceDeep } from '@/utils/object/merge'
-import { onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
-export function useIDBStorage<T>(key: string): Ref<T | undefined>
-export function useIDBStorage<T>(key: string, defaultValue: T): Ref<T>
+type WithEvent<T> = Ref<T> & {
+  ready: Ref<boolean>
+  onload?: (v: UnwrapRef<T>) => void
+}
+
+export function useIDBStorage<T>(key: string): WithEvent<T | undefined>
+export function useIDBStorage<T>(key: string, def: T): WithEvent<T>
 export function useIDBStorage<T>(key: string, defaultValue?: T) {
   let ignore = true
+  const ready = ref(false)
   const index = ref<T | undefined>(defaultValue)
+  const state = Object.assign(index, { ready }) as WithEvent<Ref<any>>
 
   async function itemUpdate(data: { key: string }) {
     if (data.key === key) {
+      const data = (await IDB.hasItem(key))
+        ? await IDB.getItem(key)
+        : defaultValue
+
       ignore = true
-      index.value = replaceDeep(index.value, await IDB.getItem(key))
+      index.value = data
     }
   }
 
+  async function storeCleared() {
+    index.value = defaultValue
+  }
+
+  function watcher(data: any) {
+    if (ignore) ignore = false
+    else IDB.setItem(key, toRaw(data))
+  }
   onMounted(async () => {
     if (await IDB.hasItem(key)) {
       const data = await IDB.getItem(key)
-      index.value = replaceDeep(index.value, data)
+      index.value = data
     }
 
+    ready.value = true
+    state.onload?.(index.value)
     IDB.addEventListener('storage', itemUpdate)
+    IDB.addEventListener('store-cleared', storeCleared)
   })
 
-  function watcher(data: any) {
-    if (ignore) return (ignore = false)
-
-    IDB.setItem(key, toRaw(data))
-  }
+  onUnmounted(() => {
+    IDB.removeEventListener('storage', itemUpdate)
+    IDB.removeEventListener('store-cleared', storeCleared)
+  })
 
-  onBeforeUnmount(() => IDB.removeEventListener('storage', itemUpdate))
   watch(index, watcher, { deep: true })
 
-  return index
+  return Object.assign(index, { ready })
 }
diff --git a/packages/lib/src/ref/use-local-storage.ts b/packages/lib/src/ref/use-local-storage.ts
index 7103a35..6aadfab 100644
--- a/packages/lib/src/ref/use-local-storage.ts
+++ b/packages/lib/src/ref/use-local-storage.ts
@@ -1,6 +1,5 @@
 import type { Ref } from 'vue'
 
-import { replaceDeep } from '@/utils/object/merge'
 import { parser, stringify } from '@/utils/object/transform'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -18,7 +17,7 @@ export function useLocalStorage<T>(key: string, defaultValue?: T) {
   function handleDataChange(event: StorageEvent) {
     if (event.key === key) {
       ignore = true
-      value.value = replaceDeep(value.value, getData())
+      value.value = getData()
     }
   }
 
@@ -29,7 +28,7 @@ export function useLocalStorage<T>(key: string, defaultValue?: T) {
   }
 
   onMounted(() => {
-    value.value = replaceDeep(value.value, getData())
+    value.value = getData()
     addEventListener('storage', handleDataChange)
   })
 
diff --git a/packages/lib/src/utils/object/index.ts b/packages/lib/src/utils/object/index.ts
index cd3a564..3783470 100644
--- a/packages/lib/src/utils/object/index.ts
+++ b/packages/lib/src/utils/object/index.ts
@@ -1,4 +1,5 @@
 export * from './data'
 export * from './is'
+export * from './merge'
 export * from './modify'
 export * from './transform'
diff --git a/packages/lib/src/utils/object/merge.ts b/packages/lib/src/utils/object/merge.ts
index 04bb85d..cecda3b 100644
--- a/packages/lib/src/utils/object/merge.ts
+++ b/packages/lib/src/utils/object/merge.ts
@@ -30,12 +30,13 @@ export function shallowMerge<T extends object, O>(
 }
 
 /** Modifies original object, beware of side effects */
-export function replaceDeep(ref: any, value: any) {
+export function replaceDeep(ref: any, value: any, shallow = false) {
   if (!isPureObject(value)) return value
 
   ref = isPureObject(ref) ? ref : reactive({})
 
-  for (const key in value) ref[key] = replaceDeep(ref[key], value[key])
+  for (const key in value)
+    ref[key] = shallow ? value[key] : replaceDeep(ref[key], value[key])
   for (const key in ref) key in value || delete ref[key]
 
   return ref