diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html
index fa9a655d238..5fa62be5e96 100644
--- a/src/app/shared/form/chips/chips.component.html
+++ b/src/app/shared/form/chips/chips.component.html
@@ -1,5 +1,5 @@
 <div [className]="'float-start w-100 ' + wrapperClass">
-  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="onDrop($event)">
     <ng-template #tipContent>
       @for (tip of tipText; track tip) {
         <p class="text-start p-0 m-0">
@@ -8,7 +8,7 @@
       }
     </ng-template>
     @for (c of chips.getChips(); track c; let i = $index) {
-      <div role="listitem" class="nav-item me-2 mb-1"
+      <div role="listitem" class="nav-item me-2 mb-1 d-flex flew-row"
         #t="ngbTooltip"
         triggers="manual"
         [ngbTooltip]="tipContent"
diff --git a/src/app/shared/form/chips/chips.component.scss b/src/app/shared/form/chips/chips.component.scss
index a136c40cf34..5e7030033b3 100644
--- a/src/app/shared/form/chips/chips.component.scss
+++ b/src/app/shared/form/chips/chips.component.scss
@@ -1,7 +1,7 @@
 .cdk-drag-placeholder {
-  filter: grayscale(100%);
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 0;
 }
+
 .cdk-drag-preview {
   color: white;
   box-sizing: border-box;
@@ -9,3 +9,7 @@
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
   0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}