diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
index 7c98db791..a078b9cc7 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { useToggle } from '@vueuse/core';
+import { useToggle, useWindowSize, useElementBounding } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
 import { picoSearch } from '@scmmishra/pico-search';
 
@@ -26,10 +26,24 @@ const props = defineProps({
 
 const emit = defineEmits(['add']);
 
+const BUFFER_SPACE = 20;
+
 const [showPopover, togglePopover] = useToggle();
+const buttonRef = ref();
+const dropdownRef = ref();
 
 const searchValue = ref('');
 
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const {
+  top: buttonTop,
+  left: buttonLeft,
+  width: buttonWidth,
+  height: buttonHeight,
+} = useElementBounding(buttonRef);
+const { width: dropdownWidth, height: dropdownHeight } =
+  useElementBounding(dropdownRef);
+
 const filteredItems = computed(() => {
   if (!searchValue.value) return props.items;
   const query = searchValue.value.toLowerCase();
@@ -42,6 +56,26 @@ const handleAdd = item => {
   togglePopover(false);
 };
 
+const shouldShowAbove = computed(() => {
+  if (!buttonRef.value || !dropdownRef.value) return false;
+  const spaceBelow =
+    windowHeight.value - (buttonTop.value + buttonHeight.value);
+  const spaceAbove = buttonTop.value;
+  return (
+    spaceBelow < dropdownHeight.value + BUFFER_SPACE && spaceAbove > spaceBelow
+  );
+});
+
+const shouldAlignRight = computed(() => {
+  if (!buttonRef.value || !dropdownRef.value) return false;
+  const spaceRight = windowWidth.value - buttonLeft.value;
+  const spaceLeft = buttonLeft.value + buttonWidth.value;
+
+  return (
+    spaceRight < dropdownWidth.value + BUFFER_SPACE && spaceLeft > spaceRight
+  );
+});
+
 const handleClickOutside = () => {
   if (showPopover.value) {
     togglePopover(false);
@@ -55,6 +89,7 @@ const handleClickOutside = () => {
     class="relative flex items-center group"
   >
     <Button
+      ref="buttonRef"
       slate
       type="button"
       icon="i-lucide-plus"
@@ -64,7 +99,12 @@ const handleClickOutside = () => {
     />
     <div
       v-if="showPopover"
-      class="top-full mt-2 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto py-2"
+      ref="dropdownRef"
+      class="z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto py-2"
+      :class="[
+        shouldShowAbove ? 'bottom-full mb-2' : 'top-full mt-2',
+        shouldAlignRight ? 'right-0' : 'left-0',
+      ]"
     >
       <div class="flex flex-col divide-y divide-n-slate-4 w-full">
         <Input
@@ -90,7 +130,7 @@ const handleClickOutside = () => {
           <Icon
             v-if="item.icon"
             :icon="item.icon"
-            class="size-2 text-n-slate-12 flex-shrink-0 mt-0.5"
+            class="size-4 text-n-slate-12 flex-shrink-0 mt-0.5"
           />
           <span
             v-else-if="item.color"
@@ -105,24 +145,19 @@ const handleClickOutside = () => {
             :size="20"
             rounded-full
           />
-          <div class="flex flex-col items-start gap-2 min-w-0">
-            <div class="flex items-center gap-1 min-w-0">
+          <div class="flex flex-col items-start gap-2 min-w-0 flex-1">
+            <div class="flex items-center gap-1 min-w-0 w-full">
               <span
                 :title="item.name || item.title"
-                class="text-sm text-n-slate-12 truncate min-w-0"
+                class="text-sm text-n-slate-12 truncate min-w-0 flex-1"
               >
                 {{ item.name || item.title }}
               </span>
-              <span
-                v-if="item.id"
-                class="text-xs text-n-slate-11 flex-shrink-0"
-              >
-                {{ `#${item.id}` }}
-              </span>
             </div>
             <span
               v-if="item.email || item.phoneNumber"
-              class="text-sm text-n-slate-11 truncate min-w-0"
+              :title="item.email || item.phoneNumber"
+              class="text-sm text-n-slate-11 truncate min-w-0 w-full block"
             >
               {{ item.email || item.phoneNumber }}
             </span>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
index 5412675bd..351e3240f 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
@@ -119,7 +119,7 @@ onMounted(() => {
             )
           "
           :items="filteredTags"
-          class="[&>button]:!text-n-blue-text"
+          class="[&>button]:!text-n-blue-text [&>div]:min-w-64"
           @add="onClickAddTag"
         />
       </div>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
index 6a799005e..b31248653 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
@@ -110,53 +110,67 @@ const getInboxName = inboxId => {
       <div
         v-for="(limit, index) in inboxCapacityLimits"
         :key="limit.id || `temp-${index}`"
-        class="flex items-center gap-3"
+        class="flex flex-col xs:flex-row items-stretch gap-3"
       >
         <div
-          class="flex items-start rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full"
+          class="flex items-center rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full min-w-0"
+          :title="getInboxName(limit.inboxId)"
         >
-          {{ getInboxName(limit.inboxId) }}
+          <span class="truncate min-w-0">
+            {{ getInboxName(limit.inboxId) }}
+          </span>
         </div>
 
-        <div
-          class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-shrink-0 flex items-center"
-          :class="[
-            !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
-          ]"
-        >
-          <label class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2">
-            {{
-              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`)
-            }}
-          </label>
-
-          <div class="h-5 w-px bg-n-weak" />
-
-          <input
-            v-model.number="limit.conversationLimit"
-            type="number"
-            :min="MIN_CONVERSATION_LIMIT"
-            :max="MAX_CONVERSATION_LIMIT"
-            class="reset-base bg-transparent focus:outline-none max-w-20 text-sm"
+        <div class="flex items-center gap-3 w-full xs:w-auto">
+          <div
+            class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-1 xs:flex-shrink-0 flex items-center min-w-0"
             :class="[
-              !isLimitValid(limit)
-                ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
-                : 'placeholder:text-n-slate-10 text-n-slate-12',
+              !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
             ]"
-            :placeholder="
-              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
-            "
-            @blur="handleLimitChange(limit)"
+          >
+            <label
+              class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2 truncate min-w-0 flex-shrink"
+              :title="
+                t(
+                  `${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`
+                )
+              "
+            >
+              {{
+                t(
+                  `${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`
+                )
+              }}
+            </label>
+
+            <div class="h-5 w-px bg-n-weak" />
+
+            <input
+              v-model.number="limit.conversationLimit"
+              type="number"
+              :min="MIN_CONVERSATION_LIMIT"
+              :max="MAX_CONVERSATION_LIMIT"
+              class="reset-base bg-transparent focus:outline-none min-w-16 w-24 text-sm flex-shrink-0"
+              :class="[
+                !isLimitValid(limit)
+                  ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
+                  : 'placeholder:text-n-slate-10 text-n-slate-12',
+              ]"
+              :placeholder="
+                t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
+              "
+              @blur="handleLimitChange(limit)"
+            />
+          </div>
+
+          <Button
+            type="button"
+            slate
+            icon="i-lucide-trash"
+            class="flex-shrink-0"
+            @click="handleRemoveLimit(limit.id)"
           />
         </div>
-
-        <Button
-          type="button"
-          slate
-          icon="i-lucide-trash"
-          class="flex-shrink-0"
-          @click="handleRemoveLimit(limit.id)"
-        />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
index 428e126db..41e277c2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
@@ -5,6 +5,7 @@ import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useRoute, useRouter } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
 import camelcaseKeys from 'camelcase-keys';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
 
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
@@ -58,7 +59,19 @@ const allAgents = computed(() =>
 
 const allLabels = computed(() => buildList(labelsList.value));
 
-const allInboxes = computed(() => buildList(inboxes.value));
+const allInboxes = computed(
+  () =>
+    inboxes.value
+      ?.slice()
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(({ name, id, email, phoneNumber, channelType, medium }) => ({
+        name,
+        id,
+        email,
+        phoneNumber,
+        icon: getInboxIconByType(channelType, medium, 'line'),
+      })) || []
+);
 
 const formData = computed(() => ({
   name: selectedPolicy.value?.name || '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
index d00ead2a8..84a19f749 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
@@ -215,33 +215,6 @@ defineExpose({
           v-model:window-unit="state.windowUnit"
         />
       </div>
-
-      <div v-if="showInboxSection" class="py-4 flex-col flex gap-4">
-        <div class="flex items-end gap-4 w-full justify-between">
-          <div class="flex flex-col items-start gap-1 py-1">
-            <label class="text-sm font-medium text-n-slate-12 py-1">
-              {{ t(`${BASE_KEY}.FORM.INBOXES.LABEL`) }}
-            </label>
-            <p class="mb-0 text-n-slate-11 text-sm">
-              {{ t(`${BASE_KEY}.FORM.INBOXES.DESCRIPTION`) }}
-            </p>
-          </div>
-          <AddDataDropdown
-            :label="t(`${BASE_KEY}.FORM.INBOXES.ADD_BUTTON`)"
-            :search-placeholder="
-              t(`${BASE_KEY}.FORM.INBOXES.DROPDOWN.SEARCH_PLACEHOLDER`)
-            "
-            :items="inboxList"
-            @add="$emit('addInbox', $event)"
-          />
-        </div>
-        <DataTable
-          :items="policyInboxes"
-          :is-fetching="isInboxLoading"
-          :empty-state-message="t(`${BASE_KEY}.FORM.INBOXES.EMPTY_STATE`)"
-          @delete="$emit('deleteInbox', $event)"
-        />
-      </div>
     </div>
 
     <Button
@@ -250,5 +223,35 @@ defineExpose({
       :disabled="!validationState.isValid || isLoading"
       :is-loading="isLoading"
     />
+
+    <div
+      v-if="showInboxSection"
+      class="py-4 flex-col flex gap-4 border-t border-n-weak mt-6"
+    >
+      <div class="flex items-end gap-4 w-full justify-between">
+        <div class="flex flex-col items-start gap-1 py-1">
+          <label class="text-sm font-medium text-n-slate-12 py-1">
+            {{ t(`${BASE_KEY}.FORM.INBOXES.LABEL`) }}
+          </label>
+          <p class="mb-0 text-n-slate-11 text-sm">
+            {{ t(`${BASE_KEY}.FORM.INBOXES.DESCRIPTION`) }}
+          </p>
+        </div>
+        <AddDataDropdown
+          :label="t(`${BASE_KEY}.FORM.INBOXES.ADD_BUTTON`)"
+          :search-placeholder="
+            t(`${BASE_KEY}.FORM.INBOXES.DROPDOWN.SEARCH_PLACEHOLDER`)
+          "
+          :items="inboxList"
+          @add="$emit('addInbox', $event)"
+        />
+      </div>
+      <DataTable
+        :items="policyInboxes"
+        :is-fetching="isInboxLoading"
+        :empty-state-message="t(`${BASE_KEY}.FORM.INBOXES.EMPTY_STATE`)"
+        @delete="$emit('deleteInbox', $event)"
+      />
+    </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
index 3619111c8..24c4f0a38 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
@@ -145,7 +145,7 @@ defineExpose({
 
 <template>
   <form @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-4 divide-y divide-n-weak">
+    <div class="flex flex-col gap-4 mb-2 divide-y divide-n-weak">
       <BaseInfo
         v-model:policy-name="state.name"
         v-model:description="state.description"