diff --git a/apps/docs/src/components/app/AppBanner.vue b/apps/docs/src/components/app/AppBanner.vue
index 652608d5..8d72d292 100644
--- a/apps/docs/src/components/app/AppBanner.vue
+++ b/apps/docs/src/components/app/AppBanner.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Types
   import type { AtomProps } from '@vuetify/v0'
@@ -8,18 +11,31 @@
   const { as = 'header' } = defineProps<AtomProps>()
 
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('banner')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'banner',
+    position: 'top',
+    element,
+    value: 24,
+  })
 </script>
 
 <template>
   <Atom
+    ref="banner"
     :as
-    class="app-banner flex items-center justify-center h-[24px] fixed left-0 top-0 right-0 px-3 text-xs gap-2"
+    class="app-banner flex items-center justify-center fixed px-3 text-xs gap-2"
+    :style="{
+      top: item.rect.y.value + 'px',
+      left: item.rect.x.value + 'px',
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <AppIcon icon="alert" :size="14" />
 
-    <div>
-      You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
-    </div>
+    You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
   </Atom>
 </template>
 
diff --git a/apps/docs/src/components/app/AppBar.vue b/apps/docs/src/components/app/AppBar.vue
index fec12c8b..0e694272 100644
--- a/apps/docs/src/components/app/AppBar.vue
+++ b/apps/docs/src/components/app/AppBar.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Composables
   import { useAppStore } from '@/stores/app'
@@ -18,13 +21,26 @@
     auth = useAuthStore()
   }
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('bar')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'bar',
+    position: 'top',
+    element,
+  })
+
 </script>
 
 <template>
   <Atom
+    ref="bar"
     :as
-    class="app-header flex items-center justify-between h-[48px] fixed left-0 top-[24px] right-0 px-3 transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile && 'left-0'"
+    class="app-header flex items-center justify-between fixed px-3 h-[48px]"
+    :style="{
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <div class="flex items-center gap-1">
       <img
diff --git a/apps/docs/src/components/app/AppFooter.vue b/apps/docs/src/components/app/AppFooter.vue
index 52265780..55813e57 100644
--- a/apps/docs/src/components/app/AppFooter.vue
+++ b/apps/docs/src/components/app/AppFooter.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Types
   import type { AtomProps } from '@vuetify/v0'
@@ -8,13 +11,27 @@
   const { as = 'footer' } = defineProps<AtomProps>()
 
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('footer')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'footer',
+    position: 'bottom',
+    element,
+    value: 24,
+  })
 </script>
 
 <template>
   <Atom
+    ref="footer"
     :as
-    class="app-footer flex items-center justify-between h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs bg-surface border-t"
-    :class="breakpoints.isMobile && 'left-0'"
+    :class="`app-footer flex items-center justify-end fixed px-3 text-xs ${breakpoints.isMobile && 'left-0'}`"
+    :style="{
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <DocsLastCommit />
 
diff --git a/apps/docs/src/components/app/AppMain.vue b/apps/docs/src/components/app/AppMain.vue
index f5293912..9dd23463 100644
--- a/apps/docs/src/components/app/AppMain.vue
+++ b/apps/docs/src/components/app/AppMain.vue
@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-  import { useBreakpoints } from '@vuetify/v0'
+  import { useLayout } from '@vuetify/v0'
 
-  const breakpoints = useBreakpoints()
+  const layout = useLayout()
 </script>
 
 <template>
   <div
-    class="pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+    class="pa-4 fixed inset-0 overflow-y-auto"
+    :style="{
+      top: layout.main.y.value + 'px',
+      width: layout.main.width.value + 'px',
+      left: layout.main.x.value + 'px',
+    }"
   >
     <div class="max-w-[688px] mx-auto pb-4">
       <router-view />
diff --git a/apps/docs/src/components/app/AppNav.vue b/apps/docs/src/components/app/AppNav.vue
index c712ff3a..e147f0cd 100644
--- a/apps/docs/src/components/app/AppNav.vue
+++ b/apps/docs/src/components/app/AppNav.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
   import { useAppStore } from '@/stores/app'
   import { useRoute } from 'vue-router'
-  import { watch } from 'vue'
+  import { watch, watchEffect, useTemplateRef } from 'vue'
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'nav' } = defineProps<AtomProps>()
@@ -16,16 +16,39 @@
       app.drawer = false
     }
   })
