diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
index e63b17f..a994da4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
@@ -1,5 +1,5 @@
 import { ResourceDictionary } from './ResourceDictionary.model';
-import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript';
+import { JsonObject, JsonProperty } from 'json2typescript';
 
 // Convert ResourceDictionary object to store Mapping.
 export class MappingAdapter {
@@ -14,17 +14,26 @@
         const mapping = new Mapping();
         mapping.name = this.resourceDictionary.name;
         mapping.dictionaryName = this.resourceDictionary.name;
+        // move all properties at once
         mapping.property = Object.assign({}, this.resourceDictionary.definition.property);
-        mapping.inputParam = this.resourceDictionary['input-param'] || false;
-        // tslint:disable-next-line: no-string-literal
-        mapping.property['required'] = this.resourceDictionary['required'] || false;
+        mapping.inputParam = this.resourceDictionary.definition.property['input-param'] || false;
+        // for reading
+        mapping.sources = this.resourceDictionary.definition.sources;
+        console.log(mapping.sources);
+        mapping.version = 0;
+        return mapping;
+    }
+
+    // Get the final object to save
+    finalize(mapping: Mapping): Mapping {
+
         mapping.dictionarySource = this.dependanciesSource.get(mapping.name);
         if (this.dependancies.get(mapping.name)) {
             mapping.dependencies = this.dependancies.get(mapping.name);
         } else {
             mapping.dependencies = [];
         }
-        mapping.version = 0;
+        delete mapping.sources;
         return mapping;
     }
 }
@@ -39,6 +48,8 @@
     inputParam: boolean;
     @JsonProperty('dictionary-name')
     dictionaryName: string;
+    @JsonProperty(true)
+    sources: string[];
     @JsonProperty('dictionary-source')
     dictionarySource: string;
     @JsonProperty()
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 2567895..7aaf1a3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -129,14 +129,14 @@
 
                 </div>
 
-                <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
+                <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
                     <div class="mat-elevation-z8">
                         <!--Edit Buttons-->
                         <div class="btn-group mapping-editBar" role="group">
                             <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
                                 <input type="checkbox" (click)="selectAllProps()" class="custom-control-input"
                                     id="customCheck1"
-                                    [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
+                                    [checked]="mappingRes.length>0&&mappingRes.length === this.selectedProps.size">
                                 <label class="custom-control-label" for="customCheck1"></label>
                             </div>
                             <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
@@ -146,10 +146,10 @@
                                     class="icon-delete-sm"></i></button>
                             <div style="line-height: 35px;font-size: 10px;">
                                 <span>{{selectedProps.size}} selected </span>
-                                <span>({{resourceDictionaryRes.length}} attributes in total)</span>
+                                <span>({{mappingRes.length}} attributes in total)</span>
                             </div>
                         </div>
-                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.resourceDictionaryRes.length]">
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]">
                         </mat-paginator>
                         <mat-form-field class="tableFilter float-right">
                             <mat-label>Filter</mat-label>
@@ -174,8 +174,8 @@
                                 <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #requiredInput
-                                            (click)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
-                                            id="requiredCheck-{{dict.name}}">
+                                            (ngModelChange)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
+                                            [ngModel]="dict?.property?.required" id="requiredCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
@@ -186,8 +186,8 @@
                                 <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #tempInput
