diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts
index 9a9f59b5..baf862d8 100644
--- a/openvidu-testapp/src/app/app.module.ts
+++ b/openvidu-testapp/src/app/app.module.ts
@@ -26,12 +26,13 @@ import { PublisherPropertiesDialogComponent } from './components/dialogs/publish
 import { ScenarioPropertiesDialogComponent } from './components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component';
 import { FilterDialogComponent } from './components/dialogs/filter-dialog/filter-dialog.component';
 import { ShowCodecDialogComponent } from './components/dialogs/show-codec-dialog/show-codec-dialog.component';
+import { RecordingPropertiesComponent } from './components/dialogs/recording-properties/recording-properties.component';
 
 import { OpenviduRestService } from './services/openvidu-rest.service';
 import { OpenviduParamsService } from './services/openvidu-params.service';
 import { TestFeedService } from './services/test-feed.service';
 import { MuteSubscribersService } from './services/mute-subscribers.service';
-import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dialog/session-info-dialog.component";
+import { SessionInfoDialogComponent } from "./components/dialogs/session-info-dialog/session-info-dialog.component";
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dial
     SessionPropertiesDialogComponent,
     SessionApiDialogComponent,
     EventsDialogComponent,
+    RecordingPropertiesComponent,
     LocalRecordingDialogComponent,
     PublisherPropertiesDialogComponent,
     ScenarioPropertiesDialogComponent,
diff --git a/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.css b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.css
new file mode 100644
index 00000000..76251b3b
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.css
@@ -0,0 +1,42 @@
+.inner-text-input {
+  margin-left: 9px;
+  width: 30%;
+}
+
+#rec-properties-btn {
+  padding-left: 0;
+  padding-right: 0;
+  display: inline-block;
+}
+
+#rec-properties-div {
+  background-color: #f7f7f7;
+  margin-bottom: 10px;
+  padding: 10px 5px 0 5px;
+  border: 1px solid #00000026;
+  border-radius: 3px;
+}
+
+#rec-properties-div mat-form-field {
+  max-width: 150px;
+}
+
+#rec-properties-div mat-checkbox {
+  margin-left: 10px;
+}
+
+#recording-resolution-form {
+  max-width: 100px !important;
+}
+
+.label {
+  display: block;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 400;
+  margin-bottom: 5px;
+}
+
+mat-checkbox {
+  font-size: 14px;
+}
diff --git a/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.html b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.html
new file mode 100644
index 00000000..a7d9461f
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.html
@@ -0,0 +1,50 @@
+<div id="rec-properties-div">
+  <label class="label">Recording properties</label>
+  <div>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
+    </mat-form-field>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
+        <mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
+          <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div class="inner-text-input mat-form-field">
+      <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
+      <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
+    </div>
+  </div>
+  <div
+    *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')">
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <mat-select placeholder="Recording layout" id="recording-layout-select"
+        [(ngModel)]="recordingProperties.recordingLayout">
+        <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
+          <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field *ngIf="recordingProperties.recordingLayout === 'CUSTOM'" class="inner-text-input"
+      [style.fontSize.px]=14>
+      <input matInput placeholder="Custom layout" id="custom-layout-input" type="text" [(ngModel)]="recordingProperties.customLayout">
+    </mat-form-field>
+    <mat-form-field id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
+        [(ngModel)]="recordingProperties.resolution">
+    </mat-form-field>
+    <mat-form-field id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
+        [(ngModel)]="recordingProperties.frameRate">
+    </mat-form-field>
+    <mat-form-field id="recording-shmsize-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-shmsize-field" placeholder="Shmsize" type="number"
+        [(ngModel)]="recordingProperties.shmSize">
+    </mat-form-field>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-media-node-field" placeholder="Media Node"
+        [(ngModel)]="recordingProperties.mediaNode.id">
+    </mat-form-field>
+  </div>
+</div>
diff --git a/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.ts b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.ts
new file mode 100644
index 00000000..1065ed8e
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Recording, RecordingLayout, RecordingProperties } from 'openvidu-node-client';
+
+@Component({
+    selector: 'app-recording-properties',
+    templateUrl: './recording-properties.component.html',
+    styleUrls: ['./recording-properties.component.css']
+})
+export class RecordingPropertiesComponent {
+
+    recMode = Recording.OutputMode;
+    recLayouts = RecordingLayout;
+
+    getRecordingProperties: RecordingProperties;
+    @Output() recordingPropertiesChange: EventEmitter<RecordingProperties> = new EventEmitter<RecordingProperties>();
+
+    @Input()
+    get recordingProperties(): RecordingProperties {
+        return this.getRecordingProperties;
+    }
+
+    set recordingProperties(value: RecordingProperties) {
+        this.getRecordingProperties = value;
+        this.recordingPropertiesChange.emit(this.getRecordingProperties);
+    }
+
+    enumToArray(enumerator: any) {
+        return Object.keys(enumerator);
+    }
+
+}
diff --git a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css
index 5ff30ddb..2392bfd3 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css
+++ b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css
@@ -33,29 +33,3 @@ mat-dialog-content button {
   margin-left: 9px;
   width: 30%;
 }