+
+  const element = useTemplateRef('nav')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'nav',
+    position: 'left',
+    element,
+    value: 220,
+  })
+
+  watchEffect(() => {
+    if (breakpoints.isMobile) {
+      item.unselect()
+    } else {
+      item.select()
+    }
+  })
 </script>
 
 <template>
   <Atom
+    ref="nav"
     :as
-    class="bg-4 app-nav flex flex-col fixed top-[72px] w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out"
+    class="bg-4 z-1000 app-nav flex flex-col py-4 fixed overflow-y-auto transition-transform duration-200 ease-in-out"
     :class="[
       breakpoints.isMobile && !app.drawer ? 'translate-x-[-100%]' : 'translate-x-0',
-      breakpoints.isMobile ? 'top-[72px] bottom-[24px]' : 'top-[24px] bottom-0'
     ]"
+    :style="{
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+    }"
   >
     <ul class="flex gap-2 flex-col">
       <template v-for="(nav, i) in app.nav" :key="i">
diff --git a/apps/docs/src/layouts/default.vue b/apps/docs/src/layouts/default.vue
index 3169dde6..1c986d5a 100644
--- a/apps/docs/src/layouts/default.vue
+++ b/apps/docs/src/layouts/default.vue
@@ -4,8 +4,8 @@
 
 <template>
   <AppBanner />
-  <AppNav />
   <AppBar />
+  <AppNav />
   <AppMain />
   <AppFooter />
 </template>
diff --git a/apps/docs/src/plugins/zero.ts b/apps/docs/src/plugins/zero.ts
index fe4f2f9b..43f55152 100644
--- a/apps/docs/src/plugins/zero.ts
+++ b/apps/docs/src/plugins/zero.ts
@@ -1,5 +1,5 @@
 // Vuetify0
-import { createBreakpointsPlugin, createHydrationPlugin, createLoggerPlugin, createThemePlugin } from '@vuetify/v0'
+import { createBreakpointsPlugin, createHydrationPlugin, createLoggerPlugin, createThemePlugin, createLayoutPlugin } from '@vuetify/v0'
 
 // Plugins
 import { createIconPlugin } from './icons'
