diff --git a/apps/web/src/components/CustomerGroupsManager.vue b/apps/web/src/components/CustomerGroupsManager.vue
index 04bfb2e..1661b45 100644
--- a/apps/web/src/components/CustomerGroupsManager.vue
+++ b/apps/web/src/components/CustomerGroupsManager.vue
@@ -423,11 +423,9 @@ watch(
 .list {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 0 0 0.25rem;
   display: grid;
   gap: 0.4rem;
-  max-height: 55vh;
-  overflow-y: auto;
 }
 
 .row {
diff --git a/apps/web/src/components/OrgUserPersonPick.vue b/apps/web/src/components/OrgUserPersonPick.vue
index 80dddd5..59a172d 100644
--- a/apps/web/src/components/OrgUserPersonPick.vue
+++ b/apps/web/src/components/OrgUserPersonPick.vue
@@ -62,14 +62,23 @@ function close() {
   open.value = false;
 }
 
+function setIds(next: string[]) {
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+
 function toggle(userId: string) {
   if (props.disabled) return;
   const set = new Set(props.modelValue);
   if (set.has(userId)) set.delete(userId);
   else set.add(userId);
-  const next = [...set];
-  emit('update:modelValue', next);
-  emit('change', next);
+  setIds([...set]);
+}
+
+function remove(userId: string) {
+  if (props.disabled) return;
+  if (!props.modelValue.includes(userId)) return;
+  setIds(props.modelValue.filter((id) => id !== userId));
 }
 
 watch(open, (isOpen) => {
@@ -102,6 +111,21 @@ defineExpose({ close });
       <UiIcon name="chevron" :size="16" />
     </button>
 
+    <div v-if="selected.length" class="chips">
+      <span v-for="user in selected" :key="user.id" class="chip">
+        {{ user.fullName }}
+        <button
+          type="button"
+          class="chip-x"
+          :disabled="disabled"
+          :aria-label="`حذف ${user.fullName}`"
+          @click="remove(user.id)"
+        >
+          ×
+        </button>
+      </span>
+    </div>
+
     <div v-if="open" class="menu person-menu multi-menu" @click.stop>
       <label class="person-search">
         <UiIcon name="search" :size="15" />
@@ -190,6 +214,48 @@ defineExpose({ close });
   box-shadow: 0 0 0 2px #fff;
 }
 
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.4rem;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.15rem 0.35rem 0.15rem 0.55rem;
+  border-radius: 999px;
+  background: #f0fdfa;
+  border: 1px solid #99f6e4;
+  color: #0f766e;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.chip-x {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+}
+
+.chip-x:hover:not(:disabled) {
+  background: #ccfbf1;
+}
+
+.chip-x:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .menu {
   position: absolute;
   inset-inline: 0;