diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html
index 33224b1d1c..4f77a5fa3b 100644
--- a/src/app/shared/form/chips/chips.component.html
+++ b/src/app/shared/form/chips/chips.component.html
@@ -1,26 +1,25 @@
 <div [className]="'float-left w-100 ' + wrapperClass">
-  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row">
-    <ng-container *ngFor="let c of chips.getChips(); let i = index">
-      <ng-template #tipContent>
-        <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
-          {{tip}}
-        </p>
-      </ng-template>
-
-      <div role="listitem" class="nav-item mr-2 mb-1"
-          #t="ngbTooltip"
-          triggers="manual"
-          [ngbTooltip]="tipContent"
-          (dragstart)="t.close();onDragStart(i)"
-          (dragend)="onDragEnd(i)"
-          (mouseover)="showTooltip(t, i)"
-          (mouseout)="t.close()">
+  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+    <ng-template #tipContent>
+      <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
+        {{tip}}
+      </p>
+    </ng-template>
+    <div role="listitem" class="nav-item mr-2 mb-1"
+           *ngFor="let c of chips.getChips(); let i = index"
+           #t="ngbTooltip"
+           triggers="manual"
+           [ngbTooltip]="tipContent"
+           (mouseover)="showTooltip(t, i)"
+           (mouseout)="t.close()">
         <a class="flex-sm-fill text-sm-center nav-link active bg-info"
+           cdkDrag
+           (cdkDragStarted)="onDrag($event)"
            href="javascript:void(0);"
            [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged === i}"
            (click)="chipsSelected($event, i);">
           <span>
-            <i *ngIf="showIcons && !c.isNestedItem()" dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true"></i>
+            <i *ngIf="showIcons && !c.isNestedItem()" dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true">&nbsp;</i>
             <ng-container *ngIf="showIcons && c.hasVisibleIcons()">
               <i *ngFor="let icon of c.icons; let l = last"
                  [ngbTooltip]="tipContent"
@@ -33,7 +32,6 @@
                  [authorityValue]="c.item[icon.metadata] || c.item"
                  [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
                  aria-hidden="true"
-                 (dragstart)="t.close();"
                  (mouseover)="showTooltip(t, i, icon.metadata)"
                  (mouseout)="t.close()"></i>
             </ng-container>
@@ -41,7 +39,6 @@
           </span>
         </a>
       </div>
-    </ng-container>
     <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
       <ng-content ></ng-content>
     </div>
diff --git a/src/app/shared/form/chips/chips.component.scss b/src/app/shared/form/chips/chips.component.scss
index a894448730..a136c40cf3 100644
--- a/src/app/shared/form/chips/chips.component.scss
+++ b/src/app/shared/form/chips/chips.component.scss
@@ -1,7 +1,11 @@
-.chip-selected {
-  background-color: var(--bs-secondary) !important;
+.cdk-drag-placeholder {
+  filter: grayscale(100%);
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
-
-.chip-label {
-  max-width: 10rem;
+.cdk-drag-preview {
+  color: white;
+  box-sizing: border-box;
+  border-radius: 0.25rem;
+  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);
 }
diff --git a/src/app/shared/form/chips/chips.component.ts b/src/app/shared/form/chips/chips.component.ts
index 692e2982f5..ae428127a8 100644
--- a/src/app/shared/form/chips/chips.component.ts
+++ b/src/app/shared/form/chips/chips.component.ts
@@ -1,3 +1,10 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragStart,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 import {
   AsyncPipe,
   NgClass,
@@ -24,7 +31,6 @@ import {
 import isObject from 'lodash/isObject';
 import { BehaviorSubject } from 'rxjs';
 
-import { DragService } from '../../../core/drag.service';
 import { AuthorityConfidenceStateDirective } from '../directives/authority-confidence-state.directive';
 import { Chips } from './models/chips.model';
 import { ChipsItem } from './models/chips-item.model';
@@ -41,6 +47,8 @@ import { ChipsItem } from './models/chips-item.model';
     AuthorityConfidenceStateDirective,
     NgIf,
     TranslateModule,
+    CdkDrag,
+    CdkDropList,
   ],
   standalone: true,
 })
@@ -61,7 +69,6 @@ export class ChipsComponent implements OnChanges {
 
   constructor(
     private cdr: ChangeDetectorRef,
-    private dragService: DragService,
     private translate: TranslateService) {
   }
 
@@ -94,21 +101,19 @@ export class ChipsComponent implements OnChanges {
     }
   }
 
-  onDragStart(index) {
+  onDrag(event: CdkDragStart<ChipsItem[]>) {
     this.isDragging.next(true);
-    this.dragService.overrideDragOverPage();
-    this.dragged = index;
   }
-
-  onDragEnd(event) {
-    this.dragService.allowDragOverPage();
-    this.dragged = -1;
+  onDrop(event: CdkDragDrop<ChipsItem[]>) {
+    moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex);
     this.chips.updateOrder();
     this.isDragging.next(false);
   }
-
   showTooltip(tooltip: NgbTooltip, index, field?) {
     tooltip.close();
+    if (this.isDragging.value) {
+      return;
+    }
     const chipsItem = this.chips.getChipByIndex(index);
     const textToDisplay: string[] = [];
     if (!chipsItem.editMode && this.dragged === -1) {
@@ -139,5 +144,4 @@ export class ChipsComponent implements OnChanges {
 
     }
   }
-
 }
diff --git a/src/modules/app/server-app.module.ts b/src/modules/app/server-app.module.ts
index 9d930b892c..eb99534513 100644
--- a/src/modules/app/server-app.module.ts
+++ b/src/modules/app/server-app.module.ts
@@ -6,9 +6,7 @@ import {
   TransferState,
 } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  ServerModule,
-} from '@angular/platform-server';
+import { ServerModule } from '@angular/platform-server';
 import { EffectsModule } from '@ngrx/effects';
 import {
   Action,