diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/+page.vue b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/+page.vue
index b87a99f4..b1eba23f 100644
--- a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/+page.vue
+++ b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/+page.vue
@@ -3,6 +3,8 @@ import { ref } from 'vue';
 import { XBreadcrumb, XButton, XCard, XTreeSelect } from '@x/ui';
 
 import WithinPopover from './WithinPopover.vue';
+import WithinTableCell from './WithinTableCell.vue';
+import WithinTableCellWithinDialog from './WithinTableCellWithinDialog.vue';
 
 const values = ref<string[]>([]);
 
@@ -155,4 +157,20 @@ const values2 = ref<string[]>([]);
       <WithinPopover />
     </XCard>
   </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Within TableCell</h2>
+
+    <XCard>
+      <WithinTableCell />
+    </XCard>
+  </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Within TableCell within Dialog</h2>
+
+    <XCard>
+      <WithinTableCellWithinDialog />
+    </XCard>
+  </section>
 </template>
diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinPopover.vue b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinPopover.vue
index 4543066e..d5b36d73 100644
--- a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinPopover.vue
+++ b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinPopover.vue
@@ -1,87 +1,19 @@
 <script lang="ts" setup>
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { XButton, XCard, XPopover, XTreeSelect } from '@x/ui';
 
-const flux = reactive({
-  popoverStatus: false,
-  select: [],
-  select1Options: [
-    {
-      label: '1',
-      value: '1',
-      children: [
-        {
-          label: '1-1',
-          value: '1-1',
-          children: [
-            { label: '1-1-1', value: '1-1-1' },
-            { label: '1-1-2', value: '1-1-2' },
-          ],
-        },
-        {
-          label: '1-2',
-          value: '1-2',
-          children: [
-            { label: '1-2-1', value: '1-2-1' },
-            { label: '1-2-2', value: '1-2-2' },
-          ],
-        },
-        {
-          label: '1-3',
-          value: '1-3',
-          children: [
-            { label: '1-3-1', value: '1-3-1' },
-            {
-              label: '1-3-2',
-              value: '1-3-2',
-              children: [
-                { label: '1-3-2-1', value: '1-3-2-1' },
-                { label: '1-3-2-2', value: '1-3-2-2' },
-              ],
-            },
-            { label: '1-3-3', value: '1-3-3' },
-          ],
-        },
-      ],
-    },
-    {
-      label: '2',
-      value: '2',
-      children: [
-        {
-          label: '2-1',
-          value: '2-1',
-          children: [
-            {
-              label: '2-1-1',
-              value: '2-1-1',
-              children: [
-                { label: '2-1-1-1', value: '2-1-1-1' },
-                { label: '2-1-1-2', value: '2-1-1-2' },
-              ],
-            },
-            { label: '2-1-2', value: '2-1-2' },
-          ],
-        },
-        { label: '2-2', value: '2-2' },
-      ],
-    },
-    { label: '3', value: '3' },
-  ],
-});
+import options from './options';
+
+const selected = ref<string[]>([]);
 </script>
 
 <template>
-  <XPopover v-model="flux.popoverStatus">
-    <XButton label="Launch" @click="flux.popoverStatus = true" />
+  <XPopover>
+    <XButton label="Launch" />
 
     <template #content>
       <XCard class="w-xs">
-        <XTreeSelect
-          v-model:value="flux.select"
-          label="Example label"
-          :options="flux.select1Options"
-        />
+        <XTreeSelect v-model:value="selected" label="Example label" :options />
       </XCard>
     </template>
   </XPopover>
diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCell.vue b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCell.vue
new file mode 100644
index 00000000..0f5be4ab
--- /dev/null
+++ b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCell.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XTable, XTreeSelect } from '@x/ui';
+
+import options from './options';
+
+const selected = ref<string[]>([]);
+</script>
+
+<template>
+  <XTable
+    :columns="[
+      { key: 'A', name: 'Layout' },
+      { key: 'B', name: 'Flexbox & Grid' },
+      { key: 'C', name: 'Spacing' },
+      { key: 'D', name: 'Sizing' },
+      { key: 'E', name: 'Typography' },
+      { key: 'F', name: 'Backgrounds' },
+      { key: 'G', name: 'Borders' },
+      { key: 'H', name: 'Effects' },
+      { key: 'I', name: 'Filters' },
+      { key: 'J', name: 'Tables' },
+      { key: 'K', name: 'Transitions & Animation' },
+      { key: 'L', name: 'Transforms' },
+      { key: 'M', name: 'Interactivity' },
+      { key: 'N', name: 'SVG' },
+      { key: 'O', name: 'Accessibility' },
+    ]"
+    :rows="[
+      {
+        A: 'Aspect Ratio',
+        B: 'Flex Basis',
+        C: 'Padding',
+        D: 'Width',
+        E: 'Font Family',
+        F: 'Background Attachment',
+        G: 'Border Radius',
+        H: 'Box Shadow',
+        I: 'Blur',
+        J: 'Border Collapse',
+        K: 'Transition Property',
+        L: 'Scale',
+        M: 'Accent Color',
+        N: 'Fill',
+        O: 'Screen Readers',
+      },
+    ]"
+  >
+    <template #D>
+      <div class="w-64 py-1">
+        <XTreeSelect v-model:value="selected" :options />
+      </div>
+    </template>
+  </XTable>
+</template>
diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCellWithinDialog.vue b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCellWithinDialog.vue
new file mode 100644
index 00000000..736d6d05
--- /dev/null
+++ b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCellWithinDialog.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XButton, XDialog, XDivider, XTable, XTreeSelect } from '@x/ui';
+
+import options from './options';
+
+const status = ref(false);
+const selected = ref<string[]>([]);
+const more = ref(false);
+</script>
+
+<template>
+  <XButton label="Launch" @click="status = true" />
+
+  <XDialog v-model="status" title="TreeSelect within TableCell within Dialog">
+    <XTable
+      :columns="[
+        { key: 'A', name: 'Layout' },
+        { key: 'B', name: 'Flexbox & Grid' },
+        { key: 'C', name: 'Spacing' },
+        { key: 'D', name: 'Sizing' },
+        { key: 'E', name: 'Typography' },
+        { key: 'F', name: 'Backgrounds' },
+        { key: 'G', name: 'Borders' },
+        { key: 'H', name: 'Effects' },
+        { key: 'I', name: 'Filters' },
+        { key: 'J', name: 'Tables' },
+        { key: 'K', name: 'Transitions & Animation' },
+        { key: 'L', name: 'Transforms' },
+        { key: 'M', name: 'Interactivity' },
+        { key: 'N', name: 'SVG' },
+        { key: 'O', name: 'Accessibility' },
+      ]"
+      :rows="[
+        {
+          A: 'Aspect Ratio',
+          B: 'Flex Basis',
+          C: 'Padding',
+          D: 'Width',
+          E: 'Font Family',
+          F: 'Background Attachment',
+          G: 'Border Radius',
+          H: 'Box Shadow',
+          I: 'Blur',
+          J: 'Border Collapse',
+          K: 'Transition Property',
+          L: 'Scale',
+          M: 'Accent Color',
+          N: 'Fill',
+          O: 'Screen Readers',
+        },
+      ]"
+    >
+      <template #D>
+        <div class="w-64 py-1">
+          <XTreeSelect v-model:value="selected" :options />
+        </div>
+      </template>
+    </XTable>
+
+    <XDivider />
+
+    <XButton color="info" @click="more = !more">More</XButton>
+
+    <div v-if="more" class="flex flex-col gap-4 mt-4">
+      <p v-for="num in 5" :key="num">
+        {{ num }}. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
+        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
+        printer took a galley of type and scrambled it to make a type specimen book. It has survived
+        not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+        containing Lorem Ipsum passages, and more recently with desktop publishing software like
+        Aldus PageMaker including versions of Lorem Ipsum.
+      </p>
+    </div>
+  </XDialog>
+</template>
diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/options.ts b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/options.ts
new file mode 100644
index 00000000..70be85f3
--- /dev/null
+++ b/app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/options.ts
@@ -0,0 +1,63 @@
+export default [
+  {
+    label: '1',
+    value: '1',
+    children: [
+      {
+        label: '1-1',
+        value: '1-1',
+        children: [
+          { label: '1-1-1', value: '1-1-1' },
+          { label: '1-1-2', value: '1-1-2' },
+        ],
+      },
+      {
+        label: '1-2',
+        value: '1-2',
+        children: [
+          { label: '1-2-1', value: '1-2-1' },
+          { label: '1-2-2', value: '1-2-2' },
+        ],
+      },
+      {
+        label: '1-3',
+        value: '1-3',
+        children: [
+          { label: '1-3-1', value: '1-3-1' },
+          {
+            label: '1-3-2',
+            value: '1-3-2',
+            children: [
+              { label: '1-3-2-1', value: '1-3-2-1' },
+              { label: '1-3-2-2', value: '1-3-2-2' },
+            ],
+          },
+          { label: '1-3-3', value: '1-3-3' },
+        ],
+      },
+    ],
+  },
+  {
+    label: '2',
+    value: '2',
+    children: [
+      {
+        label: '2-1',
+        value: '2-1',
+        children: [
+          {
+            label: '2-1-1',
+            value: '2-1-1',
+            children: [
+              { label: '2-1-1-1', value: '2-1-1-1' },
+              { label: '2-1-1-2', value: '2-1-1-2' },
+            ],
+          },
+          { label: '2-1-2', value: '2-1-2' },
+        ],
+      },
+      { label: '2-2', value: '2-2' },
+    ],
+  },
+  { label: '3', value: '3' },
+];
diff --git a/ui/src/components/dialog/Dialog.vue b/ui/src/components/dialog/Dialog.vue
index 7d174c3b..3935ea08 100644
--- a/ui/src/components/dialog/Dialog.vue
+++ b/ui/src/components/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, ref, watch, onUnmounted } from 'vue';
+import { nextTick, ref, watch, onUnmounted, provide } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 
 import Bounce from '../bounce/Bounce.vue';
