diff --git a/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.html b/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.html
index 166544c58b..5c67b99986 100644
--- a/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.html
+++ b/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.html
@@ -29,16 +29,17 @@
   }}</span>
 
   <div class="process-info-row">
-    <cds-dropdown
+    <cds-combo-box
       [dropUp]="false"
+      [appendInline]="true"
+      [disabled]="obs.processInstanceItems.isLoading"
       [label]="'progress.process' | translate"
-      [skeleton]="obs.processInstanceItems.isLoading"
-      [style.width.px]="350"
-      (selected)="loadProcessInstance($event.item.processInstanceId)"
+      [placeholder]="'progress.process' | translate"
+      [items]="obs.processInstanceItems.value || []"
+      (selected)="loadProcessInstance($event)"
     >
-      <cds-dropdown-list [items]="obs.processInstanceItems.value || []"></cds-dropdown-list>
-    </cds-dropdown>
-
+      <cds-dropdown-list></cds-dropdown-list>
+    </cds-combo-box>
     <div>
       <v-input-label [title]="'progress.version' | translate"></v-input-label>
 
diff --git a/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.ts b/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.ts
index 72667df5bc..21f0d80b8c 100644
--- a/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.ts
+++ b/frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.ts
@@ -162,7 +162,10 @@ export class CaseDetailTabProgressComponent {
     private readonly destroyRef: DestroyRef
   ) {}
 
