diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
index d1a2a21..869c256 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
+++ b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
@@ -47,6 +47,7 @@
     powerRange: string;
     currentPower: string;
     targetPower: string;
+    modulation: string;
     hasTargetPower: string;
     serviceState: string;
 }
@@ -78,8 +79,10 @@
     toggleState: FilterToggleState;
 
     powerForm: FormGroup;
+    modulationForm: FormGroup;
     SET_POWER_REQ = 'roadmSetTargetPowerRequest';
     SET_POWER_RESP = 'roadmSetTargetPowerResponse';
+    SET_MODULATION = 'roadmSetModulationRequest';
 
     restorePrefsConfig; // Function
 
@@ -128,7 +131,10 @@
         this.powerForm = new FormGroup({
             newPower: new FormControl(''),
         });
-        this.log.debug('Create Form');
+        this.modulationForm = new FormGroup({
+            newModulation: new FormControl(''),
+        });
+        this.log.debug('Create Forms');
     }
 
     ngOnDestroy() {
@@ -207,6 +213,15 @@
         });
     }
 
+    submitModulation(devId, port) {
+        this.log.debug('Set Modulation of port ', port, 'in device ', devId, 'as value ', this.modulationForm.value['newModulation']);
+        this.wss.sendEvent(this.SET_MODULATION, {
+            'modulation': this.modulationForm.value['newModulation'],
+            'devId': devId,
+            'id': port,
+        });
+    }
+
     powerConfigCb(data) {
         if (!data.valid) {
             const info = 'The power config operation is failed. The reason is: \n' + data.message;