diff --git a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
index 8e1680ea46..24b6ff099b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
@@ -47,35 +47,50 @@
             </mat-error>
           </mat-form-field>
           <div *ngIf="protoPayloadType" fxLayout="column">
-            <mat-form-field fxFlex>
-              <mat-label translate>device-profile.telemetry-proto-schema</mat-label>
-              <textarea matInput required formControlName="deviceTelemetryProtoSchema" rows="5"></textarea>
+            <ng-container>
+              <tb-protobuf-content
+                fxFlex
+                formControlName="deviceTelemetryProtoSchema"
+                label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
+                [fillHeight]="true">
+              </tb-protobuf-content>
               <mat-error *ngIf="coapTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema').hasError('required')">
                 {{ 'device-profile.telemetry-proto-schema-required' | translate}}
               </mat-error>
-            </mat-form-field>
-            <mat-form-field fxFlex>
-              <mat-label translate>device-profile.attributes-proto-schema</mat-label>
-              <textarea matInput required formControlName="deviceAttributesProtoSchema" rows="5"></textarea>
+            </ng-container>
+            <ng-container>
+              <tb-protobuf-content
+                fxFlex
+                formControlName="deviceAttributesProtoSchema"
+                label="{{ 'device-profile.attributes-proto-schema' | translate }}"
+                [fillHeight]="true">
+              </tb-protobuf-content>
               <mat-error *ngIf="coapTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema').hasError('required')">
                 {{ 'device-profile.attributes-proto-schema-required' | translate}}
               </mat-error>
-            </mat-form-field>
-            <mat-form-field style="padding-bottom: 20px" fxFlex>
-              <mat-label translate>device-profile.rpc-request-proto-schema</mat-label>
-              <textarea matInput required formControlName="deviceRpcRequestProtoSchema" rows="5"></textarea>
+            </ng-container>
+            <ng-container>
+              <tb-protobuf-content
+                fxFlex
+                formControlName="deviceRpcRequestProtoSchema"
+                label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
+                [fillHeight]="true">
+              </tb-protobuf-content>
               <mat-error *ngIf="coapTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema').hasError('required')">
                 {{ 'device-profile.rpc-request-proto-schema-required' | translate}}
               </mat-error>
-              <mat-hint class="tb-hint" translate>device-profile.rpc-request-proto-schema-hint</mat-hint>
-            </mat-form-field>
-            <mat-form-field fxFlex>
-              <mat-label translate>device-profile.rpc-response-proto-schema</mat-label>
-              <textarea matInput required formControlName="deviceRpcResponseProtoSchema" rows="5"></textarea>
+            </ng-container>
+            <ng-container>
+              <tb-protobuf-content
+                fxFlex
+                formControlName="deviceRpcResponseProtoSchema"
+                label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
+                [fillHeight]="true">
+              </tb-protobuf-content>
               <mat-error *ngIf="coapTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema').hasError('required')">
                 {{ 'device-profile.rpc-response-proto-schema-required' | translate}}
               </mat-error>
-            </mat-form-field>
+            </ng-container>
           </div>
         </div>
       </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index f12af60efc..d57783f17c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -104,7 +104,7 @@
               [fillHeight]="true">
             </tb-protobuf-content>
             <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema').hasError('required')">
-              {{ 'device-profile.rpc-request-proto-required' | translate}}
+              {{ 'device-profile.rpc-request-proto-schema-required' | translate}}
             </mat-error>
           </ng-container>
           <ng-container>
diff --git a/ui-ngx/src/app/shared/models/ace/ace.models.ts b/ui-ngx/src/app/shared/models/ace/ace.models.ts
index c9136b8e79..9a3c30766e 100644
--- a/ui-ngx/src/app/shared/models/ace/ace.models.ts
+++ b/ui-ngx/src/app/shared/models/ace/ace.models.ts
@@ -36,6 +36,7 @@ export function loadAceDependencies(): Observable<any> {
     aceObservables.push(from(import('ace-builds/src-noconflict/mode-text')));
     aceObservables.push(from(import('ace-builds/src-noconflict/mode-markdown')));
     aceObservables.push(from(import('ace-builds/src-noconflict/mode-html')));
+    aceObservables.push(from(import('ace-builds/src-noconflict/mode-c_cpp')));
     aceObservables.push(from(import('ace-builds/src-noconflict/mode-protobuf')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/java')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/css')));
@@ -44,6 +45,8 @@ export function loadAceDependencies(): Observable<any> {
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/text')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/markdown')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/html')));
+    aceObservables.push(from(import('ace-builds/src-noconflict/snippets/c_cpp')));
+    aceObservables.push(from(import('ace-builds/src-noconflict/snippets/protobuf')));
     aceObservables.push(from(import('ace-builds/src-noconflict/theme-textmate')));
     aceObservables.push(from(import('ace-builds/src-noconflict/theme-github')));
     return forkJoin(aceObservables).pipe(