diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 0a43364..47ed050 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -96,7 +96,7 @@
             masterLoaderId: 'master',
             overlayBorderRadius: '0',
             overlayColor: 'rgba(40, 40, 40, 0.8)',
-            pbColor: 'red',
+            pbColor: '#63bdba',
             pbDirection: 'ltr',
             pbThickness: 3,
             hasProgressBar: true,
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
index 609b066..2642088 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -20,13 +20,14 @@
 
 export class MetaData {
     public name: string;
-    public tags: string;
     public dataType: string;
     public description: string;
     public entrySchema: string;
     public updatedBy: string;
+    public tags: string;
+    public required: string;
+
     public createdDate: string;
     public libraryInstance: string;
-    public required: string;
     public derivedFrom: string;
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
index df90e6c..445be20 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
@@ -32,6 +32,9 @@
 
   getSources() {
     return this.api.get(ResourceDictionaryURLs.getSources);
-}
+  }
 
+  save(metadata) {
+    return this.api.post(ResourceDictionaryURLs.saveResourceDictionary, { ...metadata });
+  }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
index 20cec74..5734d40 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
@@ -29,11 +29,14 @@
     providedIn: 'root'
 })
 export class DictionaryCreationStore extends Store<ResourceDictionary> {
-    constructor(private dictionaryCreationService: DictionaryCreationService, private sourcesStore: SourcesStore) {
+    constructor(
+        private dictionaryCreationService: DictionaryCreationService,
+        private sourcesStore: SourcesStore
+    ) {
         super(new ResourceDictionary());
     }
-
-    changeMetaData(metaDataObject: MetaData) {
+    // changeMetaData(metaDataObject: MetaData) {
+    changeMetaData(metaDataObject: any) {
         console.log(metaDataObject);
         this.setState({
             ...this.state,
@@ -43,7 +46,7 @@
 
     getSources() {
         this.sourcesStore.state$.subscribe(data => {
-        console.log(data);
+            console.log(data);
         });
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
index 93d7df7..c0cb818 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
@@ -17,6 +17,6 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */-->
-<ace-editor [(text)]="text" [mode]="'javascript'" [autoUpdateContent]="true"
-[durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:500px;">
-</ace-editor>
+<ace-editor [(text)]="text" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
+    (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:500px;">
+</ace-editor>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
index 157a5aa..63725a2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
@@ -18,6 +18,8 @@
 * ============LICENSE_END=========================================================
 */
 import { Component, OnInit } from '@angular/core';
+import { DictionaryCreationService } from '../dictionary-creation.service';
+import { DictionaryCreationStore } from '../dictionary-creation.store';
 
 @Component({
   selector: 'app-dictionary-editor',
@@ -26,14 +28,18 @@
 })
 export class DictionaryEditorComponent implements OnInit {
   text = '';
-  constructor() {
+  constructor(
+    private dictionaryStore: DictionaryCreationStore,
+    private dictionaryService: DictionaryCreationService
+  ) {
   }
 
   ngOnInit() {
   }
 
   textChanged(event) {
-    console.log(event);
+    console.log(JSON.parse(event));
+    this.dictionaryStore.changeMetaData(JSON.parse(event));
   }
 }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
index aa975f8..caeac83 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
@@ -73,6 +73,7 @@
     }
 
     saveMetaDataToStore() {
-        this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
+        console.log(this.metaDataTab);
+     //   this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
index bf18321..637c87d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
@@ -33,12 +33,12 @@
             </div>
         </header>
         <div class="container-fluid body-container">
-                <div class="container card creat-card col-11">
-                    <div class="single-line-model customKeyTitle">
-                        <h5 class="label-name w-100 ">
-                            Dictionary Name
-                        </h5>
-                        <!-- <label class="label-name"></label> -->
+            <div class="container card creat-card col-11">
+                <div class="single-line-model customKeyTitle">
+                    <h5 class="label-name w-100 ">
+                        Dictionary Name
+                    </h5>
+                    <!-- <label class="label-name"></label> -->
                     <span>Last modified {{createDate}} by me</span>
                 </div>
             </div>
@@ -46,7 +46,7 @@
         <div class="container-fluid body-container">
             <div class="container">
                 <div class="creat-action-container">
-                    <a class="action-button" (click)="saveDictionaryToStore()">
+                    <a class="action-button" (click)="createDictionary()">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </a>
@@ -69,54 +69,55 @@
                         <div class="nav nav-tabs ed" id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
                                 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
-                                autofocus #nameit (focusout)="test()">METADATA</a>
-                            <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor"
-                            role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a>
+                                autofocus #nameit (focusout)="saveDictionaryToStore()">METADATA</a>
+                            <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor" role="tab"
+                                aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a>
 
-                           </div>
-                    </div> 
+                        </div>
+                    </div>
                 </nav>
-               <div>
-                <div class="row mt-4">
-                    <div class="col">
-                        <div class="tab-content" id="nav-tabContent">
-                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                aria-labelledby="nav-metadata-tab">
-                                <app-dictionary-metadata></app-dictionary-metadata>
-                                <nav class="row">
-                                    <!--Nav Tabs-->
-                                    <div class="col">
-                                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                                            <a class="nav-item nav-link active" id="nav-source-tab" data-toggle="tab"
-                                                href="#nav-source" role="tab" aria-controls="nav-source" aria-selected="false"
-                                                >SOURCES</a>
+                <div>
+                    <div class="row mt-4">
+                        <div class="col">
+                            <div class="tab-content" id="nav-tabContent">
+                                <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                                    aria-labelledby="nav-metadata-tab">
+                                    <app-dictionary-metadata></app-dictionary-metadata>
+                                    <nav class="row">
+                                        <!--Nav Tabs-->
+                                        <div class="col">
+                                            <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                                                <a class="nav-item nav-link active" id="nav-source-tab"
+                                                    data-toggle="tab" href="#nav-source" role="tab"
+                                                    aria-controls="nav-source" aria-selected="false">SOURCES</a>
+                                            </div>
                                         </div>
-                                    </div>
-                                </nav>
-                                <div class="row mt-4">
-                                    <div class="col">
-                                        <div class="tab-content" id="nav-tabContent">
-                                            <div class="tab-pane fade show active" id="nav-source" role="tabpanel"
-                                                aria-labelledby="nav-source-tab">
-                                                <app-sources-template></app-sources-template>
+                                    </nav>
+                                    <div class="row mt-4">
+                                        <div class="col">
+                                            <div class="tab-content" id="nav-tabContent">
+                                                <div class="tab-pane fade show active" id="nav-source" role="tabpanel"
+                                                    aria-labelledby="nav-source-tab">
+                                                    <app-sources-template></app-sources-template>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel"
-                                aria-labelledby="nav-editor-tab">
-                                <div class="card creat-card">
-                                    <div class="editor-container">
-                                <app-dictionary-editor></app-dictionary-editor>
-                                </div></div>
+                                <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel"
+                                    aria-labelledby="nav-editor-tab">
+                                    <div class="card creat-card">
+                                        <div class="editor-container">
+                                            <app-dictionary-editor></app-dictionary-editor>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                
+
+                </div>
             </div>
         </div>
-    </div>
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
index e32db8a..c406797 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
@@ -24,6 +24,7 @@
 import { Definition } from '../model/definition.model';
 import { DictionaryMetadataComponent } from './dictionary-metadata/dictionary-metadata.component';
 import { SourcesTemplateComponent } from './sources-template/sources-template.component';
+import { DictionaryCreationService } from './dictionary-creation.service';
 
 @Component({
   selector: 'app-resource-dictionary-creation',
@@ -32,7 +33,11 @@
 })
 export class ResourceDictionaryCreationComponent implements OnInit {
 
-  constructor(private router: Router, private dictionaryCreationStore: DictionaryCreationStore) {
+  constructor(
+    private router: Router,
+    private dictionaryCreationStore: DictionaryCreationStore,
+    private dictionaryService: DictionaryCreationService
+  ) {
   }
 
   modes: object[] = [
@@ -59,15 +64,26 @@
   }
 
   saveDictionaryToStore() {
-    this.dictionaryCreationStore.getSources();
-    this.dictionaryCreationStore.state$.subscribe(dd => {
-      console.log(dd);
-    });
+    // console.log('00000000000');
+    // this.dictionaryCreationStore.getSources();
+    // this.dictionaryCreationStore.state$.subscribe(dd => {
+    //   console.log(dd);
+    // });
   }
 
-  test() {
+  createDictionary() {
+    console.log('-----');
     this.metadataTabComponent.saveMetaDataToStore();
-    this.sourcesTemplateComponent.saveSorcesDataToStore();
+    this.dictionaryCreationStore.state$.subscribe(res => {
+      console.log('---------------------------------------');
+      console.log(res);
+      this.dictionaryService.save(res.metaData).subscribe(data => {
+
+      }, err => {
+
+      });
+    });
+    // this.sourcesTemplateComponent.saveSorcesDataToStore();
   }
 
   goBackToDashBorad() {
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 5d79720..88c6159 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -3014,7 +3014,7 @@
 /* -------- ace editor style -------- */
 .editor-container{
   height: 55vh !important;
-  overflow: scroll;
+  /* overflow: scroll; */
 }
 .ace_print-margin{
   left: 100% !important;