-  public loadProcessInstance(processInstanceId: string): void {
+  public loadProcessInstance(selection: ListItem | Array<ListItem>): void {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    const processInstanceId = item?.processInstanceId;
+
     if (!!processInstanceId) {
       this.selectedProcessInstanceId$.next(processInstanceId);
     }
diff --git a/frontend/projects/valtimo/migration/src/lib/migration.component.html b/frontend/projects/valtimo/migration/src/lib/migration.component.html
index 1d0fa195f2..199ffd9764 100644
--- a/frontend/projects/valtimo/migration/src/lib/migration.component.html
+++ b/frontend/projects/valtimo/migration/src/lib/migration.component.html
@@ -26,60 +26,56 @@
     </div>
     <div class="row mb-5">
       <div class="col-4">
-        <label for="sourceDef">Source Definition</label>
-        <select
-          class="form-control"
-          id="sourceDef"
-          [ngModel]="fields.source.definition"
-          (ngModelChange)="loadProcessDefinitionVersions($event, 'source')"
+        <cds-combo-box
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Source Definition' | translate"
+          [placeholder]="'- ' + ('Source Definition' | translate) + ' -'"
+          [items]="sourceDefinitionItems"
+          (selected)="onDefinitionSelected($event, 'source')"
+          (clear)="onSourceDefinitionClear($event)"
         >
-          <option [ngValue]="null" selected>- Source Definition -</option>
-          <option *ngFor="let processDef of processDefinitions" [ngValue]="processDef.key">
-            {{ processDef.name }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-2">
-        <label for="sourceVer">Source Version</label>
-        <select
-          class="form-control"
-          id="sourceVer"
-          [ngModel]="fields.source.version"
-          (ngModelChange)="loadProcess($event, 'source')"
+        <cds-combo-box
+                #sourceVersionCombobox
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Source Definition' | translate"
+          [placeholder]="'- ' + ('Source Version' | translate) + ' -'"
+          [items]="sourceVersionItems"
+          (selected)="onVersionSelected($event, 'source')"
         >
-          <option [ngValue]="null" selected>- Source Version -</option>
-          <option *ngFor="let processVer of selectedVersions.source" [ngValue]="processVer.id">
-            {{ processVer.version }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-4">
-        <label for="targetDef">Target Definition</label>
-        <select
-          class="form-control"
-          id="targetDef"
-          [ngModel]="fields.target.definition"
-          (ngModelChange)="loadProcessDefinitionVersions($event, 'target')"
+        <cds-combo-box
+                #targetDefinitionComboBox
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Target Definition' | translate"
+          [placeholder]="'- ' + ('Target Definition' | translate) + ' -'"
+          [items]="targetDefinitionItems"
+          (selected)="onDefinitionSelected($event, 'target')"
         >
-          <option [ngValue]="null" selected>- Target Definition -</option>
-          <option *ngFor="let processDef of processDefinitions" [ngValue]="processDef.key">
-            {{ processDef.name }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-2">
-        <label for="targetVer">Target Version</label>
-        <select
-          class="form-control"
-          id="targetVer"
-          [ngModel]="fields.target.version"
-          (ngModelChange)="loadProcess($event, 'target')"
+        <cds-combo-box
+                #targetVersionCombobox
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Target Version' | translate"
+          [placeholder]="'- ' + ('Target Version' | translate) + ' -'"
+          [items]="targetVersionItems"
+          (selected)="onVersionSelected($event, 'target')"
         >
-          <option [ngValue]="null" selected>- Target Version -</option>
-          <option *ngFor="let processVer of selectedVersions.target" [ngValue]="processVer.id">
-            {{ processVer.version }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
     </div>
 
@@ -103,15 +99,15 @@
       <tr *ngFor="let node of uniqueFlowNodeMap">
         <td>{{ node.name ? node.name : node.id }}</td>
         <td>
-          <select class="form-control" (change)="taskMapping[node.id] = $event.target.value">
-            <option [value]="null" disabled selected>- Choose Target -</option>
-            <option
-              *ngFor="let targetFlowNode of getFilteredTargetFlowNodeMap(node.$type)"
-              [value]="targetFlowNode.id"
-            >
-              {{ targetFlowNode.name ? targetFlowNode.name : targetFlowNode.id }}
-            </option>
-          </select>
+          <cds-combo-box
+            [dropUp]="false"
+            [appendInline]="true"
+            [placeholder]="'- ' + ('Choose Target' | translate) + ' -'"
+            [items]="getFilteredTargetFlowNodeMapItems(node)"
+            (selected)="onTaskMappingSelected($event, node.id)"
+          >
+            <cds-dropdown-list></cds-dropdown-list>
+          </cds-combo-box>
         </td>
       </tr>
     </table>
diff --git a/frontend/projects/valtimo/migration/src/lib/migration.component.ts b/frontend/projects/valtimo/migration/src/lib/migration.component.ts
index af9b929fc4..5ad8663b2d 100644
--- a/frontend/projects/valtimo/migration/src/lib/migration.component.ts
+++ b/frontend/projects/valtimo/migration/src/lib/migration.component.ts
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, viewChild, ViewChild} from '@angular/core';
 import {ProcessDefinition, ProcessService} from '@valtimo/process';
 import {MigrationProcessDiagramComponent} from './migration-process-diagram/migration-process-diagram.component';
 import {NGXLogger} from 'ngx-logger';
 import {AlertService} from '@valtimo/components';
+import {ComboBox, ListItem} from 'carbon-components-angular';
 
 @Component({
   standalone: false,
@@ -57,7 +58,9 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
 
   @ViewChild('sourceDiagram') sourceDiagram: MigrationProcessDiagramComponent;
   @ViewChild('targetDiagram') targetDiagram: MigrationProcessDiagramComponent;
-
+  @ViewChild('sourceVersionCombobox') sourceVersionCombobox: ComboBox;
+  @ViewChild('targetDefinitionComboBox') targetDefinitionComboBox: ComboBox;
+  @ViewChild('targetVersionCombobox') targetVersionCombobox: ComboBox;
   public diagram: any = null;
 
   constructor(
@@ -78,23 +81,88 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
     return Object.keys(this.taskMapping).length;
   }
 
+  public sourceDefinitionItems: ListItem[] = [];
+  public targetDefinitionItems: ListItem[] = [];
+  public sourceVersionItems: ListItem[] = [];
+  public targetVersionItems: ListItem[] = [];
+  private readonly targetFlowNodeItemsMap = new Map<string, ListItem[]>();
+
+  private refreshDefinitionItems(): void {
+    this.sourceDefinitionItems = this.processDefinitions.map(processDef => ({
+      key: processDef.key,
+      content: processDef.name,
+      selected: this.fields.source.definition === processDef.key,
+    }));
+    this.targetDefinitionItems = this.processDefinitions.map(processDef => ({
+      key: processDef.key,
+      content: processDef.name,
+      selected: this.fields.target.definition === processDef.key,
+    }));
+  }
+
+  private refreshVersionItems(type: string): void {
+    const items = this.selectedVersions[type].map(processVer => ({
+      id: processVer.id,
+      content: `${processVer.version}`,
+      selected: this.fields[type].version === processVer.id,
+    }));
+    if (type === 'source') {
+      this.sourceVersionItems = items;
+    } else {
+      this.targetVersionItems = items;
+    }
+  }
+
   loadProcessDefinitions() {
     this.processService
       .getProcessDefinitions()
       .subscribe((processDefinitions: ProcessDefinition[]) => {
         this.processDefinitions = processDefinitions;
+        this.refreshDefinitionItems();
       });
   }
 
+  public onDefinitionSelected(selection: ListItem | ListItem[], type: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    const key = item?.key ?? null;
+
+    this.loadProcessDefinitionVersions(key, type);
+    if (type === 'source') {
+      this.loadProcessDefinitionVersions(key, 'target');
+    }
+  }
+
+  public onVersionSelected(selection: ListItem | ListItem[], type: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    this.loadProcess(item?.id ?? null, type);
+  }
+
+  public onSourceDefinitionClear(event: Event): void {
+    this.sourceVersionCombobox.clearInput(event);
+    this.targetDefinitionComboBox.clearInput(event);
+    this.targetVersionCombobox.clearInput(event);
+  }
+
+  public onTaskMappingSelected(selection: ListItem | ListItem[], nodeId: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    this.taskMapping[nodeId] = item?.id ?? null;
+  }
+
   loadProcessDefinitionVersions(key: string | null, type: string) {
     this.fields[type].definition = key;
     this.selectedVersions[type] = [];
     this.clearProcess(type);
+    this.refreshDefinitionItems();
+    this.refreshVersionItems(type);
     if (key) {
       this.processService
         .getProcessDefinitionVersions(key)
         .subscribe((processDefinitionVersions: ProcessDefinition[]) => {
+          if (this.fields[type].definition !== key) {
+            return;
+          }
           this.selectedVersions[type] = processDefinitionVersions;
+          this.refreshVersionItems(type);
         });
     }
   }
@@ -102,6 +170,7 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
   loadProcess(id: string | null, type: string) {
     this.fields[type].version = id;
     this.clearProcess(type);
+    this.refreshVersionItems(type);
     if (id) {
       this.loadProcessDefinitionXML(id, type);
       if (type === 'source') {
@@ -157,10 +226,25 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
     });
   }
 
+  public getFilteredTargetFlowNodeMapItems(node): ListItem[] {
+    if (!this.targetFlowNodeItemsMap.has(node.id)) {
+      this.targetFlowNodeItemsMap.set(
+        node.id,
+        this.getFilteredTargetFlowNodeMap(node.$type).map(targetFlowNode => ({
+          id: targetFlowNode.id,
+          content: targetFlowNode.name || targetFlowNode.id,
+          selected: this.taskMapping[node.id] === targetFlowNode.id,
+        }))
+      );
+    }
+    return this.targetFlowNodeItemsMap.get(node.id);
+  }
+
   diagramLoaded(diagramName: string) {
     this.loaded[diagramName] = true;
     if (this.loaded.source && this.loaded.target) {
       this.taskMapping = {};
+      this.targetFlowNodeItemsMap.clear();
       this.setUniqueFlowNodeMap();
     }
   }
@@ -183,6 +267,9 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
               version: null,
             },
           };
+          this.refreshDefinitionItems();
+          this.refreshVersionItems('source');
+          this.refreshVersionItems('target');
         },
         err => {
           this.alertService.error('Process migration failed!');
diff --git a/frontend/projects/valtimo/migration/src/lib/migration.module.ts b/frontend/projects/valtimo/migration/src/lib/migration.module.ts
index 4866b7e6f6..9e6408518d 100644
--- a/frontend/projects/valtimo/migration/src/lib/migration.module.ts
+++ b/frontend/projects/valtimo/migration/src/lib/migration.module.ts
@@ -22,6 +22,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MigrationProcessDiagramComponent} from './migration-process-diagram/migration-process-diagram.component';
 import {WidgetModule} from '@valtimo/components';
 import {TranslateModule} from '@ngx-translate/core';
+import {ComboBoxModule} from 'carbon-components-angular';
 
 @NgModule({
   declarations: [MigrationComponent, MigrationProcessDiagramComponent],
@@ -32,6 +33,7 @@ import {TranslateModule} from '@ngx-translate/core';
     WidgetModule,
     FormsModule,
     TranslateModule,
+    ComboBoxModule,
   ],
   exports: [MigrationComponent],
 })
diff --git a/frontend/projects/valtimo/shared/assets/core/en.json b/frontend/projects/valtimo/shared/assets/core/en.json
index 8b8668d785..c797999d34 100644
--- a/frontend/projects/valtimo/shared/assets/core/en.json
+++ b/frontend/projects/valtimo/shared/assets/core/en.json
@@ -1783,6 +1783,11 @@
   "uploadFormDefinition": "Upload form definition",
   "Process migration": "Process migration",
   "Process migration warning": "<b>Warning:</b> When migrating a process, the candidate groups of running instances will not be updated. This can be done in the database if necessary. (For example if a specific user task is open for ROLE_USER and the candidate group for the user task is updated in the process to ROLE_ADMIN, this user task is still accessible for ROLE_USER. Only newly started processes will use the updated candidate group)",
+  "Source Definition": "Source Definition",
+  "Source Version": "Source Version",
+  "Target Definition": "Target Definition",
+  "Target Version": "Target Version",
+  "Choose Target": "Choose Target",
   "Case": "Case",
   "Cases": "Cases",
   "Deployment": "Version management",
diff --git a/frontend/projects/valtimo/shared/assets/core/nl.json b/frontend/projects/valtimo/shared/assets/core/nl.json
index 923ee53ac9..8f251c8036 100644
--- a/frontend/projects/valtimo/shared/assets/core/nl.json
+++ b/frontend/projects/valtimo/shared/assets/core/nl.json
@@ -1811,6 +1811,11 @@
   "uploadFormDefinition": "Upload formulier-definitie",
   "Process migration": "Procesmigratie",
   "Process migration warning": "<b>Let op:</b> Bij het migreren van een proces worden de candidate groups van de lopende proces instanties niet meegenomen. Dit kan gedaan worden in de database indien nodig. (Voorbeeld: wanneer een specifieke gebruikerstaak op de ROLE_USER stond en de candidate group voor deze taak is veranderd in het proces naar ROLE_ADMIN blijft de taak beschikbaar voor ROLE_USER. Enkel nieuw gestarte processen krijgen de nieuwe candidate group)",
+  "Source Definition": "Bron definitie",
+  "Source Version": "Bron versie",
+  "Target Definition": "Doel definitie",
+  "Target Version": "Doel versie",
+  "Choose Target": "Kies doel",
   "Case": "Dossier",
   "Cases": "Dossiers",
   "Deployment": "Versiebeheer",