diff --git a/resources/js/Components/ArrangementDialog.vue b/resources/js/Components/ArrangementDialog.vue
index 17ae100..a1941c4 100644
--- a/resources/js/Components/ArrangementDialog.vue
+++ b/resources/js/Components/ArrangementDialog.vue
@@ -141,10 +141,30 @@ const currentArrangement = computed(() => {
 
 const arrangementGroups = ref([])
 const hoveredIndex = ref(null)
+const clickedIndex = ref(null)
+let clickedTimeout = null
+const rightItems = ref([])
+
+function setRightItemRef(el, index) {
+    if (el) rightItems.value[index] = el
+}
+
+function scrollToRight(index) {
+    const el = rightItems.value[index]
+    if (!el) return
+    el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    clickedIndex.value = index
+    if (clickedTimeout) clearTimeout(clickedTimeout)
+    clickedTimeout = setTimeout(() => {
+        clickedIndex.value = null
+    }, 1500)
+}
 
 watch(
     currentArrangementId,
     (id) => {
+        rightItems.value = []
+        clickedIndex.value = null
         if (id === MASTER_ID) {
             arrangementGroups.value = props.availableGroups.map((g, i) => ({ ...g, slides: g.slides ?? [], _uid: `${g.id}-master-${i}-${Date.now()}` }))
             return
@@ -555,15 +575,16 @@ function closeOnBackdrop(e) {
                                     v-for="(element, index) in arrangementGroups"
                                     :key="element._uid"
                                     data-testid="arrangement-pill"
-                                    class="flex items-center gap-2 rounded-lg border-2 px-3 py-2"
+                                    class="flex items-center gap-2 rounded-lg border-2 px-3 py-2 transition-shadow"
                                     :class="[
-                                        { 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index },
+                                        { 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index || clickedIndex === index },
                                         isMasterSelected ? 'cursor-default' : 'cursor-grab',
                                     ]"
                                     :style="{
                                         borderColor: element.color ?? '#6b7280',
                                         backgroundColor: (element.color ?? '#6b7280') + '20',
                                     }"
+                                    @click="scrollToRight(index)"
                                 >
                                     <!-- Group name -->
                                     <span class="flex-1 text-sm font-medium">
@@ -652,8 +673,9 @@ function closeOnBackdrop(e) {
                             <div
                                 v-for="(element, index) in arrangementGroups"
                                 :key="element._uid"
+                                :ref="(el) => setRightItemRef(el, index)"
                                 class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm transition-shadow"
-                                :class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index }"
+                                :class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index || clickedIndex === index }"
                                 :style="{ borderColor: element.color ?? '#6b7280' }"
                                 @mouseenter="hoveredIndex = index"
                                 @mouseleave="hoveredIndex = null"