-
-#rec-properties-btn {
-  padding-left: 0;
-  padding-right: 0;
-  display: inline-block;
-}
-
-#rec-properties-div {
-  background-color: #f7f7f7;
-  margin-bottom: 10px;
-  padding: 10px 5px 0 5px;
-  border: 1px solid #00000026;
-  border-radius: 3px;
-}
-
-#rec-properties-div mat-form-field {
-  max-width: 150px;
-}
-
-#rec-properties-div mat-checkbox {
-  margin-left: 16px;
-}
-
-#recording-resolution-form {
-  max-width: 100px !important;
-}
diff --git a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html
index 6dc24762..2e3265f7 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html
+++ b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html
@@ -42,66 +42,22 @@
     </div>
 
     <label class="label">Recordings</label>
-    <button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
-    <button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
-    <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
-      title="Recording properties" (click)="toggleRecProperties()">
-      <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">
-        {{recPropertiesIcon}}</mat-icon>
-    </button>
-    <div *ngIf="showRecProperties" id="rec-properties-div">
-      <div>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-media-node-field" placeholder="Media Node"
-            [(ngModel)]="recordingProperties.mediaNode.id">
-        </mat-form-field>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
-        </mat-form-field>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
-            <mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div
-        *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-        id="rec-layout-div">
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
-            <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
-              {{ enumerator }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout === 'CUSTOM'"
-          class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
-        </mat-form-field>
-      </div>
-      <div>
-        <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
-        <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
-        <mat-form-field
-          *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-          id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
-            [(ngModel)]="recordingProperties.resolution">
-        </mat-form-field>
-        <mat-form-field
-          *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-          id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
-            [(ngModel)]="recordingProperties.frameRate">
-        </mat-form-field>
-      </div>
-    </div>
-    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-      <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
-    </mat-form-field>
     <div>
+      <button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
+      <button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
+      <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
+        title="Recording properties" (click)="toggleRecProperties()">
+        <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
+          aria-label="Recording properties">
+          {{recPropertiesIcon}}</mat-icon>
+      </button>
+      <app-recording-properties *ngIf="showRecProperties" [(recordingProperties)]="recordingProperties">
+      </app-recording-properties>
+    </div>
+    <div>
+      <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+        <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
+      </mat-form-field>
       <button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
         recording</button>
       <button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get
diff --git a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts
index 537ae291..c53dc2e2 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts
+++ b/openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
-import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
+import { OpenVidu as OpenViduAPI, Session as SessionAPI, RecordingProperties, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
 
 @Component({
     selector: 'app-session-api-dialog',
@@ -19,8 +19,6 @@ export class SessionApiDialogComponent {
     response: string;
 
     recordingProperties: RecordingProperties;
-    recMode = Recording.OutputMode;
-    recLayouts = RecordingLayout;
     openviduRoles = OpenViduRole;
     customLayout = '';
     recPropertiesIcon = 'add_circle';
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
index d151819b..2657ce01 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css
@@ -1,47 +1,52 @@
 mat-radio-button {
-    margin-left: 5px;
-    font-size: 14px;
+  margin-left: 5px;
+  font-size: 14px;
 }
 
 mat-radio-button:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .label {
-    display: block;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.54);
-    font-weight: 400;
-    margin-bottom: 5px;
+  display: block;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 400;
+  margin-bottom: 5px;
 }
 
 #turn-div {
-    padding-bottom: 1.25em;
+  padding-bottom: 1.25em;
 }
 
 #turn-div mat-radio-button {
-    display: block;
-    margin-left: 0;
-    margin-bottom: 3px;
+  display: block;
+  margin-left: 0;
+  margin-bottom: 3px;
 }
 
 #manual-turn-div {
-    background-color: #f7f7f7;
-    margin-top: 10px;
-    padding: 5px;
-    border: 1px solid #00000026;
-    border-radius: 3px;
+  background-color: #f7f7f7;
+  margin-top: 10px;
+  padding: 5px;
+  border: 1px solid #00000026;
+  border-radius: 3px;
 }
 
 #role-div {
-    padding-top: 6px;
-    padding-bottom: 15px;
+  padding-top: 6px;
+  padding-bottom: 15px;
 }
 