@@ -12,6 +12,7 @@ export default function zero (app: App) {
   app.use(createLoggerPlugin())
   app.use(createHydrationPlugin())
   app.use(createBreakpointsPlugin())
+  app.use(createLayoutPlugin())
   app.use(
     createThemePlugin({
       default: 'light',
diff --git a/packages/0/src/composables/useLayout/index.bench.ts b/packages/0/src/composables/useLayout/index.bench.ts
new file mode 100644
index 00000000..48cbd1be
--- /dev/null
+++ b/packages/0/src/composables/useLayout/index.bench.ts
@@ -0,0 +1,31 @@
+import { createLayout } from '#v0'
+import { bench, describe, beforeAll } from 'vitest'
+
+describe('useLayout benchmarks', () => {
+  let layout: any
+
+  beforeAll(() => {
+    for (let i = 0; i < 500; i++) {
+      const order = i % 25 === 0 ? i * -1 : 0
+      function getPosition (i: number): 'top' | 'left' | 'bottom' | 'right' {
+        if (i % 25 === 0) return 'top'
+        if (i % 30 === 0) return 'left'
+        if (i % 20 === 0) return 'bottom'
+        return 'right'
+      }
+
+      const position = getPosition(i)
+
+      layout.register({ id: `Component${i}`, position, value: i, order })
+    }
+  })
+
+  bench('register and get items', () => {
+    const layout = createLayout()[2]
+    // Register 500 components
+    for (let i = 0; i < 500; i++) {
+      const gotItem = layout.get(`component${i}`)
+      void gotItem?.cumulative
+    }
+  })
+})
diff --git a/packages/0/src/composables/useLayout/index.test.ts b/packages/0/src/composables/useLayout/index.test.ts
index 13f000a7..66547f69 100644
--- a/packages/0/src/composables/useLayout/index.test.ts
+++ b/packages/0/src/composables/useLayout/index.test.ts
@@ -1,7 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { useLayout } from './index.ts'
+import { createLayout } from './index'
 import { mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
+import { defineComponent, useTemplateRef } from 'vue'
+import { Atom } from '../../components/Atom'
+import type { ShallowRef } from 'vue'
 
 describe('useLayout inside component', () => {
   let originalWindow: any
@@ -25,58 +27,122 @@ describe('useLayout inside component', () => {
   it('registers height and width in browser', () => {
     const testComponent = defineComponent({
       setup () {
-        const context = useLayout()
-        return { context }
+        const layout = createLayout()[2]
+        return { layout }
       },
       template: '<div></div>',
     })
 
     const mountedComponent = mount(testComponent)
-    mountedComponent.vm.context.register({ id: 'Component1', position: 'top', value: 32 })
-    mountedComponent.vm.context.register({ id: 'Component2', position: 'left', value: 128 })
+    mountedComponent.vm.layout.register({ id: 'Component1', position: 'top', value: 32 })
+    mountedComponent.vm.layout.register({ id: 'Component2', position: 'left', value: 128 })
 
-    expect(mountedComponent.vm.context.width.value).toEqual(1024)
-    expect(mountedComponent.vm.context.height.value).toEqual(768)
+    expect(mountedComponent.vm.layout.width.value).toEqual(1024)
+    expect(mountedComponent.vm.layout.height.value).toEqual(768)
   })
 
   it('correctly calculates main', () => {
     const testComponent = defineComponent({
       setup () {
-        const context = useLayout()
-        return { context }
+        const layout = createLayout()[2]
+        return { layout }
       },
       template: '<div></div>',
     })
 
     const mountedComponent = mount(testComponent)
 
-    mountedComponent.vm.context.register({ id: 'Component1', position: 'top', value: 32 })
-    mountedComponent.vm.context.register({ id: 'Component2', position: 'left', value: 128 })
+    mountedComponent.vm.layout.register({ id: 'Component1', position: 'top', value: 32 })
+    mountedComponent.vm.layout.register({ id: 'Component2', position: 'left', value: 128 })
 
-    expect(mountedComponent.vm.context.main.x.value).toEqual(128)
-    expect(mountedComponent.vm.context.main.y.value).toEqual(32)
-    expect(mountedComponent.vm.context.main.width.value).toEqual(896)
-    expect(mountedComponent.vm.context.main.height.value).toEqual(736)
+    expect(mountedComponent.vm.layout.main.x.value).toEqual(128)
+    expect(mountedComponent.vm.layout.main.y.value).toEqual(32)
+    expect(mountedComponent.vm.layout.main.width.value).toEqual(896)
+    expect(mountedComponent.vm.layout.main.height.value).toEqual(736)
+  })
+
+  it('correctly calculates size from component', async () => {
+    const testComponent = defineComponent({
+      setup () {
+        const layout = createLayout()[2]
+        const element = useTemplateRef<HTMLElement>('element')
+
+        const item = layout.register({
+          id: 'testdiv',
+          position: 'top',
+          element,
+        })
+
+        return { item, layout }
+      },
+      template: '<div id="testdiv" ref="element" style="height: 50px"></div> <div style="height: 60px"></div>',
+    })
+
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get () {
+        if (this.id === 'testdiv') {
+          return 50
+        }
+      },
+    })
+    const mountedComponent = mount(testComponent)
+    expect(mountedComponent.vm.item.size.value).toEqual(50)
+    expect(mountedComponent.vm.layout.main.y.value).toEqual(50)
+  })
+
+  it('correctly calculates size from child Atom component', async () => {
+    const testComponent = defineComponent({
+      setup () {
+        const layout = createLayout()[2]
+        const element = useTemplateRef('element') as ShallowRef<HTMLElement | null>
+
+        const item = layout.register({
+          id: 'testdiv',
+          position: 'top',
+          element,
+        })
+
+        return { item, layout }
+      },
+      template: '<Atom ref="element" style="height:50px" id="atom"><div></div> </Atom>',
+    })
+
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get () {
+        if (this.id === 'atom') {
+          return 50
+        }
+      },
+    })
+    const mountedComponent = mount(testComponent, {
+      global: {
+        components: { Atom },
+      },
+    })
+    expect(mountedComponent.vm.item.size.value).toEqual(50)
+    expect(mountedComponent.vm.layout.main.y.value).toEqual(50)
   })
 })
 
 describe('useLayout outside component', () => {
   it('registers components', () => {
-    const context = useLayout()
-    context.register({ id: 'Component1', position: 'top', value: 32 })
-    context.register({ id: 'Component2', position: 'bottom', value: 64 })
-    expect(context.collection.has('Component1')).toEqual(true)
-    expect(context.collection.has('Component2')).toEqual(true)
+    const layout = createLayout()[2]
+    layout.register({ id: 'Component1', position: 'top', value: 32 })
+    layout.register({ id: 'Component2', position: 'bottom', value: 64 })
+    expect(layout.collection.has('Component1')).toEqual(true)
+    expect(layout.collection.has('Component2')).toEqual(true)
   })
 
   it('calculates bound', () => {
-    const context = useLayout()
-    context.register({ id: 'Component1', position: 'top', value: 32 })
-    context.register({ id: 'Component2', position: 'bottom', value: 128 })
-    context.register({ id: 'Component3', position: 'left', value: 64 })
-
-    expect(context.bounds.top.value).toEqual(32)
-    expect(context.bounds.bottom.value).toEqual(128)
-    expect(context.bounds.left.value).toEqual(64)
+    const layout = createLayout()[2]
+    layout.register({ id: 'Component1', position: 'top', value: 32 })
+    layout.register({ id: 'Component2', position: 'bottom', value: 128 })
+    layout.register({ id: 'Component3', position: 'left', value: 64 })
+
+    expect(layout.bounds.top.value).toEqual(32)
+    expect(layout.bounds.bottom.value).toEqual(128)
+    expect(layout.bounds.left.value).toEqual(64)
   })
 })
diff --git a/packages/0/src/composables/useLayout/index.ts b/packages/0/src/composables/useLayout/index.ts
index 2a4d66ee..39325906 100644
--- a/packages/0/src/composables/useLayout/index.ts
+++ b/packages/0/src/composables/useLayout/index.ts
@@ -1,16 +1,29 @@
+// Factories
+import { createPlugin } from '#v0/factories/createPlugin'
+import { createContext, useContext } from '#v0/factories/createContext'
+import { createTrinity } from '#v0/factories/createTrinity'
+
 // Composables
 import { useGroup } from '#v0/composables/useGroup'
 
 // Utilities
-import { computed, shallowReactive, shallowRef, onUnmounted, onMounted, getCurrentInstance } from 'vue'
+import {
+  computed,
+  shallowRef,
+  onUnmounted,
+  onMounted,
+  getCurrentInstance,
+  unref,
+} from 'vue'
 
 // Globals
-import { IN_BROWSER } from '#v0/constants/globals.ts'
+import { IN_BROWSER } from '#v0/constants/globals'
 
 // Types
-import type { ComputedRef, ShallowReactive, ShallowRef } from 'vue'
+import type { ComputedRef, ShallowRef, App } from 'vue'
 import type { GroupContext, GroupOptions, GroupTicket } from '#v0/composables/useGroup'
-import type { ID } from '#v0/types'
+import type { ContextTrinity } from '#v0/factories'
+import type { DOMElement } from '#v0/types'
 
 export type LayoutLocation = 'top' | 'bottom' | 'left' | 'right'
 
@@ -18,6 +31,26 @@ export interface LayoutTicket extends GroupTicket {
   order: number
   position: LayoutLocation
   value: number
+  size: ComputedRef<number>
+  element?: ShallowRef<DOMElement | null>
+  cumulative: ComputedRef<{
+    top: number
+    bottom: number
+    left: number
+    right: number
+    height: number
+    width: number
+  }>
+  x: ComputedRef<number>
+  y: ComputedRef<number>
+  width: ComputedRef<number>
+  height: ComputedRef<number>
+  rect: {
+    x: ComputedRef<number>
+    y: ComputedRef<number>
+    width: ComputedRef<number>
+    height: ComputedRef<number>
+  }
 }
 
 export interface LayoutContext<Z extends LayoutTicket> extends GroupContext<Z> {
@@ -33,28 +66,59 @@ export interface LayoutContext<Z extends LayoutTicket> extends GroupContext<Z> {
     width: ComputedRef<number>
     height: ComputedRef<number>
   }
-  sizes: ShallowReactive<Map<ID, number>>
   height: ShallowRef<number>
   width: ShallowRef<number>
+  left: ShallowRef<number>
+  right: ShallowRef<number>
+  top: ShallowRef<number>
+  bottom: ShallowRef<number>
+  resize: () => void
 }
 
-export interface LayoutOptions extends GroupOptions {}
+export interface LayoutOptions extends GroupOptions {
+  el?: ShallowRef<HTMLElement | null>
+}
 
-export function useLayout<
+function isVertical (position: LayoutLocation) {
+  return ['top', 'bottom'].includes(position)
+}
+
+/**
+ * Creates a layout registry for managing layout selections
+ *
+ * @param _options
+ * @returns
+ */
+export function createLayout<
   Z extends LayoutTicket = LayoutTicket,
   E extends LayoutContext<Z> = LayoutContext<Z>,
-> (_options: LayoutOptions = {}): E {
+> (
+  namespace = 'v0:layout',
+  _options: LayoutOptions = {},
+): ContextTrinity<E> {
   const {
     enroll = true,
     events = true,
+    el = null,
     ...options
   } = _options
 
+  const [useLayoutContext, _provideLayoutContext] = createContext<E>(namespace)
   const registry = useGroup<Z, E>({ enroll, events, ...options })
 
-  const sizes = shallowReactive(new Map<ID, number>())
   const height = shallowRef(0)
   const width = shallowRef(0)
+  const left = shallowRef(0)
+  const right = shallowRef(0)
+  const top = shallowRef(0)
+  const bottom = shallowRef(0)
+
+  const main = {
+    x: computed(() => bounds.left.value + left.value),
+    y: computed(() => bounds.top.value + top.value),
+    width: computed(() => right.value - left.value - bounds.left.value - bounds.right.value),
+    height: computed(() => bottom.value - top.value - bounds.top.value - bounds.bottom.value),
+  }
 
   const bounds = {
     top: computed(() => sum('top')),
@@ -63,64 +127,195 @@ export function useLayout<
     right: computed(() => sum('right')),
   }
 
-  const main = {
-    x: computed(() => bounds.left.value),
-    y: computed(() => bounds.top.value),
-    width: computed(() => width.value - bounds.left.value - bounds.right.value),
-    height: computed(() => height.value - bounds.top.value - bounds.bottom.value),
-  }
-
-  function sum (position: LayoutLocation): number {
+  function sum (position: LayoutLocation) {
     let total = 0
     for (const item of registry.values()) {
       if (item.position === position && item.isSelected.value) {
-        total += sizes.get(item.id) ?? item.value ?? 0
+        const value = item.size ?? item.value
+        total += unref(value) ?? 0
       }
     }
     return total
   }
 
-  function register (registration: Partial<Z>): Z {
-    const item: Partial<Z> = {
-      position: registration.position,
-      order: registration.order ?? 0,
-      ...registration,
-    }
+  const opposites: Record<LayoutLocation, LayoutLocation> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+  }
+
+  function register (registrant: Partial<Z>): Z {
+    const valueProp = isVertical(registrant.position!) ? 'offsetHeight' : 'offsetWidth'
+    const size = computed(() => {
+      const el = registrant.element?.value
+
+      if (el && typeof el === 'object' && !(el instanceof HTMLElement)) {
+        for (const key in el) {
+          const candidate = unref((el as any)[key])
+          if (candidate instanceof HTMLElement) {
+            return candidate[valueProp as keyof HTMLElement] ?? registrant.value ?? 0
+          }
+        }
+      }
+
+      return (el as HTMLElement | null)?.[valueProp as keyof HTMLElement] ?? registrant.value
+    })
+
+    const ticket = registry.register({
+      ...registrant,
+      position: registrant.position!,
+      order: registrant.order ?? 0,
+      size,
+    }) as Z
+
+    const cumulative = computed(() => {
+      const offsets = { left: 0, right: 0, top: 0, bottom: 0 }
+      for (const current of registry.values().sort((a, b) => a.order - b.order)) {
+        if (!current.isSelected.value) continue
+        if (current.index >= ticket.index && (ticket.position !== opposites[current.position]) && current.order >= ticket.order) break
+        offsets[current.position] += unref(current.size) ?? unref(current.value)
+      }
 
-    const ticket = registry.register(item)
+      return {
+        ...offsets,
+        height: offsets.top + offsets.bottom,
+        width: offsets.left + offsets.right,
+      }
+    })
+    const height = computed(() => isVertical(ticket.position) ? unref(ticket.size ?? ticket.value) : bottom.value - top.value - cumulative.value.height)
+    const width = computed(() => isVertical(ticket.position) ? right.value - left.value - cumulative.value.width : unref(ticket.size ?? ticket.value))
+    const x = computed(() => (
+      ticket.position === 'left'
+        ? left.value + cumulative.value.left
+        : (
+            ticket.position === 'right'
+              ? right.value - width.value - cumulative.value.right
+              : left.value + cumulative.value.left
+          )
+    ))
+    const y = computed(() => (
+      ticket.position === 'top'
+        ? top.value + cumulative.value.top
+        : (
+            ticket.position === 'bottom'
+              ? bottom.value - height.value - cumulative.value.bottom
+              : top.value + cumulative.value.top
+          )
+    ))
 
-    sizes.set(ticket.id, ticket.value)
+    Object.assign(ticket, {
+      cumulative,
+      x,
+      y,
+      width,
+      height,
+      rect: { x, y, width, height },
+    })
 
     return ticket
   }
 
-  if (IN_BROWSER && getCurrentInstance()) {
-    function resize () {
-      height.value = window.innerHeight
+  function resize () {
+    if (el?.value) {
+      const rect = el.value.getBoundingClientRect()
+      left.value = rect.left
+      top.value = rect.top
+      right.value = rect.left + rect.width
+      bottom.value = rect.top + rect.height
+      width.value = rect.width
+      height.value = rect.height
+    } else {
       width.value = window.innerWidth
+      height.value = window.innerHeight
+      left.value = 0
+      top.value = 0
+      right.value = window.innerWidth
+      bottom.value = window.innerHeight
     }
+  }
 
+  let observer: ResizeObserver | undefined
+
+  if (IN_BROWSER && getCurrentInstance()) {
     onMounted(() => {
+      if (el?.value) {
+        observer = new ResizeObserver(resize)
+        observer.observe(el.value)
+      } else {
+        window.addEventListener('resize', resize)
+      }
       resize()
-      window.addEventListener('resize', resize)
     })
 
     onUnmounted(() => {
+      if (observer && el?.value) {
+        observer.unobserve(el.value)
+        observer.disconnect()
+      }
       window.removeEventListener('resize', resize)
     })
+  } else if (window.innerWidth) {
+    window.addEventListener('resize', resize)
   }
 
-  registry.on('unregister', (item: Z) => {
-    sizes.delete(item.id)
-  })
-
-  return {
+  const context = {
     ...registry,
     register,
+    resize,
     bounds,
     main,
-    sizes,
     height,
     width,
+    left,
+    right,
+    top,
+    bottom,
   } as E
+
+  function provideLayoutContext (_context: E = context, app?: App): E {
+    return _provideLayoutContext(_context, app)
+  }
+
+  return createTrinity<E>(useLayoutContext, provideLayoutContext, context)
+}
+
+/**
+ * Simple hook to access the layout context.
+ *
+ * @returns The layout context containing current layout state and utilities.
+ */
+export function useLayout (): LayoutContext<LayoutTicket> {
+  return useContext<LayoutContext<LayoutTicket>>('v0:layout')
+}
+
+/**
+ * Creates a Vue plugin for managing responsive layout with automatic updates.
+ * This plugin sets up layout tracking and updates the context when the window
+ * is resized, providing reactive layout state throughout the application.
+ *
+ * @param options Optional configuration for toggling layout items on automatically and
+ * allowing events to be called.
+ * @returns A Vue plugin object with install method.
+ */
+
+export function createLayoutPlugin<
+  Z extends LayoutTicket = LayoutTicket,
+  E extends LayoutContext<Z> = LayoutContext<Z>,
+> (options: LayoutOptions = {}) {
+  const [, provideLayoutContext, layoutContext] = createLayout<Z, E>('v0:layout', options)
+
+  return createPlugin({
+    namespace: 'v0:layout',
+    provide: (app: App) => {
+      provideLayoutContext(layoutContext, app)
+    },
+    setup: (app: App) => {
+      app.mixin({
+        mounted () {
+          layoutContext.resize()
+        },
+      })
+    },
+  })
 }
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 222d4725..a1e7f149 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="m-4">
+  <div>
     <Playground />
   </div>
 </template>
diff --git a/playground/src/composables.d.ts b/playground/src/composables.d.ts
index fe6e9361..69078680 100644
--- a/playground/src/composables.d.ts
+++ b/playground/src/composables.d.ts
@@ -29,6 +29,8 @@ declare global {
   const createElevation: typeof import('../../packages/paper/src/composables/useElevation/index')['createElevation']
   const createHydration: typeof import('../../packages/0/src/composables/useHydration/index')['createHydration']
   const createHydrationPlugin: typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationPlugin']
+  const createLayout: typeof import('../../packages/0/src/composables/useLayout/index')['createLayout']
+  const createLayoutPlugin: typeof import('../../packages/0/src/composables/useLayout/index')['createLayoutPlugin']
   const createLocale: typeof import('../../packages/0/src/composables/useLocale/index')['createLocale']
   const createLocalePlugin: typeof import('../../packages/0/src/composables/useLocale/index')['createLocalePlugin']
   const createLogger: typeof import('../../packages/0/src/composables/useLogger/index')['createLogger']
@@ -86,6 +88,7 @@ declare global {
   const provide: typeof import('vue')['provide']
   const provideBreakpointsContext: typeof import('../../packages/0/src/composables/useBreakpoints/index')['provideBreakpointsContext']
   const provideHydrationContext: typeof import('../../packages/0/src/composables/useHydration/index')['provideHydrationContext']
+  const provideLayout: typeof import('../../packages/0/src/composables/useLayout/index')['provideLayout']
   const provideStorageContext: typeof import('../../packages/0/src/composables/useStorage/index')['provideStorageContext']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -105,6 +108,7 @@ declare global {
   const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
+  const useAtomRef: typeof import('../../packages/0/src/composables/useAtomRef/index')['useAtomRef']
   const useAttrs: typeof import('vue')['useAttrs']
   const useBorder: typeof import('../../packages/paper/src/composables/useBorder/index')['useBorder']
   const useBreakpoints: typeof import('../../packages/0/src/composables/useBreakpoints/index')['useBreakpoints']
@@ -128,6 +132,7 @@ declare global {
   const useIntersectionObserver: typeof import('../../packages/0/src/composables/useIntersectionObserver/index')['useIntersectionObserver']
   const useKeydown: typeof import('../../packages/0/src/composables/useKeydown/index')['useKeydown']
   const useLayout: typeof import('../../packages/0/src/composables/useLayout/index')['useLayout']
+  const useLayoutContext: typeof import('../../packages/0/src/composables/useLayout/index')['useLayoutContext']
   const useLocale: typeof import('../../packages/0/src/composables/useLocale/index')['useLocale']
   const useLogger: typeof import('../../packages/0/src/composables/useLogger/index')['useLogger']
   const useModel: typeof import('vue')['useModel']
@@ -275,6 +280,8 @@ declare module 'vue' {
     readonly createElevation: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['createElevation']>
     readonly createHydration: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydration']>
     readonly createHydrationPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationPlugin']>
+    readonly createLayout: UnwrapRef<typeof import('../../packages/0/src/composables/useLayout/index')['createLayout']>
+    readonly createLayoutPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useLayout/index')['createLayoutPlugin']>
     readonly createLocale: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocale']>
     readonly createLocalePlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocalePlugin']>
     readonly createLogger: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['createLogger']>
diff --git a/playground/src/plugins/index.ts b/playground/src/plugins/index.ts
index 55a6ee39..eaaa4bf6 100644
--- a/playground/src/plugins/index.ts
+++ b/playground/src/plugins/index.ts
@@ -1,11 +1,14 @@
 import type { App } from 'vue'
 import { materialPalette, tailwindPalette } from './palettes'
+import { createLayoutPlugin } from '@vuetify/v0'
 
 export function registerPlugins (app: App) {
   app.use(createHydrationPlugin())
 
   app.use(createLoggerPlugin())
 
+  app.use(createLayoutPlugin())
+
   app.use(
     createBreakpointsPlugin({
       //