@@ -47,6 +47,10 @@ onUnmounted(() => {
     closeDialog();
   }
 });
+
+provide('Dialog', {
+  withinDialog: true,
+});
 </script>
 
 <template>
diff --git a/ui/src/components/popover/Popover.vue b/ui/src/components/popover/Popover.vue
index a9703d59..dfdc6874 100644
--- a/ui/src/components/popover/Popover.vue
+++ b/ui/src/components/popover/Popover.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, ref, computed, reactive, watch, provide } from 'vue';
+import { nextTick, ref, computed, reactive, watch, provide, inject } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 
 import Fade from '../fade/Fade.vue';
@@ -21,6 +21,8 @@ const props = withDefaults(
   },
 );
 
+const dialog = inject('Dialog', { withinDialog: false });
+
 const target = ref<HTMLDivElement>();
 const panel = ref<HTMLDivElement>();
 
@@ -54,12 +56,12 @@ const flux = reactive({
     const center = window.innerHeight / 2;
 
     if (rect.top > center) {
-      const top = scrollableParent(target.value)?.getBoundingClientRect().top || 0;
+      const top = scrollableParent(target.value, 'y')?.getBoundingClientRect().top || 0;
       panel.value.style.top = `${Math.abs(top) + rect.top}px`;
       flux.direction = 'up';
     } else {
-      const top = scrollableParent(target.value)?.getBoundingClientRect().top || 0;
-      panel.value.style.top = `${Math.abs(top) + rect.bottom}px`;
+      const top = scrollableParent(target.value, 'y')?.getBoundingClientRect().top || 0;
+      panel.value.style.top = `${Math.abs(top) + rect.top + rect.height}px`;
       flux.direction = 'down';
     }
 
@@ -84,9 +86,11 @@ const flux = reactive({
 });
 
 useScrollParent(
-  computed(() => panel.value),
+  computed(() => target.value),
   () => {
-    if (flux.status || defaultModel.value) flux.resizePanel();
+    if (flux.status || defaultModel.value) {
+      flux.resizePanel();
+    }
   },
 );
 
@@ -127,10 +131,13 @@ provide('Popover', {
           ref="panel"
           tabindex="-1"
           class="Popover-Panel"
-          :class="{
-            placementBottom: flux.direction === 'down',
-            placementTop: flux.direction === 'up',
-          }"
+          :class="[
+            {
+              placementBottom: flux.direction === 'down',
+              placementTop: flux.direction === 'up',
+            },
+            dialog.withinDialog ? 'z-111' : 'z-101',
+          ]"
         >
           <slot name="content"></slot>
         </div>
@@ -149,7 +156,7 @@ provide('Popover', {
 }
 
 .Popover-Panel {
-  @apply absolute z-101 min-w-max bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700;
+  @apply absolute min-w-max bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700;
 
   &.placementBottom {
     transform: translateY(0.5rem);
diff --git a/ui/src/composables/scroll-parent/scrollableParent.ts b/ui/src/composables/scroll-parent/scrollableParent.ts
index 2df12144..acdfab09 100644
--- a/ui/src/composables/scroll-parent/scrollableParent.ts
+++ b/ui/src/composables/scroll-parent/scrollableParent.ts
@@ -1,4 +1,4 @@
-export default (el?: HTMLElement | null): HTMLElement | undefined => {
+export default (el?: HTMLElement | null, axis?: 'x' | 'y'): HTMLElement | undefined => {
   if (!el) return undefined;
 
   let parent = el.parentElement;
@@ -10,7 +10,7 @@ export default (el?: HTMLElement | null): HTMLElement | undefined => {
 
     if (
       (overflow.includes('auto') || overflow.includes('scroll')) &&
-      (hasScrollbarY || hasScrollbarX)
+      (axis === 'x' ? hasScrollbarX : axis === 'y' ? hasScrollbarY : hasScrollbarY || hasScrollbarX)
     ) {
       return parent;
     }