-#allow-transcoding-div {
+#allow-transcoding-checkbox-div {
+  margin-top: 20px;
   margin-bottom: 10px;
 }
 
 #record-div {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
+}
+
+mat-form-field {
+  margin-right: 9px;
 }
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
index 67929ffa..e340667f 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
@@ -1,149 +1,136 @@
-<div>
-  <div fxLayout="row" fxLayoutGap="20px">
+<mat-dialog-content>
+
+  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="space-between">
+
     <div>
       <h2 mat-dialog-title>Session properties</h2>
-      <mat-dialog-content>
-        <mat-form-field>
-          <mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
-            <mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
-              {{ enumerator }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
-            id="recording-mode-select">
-            <mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-select placeholder="DefaultOutputMode" [(ngModel)]="sessionProperties.defaultRecordingProperties.outputMode"
-            id="output-mode-select">
-            <mat-option *ngFor="let enumerator of enumToArray(defaultOutputMode)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field *ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED'">
-          <mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingProperties.recordingLayout"
-            id="recording-layout-select">
-            <mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field
-          *ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED' && this.sessionProperties.defaultRecordingProperties.recordingLayout === 'CUSTOM'">
-          <input matInput placeholder="DefaultCustomLayout" type="text"
-            [(ngModel)]="sessionProperties.defaultRecordingProperties.customLayout" id="default-custom-layout-input">
-        </mat-form-field>
-        <div id="allow-transcoding-div">
-          <mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
-                        id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
+      <mat-form-field>
+        <mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
+          <mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
+            {{ enumerator }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
+          id="recording-mode-select">
+          <mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
+            <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <app-recording-properties [(recordingProperties)]="sessionProperties.defaultRecordingProperties">
+      </app-recording-properties>
+
+      <div id="allow-transcoding-checkbox-div">
+        <mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
+          id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
+      </div>
+      <mat-form-field>
+        <mat-select placeholder="ForcedVideoCodec" [(ngModel)]="sessionProperties.forcedVideoCodec"
+          id="forced-video-codec-select">
+          <mat-option *ngFor="let enumerator of enumToArray(forceVideoCodec)" [value]="enumerator">
+            <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
+      </mat-form-field>
+
+      <label class="label">Turn configuration</label>
+      <div id="turn-div">
+        <mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
+          <mat-radio-button value="auto">Auto</mat-radio-button>
+          <mat-radio-button value="freeice">Freeice</mat-radio-button>
+          <mat-radio-button value="manual">Manual</mat-radio-button>
+        </mat-radio-group>
+        <div *ngIf="turnConf === 'manual'" id="manual-turn-div">
+          <mat-form-field style="width: 100%">
+            <input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
+          </mat-form-field>
+          <mat-form-field style="width: 48%; padding-right: 2px">
+            <input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
+          </mat-form-field>
+          <mat-form-field style="width: 48%; padding-left: 2px">
+            <input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
+          </mat-form-field>
         </div>
-        <mat-form-field>
-          <mat-select placeholder="ForcedVideoCodec" [(ngModel)]="sessionProperties.forcedVideoCodec"
-                      id="forced-video-codec-select">
-            <mat-option *ngFor="let enumerator of enumToArray(forceVideoCodec)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-          <input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
-        </mat-form-field>
-        <label class="label">Turn configuration</label>
-        <div id="turn-div">
-          <mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
-            <mat-radio-button value="auto">Auto</mat-radio-button>
-            <mat-radio-button value="freeice">Freeice</mat-radio-button>
-            <mat-radio-button value="manual">Manual</mat-radio-button>
-          </mat-radio-group>
-          <div *ngIf="turnConf === 'manual'" id="manual-turn-div">
-            <mat-form-field style="width: 100%">
-              <input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
-            </mat-form-field>
-            <mat-form-field style="width: 48%; padding-right: 2px">
-              <input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
-            </mat-form-field>
-            <mat-form-field style="width: 48%; padding-left: 2px">
-              <input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
-            </mat-form-field>
-          </div>
-        </div>
-      </mat-dialog-content>
+      </div>
+
     </div>
+
     <div>
       <h2 mat-dialog-title>User configuration</h2>
-      <mat-dialog-content>
-        <label class="label">Role</label>
-        <div id="role-div">
-          <mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
-            <mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
-            <mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
-            <mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
-          </mat-radio-group>
-        </div>
 
-        <label class="label" style="margin-bottom: 8px">Kurento config</label>
-        <div id="kurento-config-div">
-          <mat-form-field style="width: 39%; margin-right: 5px">
-            <input matInput placeholder="Max recv" type="number"
-              [(ngModel)]="connectionProperties.kurentoOptions.videoMaxRecvBandwidth">
-          </mat-form-field>
-          <mat-form-field style="width: 39%">
-            <input matInput placeholder="Min recv" type="number"
-              [(ngModel)]="connectionProperties.kurentoOptions.videoMinRecvBandwidth">
-          </mat-form-field>
-          <mat-form-field style="width: 39%; margin-right: 5px">
-            <input matInput placeholder="Max send" type="number"
-              [(ngModel)]="connectionProperties.kurentoOptions.videoMaxSendBandwidth">
-          </mat-form-field>
-          <mat-form-field style="width: 39%">
-            <input matInput placeholder="Min send" type="number"
-              [(ngModel)]="connectionProperties.kurentoOptions.videoMinSendBandwidth">
-          </mat-form-field>
-          <mat-chip-list *ngIf="filters.length > 0">
-            <mat-chip style="height: 20px" *ngFor="let filterName of filters"
-              (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
-          </mat-chip-list>
-          <mat-form-field style="width: 70%">
-            <input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
-          </mat-form-field>
-          <button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
-            title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
-            <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
-              aria-label="Add allowed filter">add_circle</mat-icon>
-          </button>
-        </div>
+      <label class="label">Role</label>
+      <div id="role-div">
+        <mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
+          <mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
+          <mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
+          <mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
+        </mat-radio-group>
+      </div>
 
-        <div id="record-div">
-          <mat-checkbox class="checkbox-form" [(ngModel)]="connectionProperties.record" id="record-checkbox">Record
-          </mat-checkbox>
-        </div>
+      <label class="label" style="margin-bottom: 8px">Kurento config</label>
+      <div id="kurento-config-div">
+        <mat-form-field style="width: 39%; margin-right: 5px">
+          <input matInput placeholder="Max recv" type="number"
+            [(ngModel)]="connectionProperties.kurentoOptions.videoMaxRecvBandwidth">
+        </mat-form-field>
+        <mat-form-field style="width: 39%">
+          <input matInput placeholder="Min recv" type="number"
+            [(ngModel)]="connectionProperties.kurentoOptions.videoMinRecvBandwidth">
+        </mat-form-field>
+        <mat-form-field style="width: 39%; margin-right: 5px">
+          <input matInput placeholder="Max send" type="number"
+            [(ngModel)]="connectionProperties.kurentoOptions.videoMaxSendBandwidth">
+        </mat-form-field>
+        <mat-form-field style="width: 39%">
+          <input matInput placeholder="Min send" type="number"
+            [(ngModel)]="connectionProperties.kurentoOptions.videoMinSendBandwidth">
+        </mat-form-field>
+        <mat-chip-list *ngIf="filters.length > 0">
+          <mat-chip style="height: 20px" *ngFor="let filterName of filters"
+            (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
+        </mat-chip-list>
+        <mat-form-field style="width: 70%">
+          <input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
+        </mat-form-field>
+        <button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
+          title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
+          <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
+            aria-label="Add allowed filter">
+            add_circle</mat-icon>
+        </button>
+      </div>
 
-        <label class="label">Token</label>
-        <div id="custom-token-div">
-          <mat-form-field>
-            <input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
-          </mat-form-field>
-        </div>
+      <div id="record-div">
+        <mat-checkbox class="checkbox-form" [(ngModel)]="connectionProperties.record" id="record-checkbox">Record
+        </mat-checkbox>
+      </div>
 
-        <div id="force-publishing-div">
-          <mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
-            publishing
-          </mat-checkbox>
-        </div>
+      <label class="label">Token</label>
+      <div id="custom-token-div">
+        <mat-form-field>
+          <input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
+        </mat-form-field>
+      </div>
+
+      <div id="force-publishing-div">
+        <mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
+          publishing
+        </mat-checkbox>
+      </div>
 
-      </mat-dialog-content>
     </div>
-  </div>
 
-  <mat-dialog-actions>
-    <button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
-    <button id="save-btn" mat-button
-      [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
-  </mat-dialog-actions>
-</div>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
+  <button id="save-btn" mat-button
+    [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
+</mat-dialog-actions>
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
index d63c381c..e36339df 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
@@ -93,9 +93,18 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     mediaMode: MediaMode.ROUTED,
     recordingMode: RecordingMode.MANUAL,
     defaultRecordingProperties: {
+      name: '',
+      hasAudio: true,
+      hasVideo: true,
       outputMode: Recording.OutputMode.COMPOSED,
       recordingLayout: RecordingLayout.BEST_FIT,
-      customLayout: ''
+      resolution: '1280x720',
+      frameRate: 25,
+      shmSize: 536870912,
+      customLayout: '',
+      mediaNode: {
+        id: ''
+      }
     },
     customSessionId: '',
     forcedVideoCodec: null,
@@ -600,8 +609,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         customToken: this.customToken,
         forcePublishing: this.forcePublishing,
         connectionProperties: this.connectionProperties,
-      },
-      width: '450px'
+      }
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -626,22 +634,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         openVidu: !!this.OV_NodeClient ? this.OV_NodeClient : new OpenViduAPI(this.openviduUrl, this.openviduSecret),
         session: this.sessionAPI,
         sessionId: !!this.session ? this.session.sessionId : this.sessionName,
-        recordingProperties: !!this.recordingProperties ? this.recordingProperties :
-          {
-            name: '',
-            outputMode: this.sessionProperties.defaultRecordingProperties.outputMode,
-            recordingLayout: this.sessionProperties.defaultRecordingProperties.recordingLayout,
-            customLayout: this.sessionProperties.defaultRecordingProperties.customLayout,
-            resolution: '1280x720',
-            frameRate: 25,
-            hasAudio: true,
-            hasVideo: true,
-            mediaNode: {
-              id: ''
-            }
-          }
+        recordingProperties: !!this.recordingProperties ? this.recordingProperties : this.sessionProperties.defaultRecordingProperties
       },
-      width: '425px',
       disableClose: true
     });