-                                            (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
-                                            id="inputCheck-{{dict.name}}">
+                                            (ngModelChange)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
+                                            [ngModel]="dict['input-param']" id="inputCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
@@ -206,12 +206,15 @@
                             <ng-container matColumnDef="dictionary-source">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
                                 <td mat-cell *matCellDef="let dict">
-                                    <select class="custom-select" (click)="selectSource(dict,$event)">
-                                        <option *ngFor="let val of dict.definition.sources | keyvalue">
+                                    <select *ngIf="dict.sources" class="custom-select"
+                                        (click)="selectSource(dict,$event)">
+                                        <option *ngFor="let val of dict.sources | keyvalue">
                                             {{initMap(dict.name,val)}}
                                         </option>
-
                                     </select>
+                                    <input [disabled]="true" *ngIf="!dict.sources" type="text" class="form-control"
+                                        [ngModel]="dict['dictionary-source']">
+
                                 </td>
                             </ng-container>
                             <!-- Dependancies Column -->
@@ -224,7 +227,7 @@
                             <!-- Default Column -->
                             <ng-container matColumnDef="default">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
-                                <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td>
+                                <td mat-cell *matCellDef="let dict"> {{ dict?.property?.default }} </td>
                             </ng-container>
                             <!-- Velocity Column -->
                             <ng-container matColumnDef="Velocity">
@@ -237,12 +240,13 @@
                             <!-- Data Type Column -->
                             <ng-container matColumnDef="Data Type">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
-                                <td mat-cell *matCellDef="let dict"> {{  dict.definition?.property?.type  }} </td>
+                                <td mat-cell *matCellDef="let dict"> {{  dict?.property?.type  }} </td>
                             </ng-container>
                             <!-- Entry Schema Column -->
                             <ng-container matColumnDef="Entry Schema">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td>
+                                <td mat-cell *matCellDef="let dict"> {{objectToString(dict?.property['entry_schema'])}}
+                                </td>
                             </ng-container>
                             <tr mat-header-row *matHeaderRowDef="initColumn"></tr>
                             <tr mat-row *matRowDef="let row; columns: initColumn;"></tr>
@@ -253,93 +257,6 @@
                         </table>
                     </div>
                 </div>
-                <!------ View Table------->
-                <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
-                    <div class="mat-elevation-z8">
-                        <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
-                        <mat-form-field class="tableFilter float-right">
-                            <mat-label>Filter</mat-label>
-                            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
-                        </mat-form-field>                        
-                        <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort>
-                            <!-- Required Column -->
-                            <ng-container matColumnDef="Required">
-                                <th mat-header-cell *matHeaderCellDef> Required </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg">
-                                    <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg">
-                                </td>
-                            </ng-container>
-                            <!-- Template Input Column -->
-                            <ng-container matColumnDef="Template Input">
-                                <th mat-header-cell *matHeaderCellDef> Template Input </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg">
-                                    <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg">
-                                </td>
-                            </ng-container>
-                            <!-- Parameter Name Column -->
-                            <ng-container matColumnDef="name">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
-                            </ng-container>
-                            <!-- Dictionary Name Column -->
-                            <ng-container matColumnDef="Dictionary Name">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
-                            </ng-container>
-                            <!-- Dictionary Source Column -->
-                            <ng-container matColumnDef="dictionary-source">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <input type="text" class="form-control" [value]="dict['dictionary-source']"
-                                        disabled>
-                                </td>
-                            </ng-container>
-                            <!-- Dependancies Column -->
-                            <ng-container matColumnDef="dependencies">
-                                <th mat-header-cell *matHeaderCellDef> Dependancies </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <input type="text" class="form-control" [value]="dict['dependencies']" disabled>
-                                </td>
-                            </ng-container>
-                            <!-- default Column -->
-                            <ng-container matColumnDef="default">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td>
-                            </ng-container>
-                            <!-- Velocity Column -->
-                            <ng-container matColumnDef="Velocity">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <span *ngIf="dict?.property?.metadata">
-                                        {{dict?.property?.metadata['transform-template']}}
-                                    </span>
-                                    <span *ngIf="!dict?.property?.metadata"></span>
-                                </td>
-
-
-
-                            </ng-container>
-                            <!-- Data Type Column -->
-                            <ng-container matColumnDef="Data Type">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
-                                <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td>
-                            </ng-container>
-                            <!-- Entry Schema Column -->
-                            <ng-container matColumnDef="Entry Schema">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td>
-                            </ng-container>
-                            <tr mat-header-row *matHeaderRowDef="resColumns"></tr>
-                            <tr mat-row *matRowDef="let row; columns: resColumns;"></tr>
-                            <!-- Row shown when there is no matching data. -->
-                            <tr class="mat-row" *matNoDataRow>
-                                <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index a26f3b9..4087dee 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -51,7 +51,7 @@
     templateExt = 'vtl';
     dependancies = new Map<string, Array<string>>();
     dependanciesSource = new Map<string, string>();
-    mappingRes = [];
+    mappingRes: Mapping[] = [];
     currentTemplate: any;
     currentMapping: any;
     edit = false;
@@ -73,9 +73,6 @@
     // displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
     dataSource: MatTableDataSource<{}>;
     initDataSource: MatTableDataSource<{}>;
-    // dataSource = new MatTableDataSource();
-    @ViewChild('paginate', { static: true }) paginator: MatPaginator;
-    @ViewChild('sort', { static: true }) sort: MatSort;
     @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator;
     @ViewChild(MatSort, { static: true }) initSort: MatSort;
 
@@ -93,8 +90,6 @@
 
     ngAfterViewInit() {
         try {
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
             this.initDataSource.paginator = this.initPaginator;
             this.initDataSource.sort = this.initSort;
         } catch (e) { }
@@ -115,16 +110,12 @@
                 this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('-'));
             }
             if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) {
+                console.log(templateInfo.mapping);
                 this.mappingRes = templateInfo.mapping;
                 this.currentMapping = Object.assign({}, templateInfo);
                 this.resourceDictionaryRes = [];
                 // Assign the data to the data source for the table to render
-                this.dataSource = new MatTableDataSource(this.mappingRes);
-                //   this.cdr.detectChanges();
-                this.dataSource.paginator = this.paginator;
-                this.dataSource.sort = this.sort;
-
-
+                this.rerender();
             } else {
                 this.mappingRes = [];
                 this.currentMapping = Any;
@@ -165,9 +156,22 @@
 
     }
 
