diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 48fa7acf1..8b77ce254 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,34 +1,67 @@
 <script setup>
-import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
 
-const { x, y } = defineProps({
+const props = defineProps({
   x: { type: Number, default: 0 },
   y: { type: Number, default: 0 },
 });
+
 const emit = defineEmits(['close']);
 
-const left = ref(x);
-const top = ref(y);
+const menuRef = useTemplateRef('menuRef');
 
-const style = computed(() => ({
-  top: top.value + 'px',
-  left: left.value + 'px',
-}));
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
+
+const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  // Initial position
+  let left = x;
+  let top = y;
+
+  // Boundary checks
+  const isOverflowingRight = left + menuW > windowW;
+  const isOverflowingBottom = top + menuH > windowH;
+
+  // Adjust position if overflowing
+  if (isOverflowingRight) left = windowW - menuW;
+  if (isOverflowingBottom) top = windowH - menuH;
+
+  return {
+    left: Math.max(0, left),
+    top: Math.max(0, top),
+  };
+};
+
+const position = computed(() => {
+  if (!menuRef.value) return { top: `${props.y}px`, left: `${props.x}px` };
+
+  const { left, top } = calculatePosition(
+    props.x,
+    props.y,
+    menuWidth.value,
+    menuHeight.value,
+    windowWidth.value,
+    windowHeight.value
+  );
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+});
 
-const target = ref();
 onMounted(() => {
-  nextTick(() => {
-    target.value.focus();
-  });
+  nextTick(() => menuRef.value?.focus());
 });
 </script>
 
 <template>
   <Teleport to="body">
     <div
-      ref="target"
+      ref="menuRef"
       class="fixed outline-none z-[9999] cursor-pointer"
-      :style="style"
+      :style="position"
       tabindex="0"
       @blur="emit('close')"
     >
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 6d0a26d52..a601c92d3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,20 +1,45 @@
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
+
+defineProps({
+  option: {
+    type: Object,
+    default: () => {},
   },
-};
+  subMenuAvailable: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const menuRef = useTemplateRef('menuRef');
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { bottom, right } = useElementBounding(menuRef);
+
+// Vertical position
+const verticalPosition = computed(() => {
+  const SUBMENU_HEIGHT = 240; // 15rem in pixels
+  const spaceBelow = windowHeight.value - bottom.value;
+  return spaceBelow < SUBMENU_HEIGHT ? 'bottom-0' : 'top-0';
+});
+
+// Horizontal position
+const horizontalPosition = computed(() => {
+  const SUBMENU_WIDTH = 240;
+  const spaceRight = windowWidth.value - right.value;
+  return spaceRight < SUBMENU_WIDTH ? 'right-full' : 'left-full';
+});
+
+const submenuPosition = computed(() => [
+  verticalPosition.value,
+  horizontalPosition.value,
+]);
 </script>
 
 <template>
   <div
+    ref="menuRef"
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
     :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
@@ -25,7 +50,8 @@ export default {
     <fluent-icon icon="chevron-right" size="12" />
     <div
       v-if="subMenuAvailable"
-      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute hidden max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      :class="submenuPosition"
     >
       <slot />
     </div>