+    initApplyFilter(event: Event) {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.initDataSource.filter = filterValue.trim().toLowerCase();
+        if (this.initDataSource.paginator) {
+            this.initDataSource.paginator.firstPage();
+        }
+    }
     setProp(e, propName, index) {
-        this.resourceDictionaryRes[index][propName] = e.checked;
-        console.log(this.resourceDictionaryRes[index]);
+        if (propName === 'input-param') {
+            this.mappingRes[index][propName] = e.checked;
+
+        } else {
+            // tslint:disable-next-line: no-string-literal
+            this.mappingRes[index]['property'][propName] = e.checked;
+        }
+        //  console.log(this.mappingRes[index]);
     }
     selectProp(value) {
         console.log(value);
@@ -178,29 +182,13 @@
         }
     }
 
-    applyFilter(event: Event) {
-        const filterValue = (event.target as HTMLInputElement).value;
-        this.dataSource.filter = filterValue.trim().toLowerCase();
-        if (this.dataSource.paginator) {
-            this.dataSource.paginator.firstPage();
-        }
-    }
-
-    initApplyFilter(event: Event) {
-        const filterValue = (event.target as HTMLInputElement).value;
-        this.initDataSource.filter = filterValue.trim().toLowerCase();
-        if (this.initDataSource.paginator) {
-            this.initDataSource.paginator.firstPage();
-        }
-    }
-
     removeProps() {
         console.log(this.selectedProps);
         this.selectedProps.forEach(prop => {
-            this.resourceDictionaryRes.forEach((res, index) => {
+            this.mappingRes.forEach((res, index) => {
                 if (res.name === prop) {
                     console.log('delete...');
-                    this.resourceDictionaryRes.splice(index, 1);
+                    this.mappingRes.splice(index, 1);
                     this.selectedProps.delete(prop);
                     this.rerender();
                 }
@@ -208,11 +196,12 @@
         });
     }
     selectAllProps() {
-        if (this.resourceDictionaryRes.length === this.selectedProps.size) {
+        // if all items are already selected, unselect them
+        if (this.mappingRes.length === this.selectedProps.size) {
             this.selectedProps = new Set<string>();
         } else {
-            this.resourceDictionaryRes.forEach(prop => {
-                console.log(prop);
+            this.mappingRes.forEach(prop => {
+                // console.log(prop);
                 this.selectedProps.add(prop.name);
             });
         }
@@ -224,8 +213,8 @@
             console.log('base');
             this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => {
                 let message = 'Re-Auto mapping';
-                this.mappingRes = [];
-                currentResDictionary = res;
+                //  this.mappingRes = [];
+                currentResDictionary = this.convertDictionaryToMap(res);
                 console.log(currentResDictionary);
                 if (currentResDictionary && currentResDictionary.length <= 0) {
                     message = 'No values for those attributes';
@@ -233,14 +222,15 @@
 
                 // Replcae new values with the old ones
                 currentResDictionary.forEach(curr => {
-                    for (let i = 0; i < this.resourceDictionaryRes.length; i++) {
-                        if (this.resourceDictionaryRes[i].name === curr.name) {
-                            this.resourceDictionaryRes[i] = curr;
+                    for (let i = 0; i < this.mappingRes.length; i++) {
+                        if (this.mappingRes[i].name === curr.name) {
+                            this.mappingRes[i] = curr;
                         }
                     }
                 });
                 this.rerender();
                 this.toastr.success(message, 'Success');
+                this.selectedProps = new Set();
             }, err => {
                 this.toastr.error('Error');
             });
@@ -346,6 +336,17 @@
         return mapArray;
     }
 
+    private finalMapping(mappingArray: Mapping[]): Mapping[] {
+        const mapArray: Mapping[] = [];
+        for (const mapping of mappingArray) {
+            this.MappingAdapter = new MappingAdapter(null, this.dependancies, this.dependanciesSource);
+            mapArray.push(this.MappingAdapter.finalize(mapping));
+            console.log(mapping);
+        }
+        console.log(mapArray);
+        return mapArray;
+    }
+
     setTemplateFilesToStore() {
         for (const droppedFile of this.uploadedFiles) {
             droppedFile.file((file: File) => {
@@ -393,10 +394,8 @@
         return item.name;
     }
     setVelocity(index, value) {
-        // console.log('velocity value = ' + value);
-        // console.log(this.resourceDictionaryRes[index]);
         // tslint:disable-next-line: no-string-literal
-        this.resourceDictionaryRes[index].definition.property['metadata'] = {
+        this.mappingRes[index].property['metadata'] = {
             'transform-template': value
         };
         console.log(this.resourceDictionaryRes[index]);
@@ -417,6 +416,8 @@
                 this.mappingRes = [];
                 this.resourceDictionaryRes = res;
                 console.log(this.resourceDictionaryRes);
+                this.mappingRes = this.convertDictionaryToMap(this.resourceDictionaryRes);
+                console.log(this.mappingRes);
                 this.rerender();
                 if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) {
                     message = 'No values for those attributes';
@@ -448,6 +449,13 @@
     cancel() {
         this.openListView();
     }
+
+    objectToString(object) {
+        if (object) {
+            return JSON.stringify(object);
+        }
+        return '';
+    }
     saveToStore() {
         const filename = this.fileName;
         if (filename) {
@@ -455,16 +463,23 @@
             console.log('----------- mode ' + this.edit);
             const fileContent = this.templateFileContent;
             if (
-                (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json')
-                    || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension())))
+                (!(this.packageCreationStore.fileExist('Templates/' + filename + '-mapping.json')
+                    || this.packageCreationStore.fileExist('Templates/' + filename + '-template' + this.getFileExtension())))
                 || this.edit
             ) {
                 // Save Mapping to Store
-                if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) {
-                    const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
-                    this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json',
-                        this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
-                    this.resourceDictionaryRes = [];
+                if (this.mappingRes && this.mappingRes.length > 0) {
+                    const mapArray = this.finalMapping(this.mappingRes);
+                    console.log(mapArray);
+                    //  this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)))
+                    if (this.edit) {
+                        this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json',
+                            JSON.stringify(mapArray));
+                    } else {
+                        this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json',
+                            this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
+                    }
+                    this.mappingRes = [];
                 }
                 // Save Template to store
                 // if (this.templateFileContent) {
@@ -493,7 +508,7 @@
         let keyDepend = null;
         this.dependancies.set(dict.name, null);
         try {
-            keyDepend = dict.definition.sources[source].properties['key-dependencies'] || null;
+            keyDepend = dict.sources[source].properties['key-dependencies'] || null;
         } catch (e) { }
         console.log(dict);
         console.log(source);
@@ -517,13 +532,12 @@
     }
 
     rerender(): void {
-        this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes);
-        //   this.cdr.detectChanges();
+        this.initDataSource = new MatTableDataSource(this.mappingRes);
         /*
         Hint: the intial page size for the table will be the result size; I did that because the table doesn't load element in DOM,
         as result some function are not working well like save and you have to move to other pages to fix that.
         */
-        this.initPaginator.pageSize = this.resourceDictionaryRes.length;
+        this.initPaginator.pageSize = this.mappingRes.length;
         this.initDataSource.paginator = this.initPaginator;
         this.initDataSource.sort = this.initSort;
     }
@@ -536,14 +550,3 @@
     }
 }
 
-class DependancyVal {
-    source: string;
-    keyDepend: any;
-    constructor(
-        source: string,
-        keyDepend: any
-    ) {
-        this.source = source;
-        this.keyDepend = keyDepend;
-    }
-}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts
index 977bf97..f0b99bf 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts
@@ -25,16 +25,17 @@
 
 
     ngAfterViewInit() {
-
         console.log(this.lang);
         this.editor.setTheme('eclipse');
         this.editor.getEditor().setOptions({
             enableBasicAutocompletion: true,
             highlightSelectedWord: true,
-            maxLines: Infinity,
             enableSnippets: true,
             enableLiveAutocompletion: true,
             showFoldWidgets: true,
+            maxLines: 900000,
+            // autoScrollEditorIntoView: true,
+            // vScrollBarAlwaysVisible: true
         });
 
         this.editor.getEditor().commands.addCommand({
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 8b576db..0a3a4cc 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -2938,6 +2938,11 @@
   position: absolute;
   top: 13px;
 }
+/* -------- ace editor style -------- */
+.editor-container{
+  height: 55vh !important;
+  overflow: scroll;
+}
 .ace_print-margin{
   left: 100% !important;
   background: #eee !important;
@@ -2946,7 +2951,7 @@
   width: 100% !important;
 }
 .ace_editor{
-  height: 55vh !important;
+  /* height: 55vh !important; */
   line-height: 25px;
   border: 1px solid #ECEDF2;
   background-color: #fff;
@@ -2967,6 +2972,7 @@
 .ace-tm .ace_marker-layer .ace_active-line{
   background: #F4F9FE !important;
 }
+/* -------- end of ace editor style -------- */
 .breadcrumb-header{
   padding: 0px;
   margin: 0px;