diff --git a/angular.json b/angular.json
index 9c786f4..437c1be 100644
--- a/angular.json
+++ b/angular.json
@@ -36,7 +36,9 @@
                         "outputPath": "docs",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
                         "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
diff --git a/src/assets/asw-theming.scss b/src/assets/asw-theming.scss
index b40537c..2de138d 100644
--- a/src/assets/asw-theming.scss
+++ b/src/assets/asw-theming.scss
@@ -1,4 +1,4 @@
-// @import "./../../node_modules/@angular/material/prebuilt-themes/indigo-pink";
+// @import "./../../node_modules/@angular/material/prebuilt-themes/azure-blue";
 // @import "./../../node_modules/bootstrap/scss/bootstrap";
 
 // Core Components
diff --git a/src/components/form-builder/form-builder.ts b/src/components/form-builder/form-builder.ts
index bc6e9c8..219c0e4 100644
--- a/src/components/form-builder/form-builder.ts
+++ b/src/components/form-builder/form-builder.ts
@@ -32,7 +32,7 @@ export class AswFormBuilder implements OnInit, OnChanges {
     @Input() isShowPreviewButton = true;
     @Input() isShowJsonDataButton = true;
     @Input() isShowPublishButton = true;
-    @Input() allowedTypes: 'number' | 'text' | 'all' = 'text';
+    @Input() allowedTypes: 'number' | 'text' | 'all' = 'all';
 
     @Output() previewClick = new EventEmitter<any[]>();
     @Output() publishClick = new EventEmitter<any[]>();
diff --git a/src/components/form-control/autocomplete/autocomplete.ts b/src/components/form-control/autocomplete/autocomplete.ts
index 16e5490..d1901e4 100644
--- a/src/components/form-control/autocomplete/autocomplete.ts
+++ b/src/components/form-control/autocomplete/autocomplete.ts
@@ -77,7 +77,8 @@ export class AswAutocomplete implements OnInit {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/button/button-dialog.html b/src/components/form-control/button/button-dialog.html
index b4f7fa8..1c63fab 100644
--- a/src/components/form-control/button/button-dialog.html
+++ b/src/components/form-control/button/button-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditButtonForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">        
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/button/button.ts b/src/components/form-control/button/button.ts
index 29bcb08..6d96691 100644
--- a/src/components/form-control/button/button.ts
+++ b/src/components/form-control/button/button.ts
@@ -58,7 +58,7 @@ export class AswButton {
     editButtonDialog(control: ButtonControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswButtonDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/calculation/calculation-dialog.html b/src/components/form-control/calculation/calculation-dialog.html
index e61d98d..94a26f0 100644
--- a/src/components/form-control/calculation/calculation-dialog.html
+++ b/src/components/form-control/calculation/calculation-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditCalculationForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/calculation/calculation.ts b/src/components/form-control/calculation/calculation.ts
index 015b838..e152615 100644
--- a/src/components/form-control/calculation/calculation.ts
+++ b/src/components/form-control/calculation/calculation.ts
@@ -81,7 +81,8 @@ export class AswCalculation {
 
         const dialogRef = this.dialog.open(AswCalculationDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: { control, numberControls }
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/checkbox/checkbox.ts b/src/components/form-control/checkbox/checkbox.ts
index 5ef74c5..5be0cdc 100644
--- a/src/components/form-control/checkbox/checkbox.ts
+++ b/src/components/form-control/checkbox/checkbox.ts
@@ -46,7 +46,8 @@ export class AswCheckbox {
     editCheckboxDialog(control: CheckboxControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswMultiSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/core/shared-dialog/digital/digital-dialog.html b/src/components/form-control/core/shared-dialog/digital/digital-dialog.html
index ce2116e..8683876 100644
--- a/src/components/form-control/core/shared-dialog/digital/digital-dialog.html
+++ b/src/components/form-control/core/shared-dialog/digital/digital-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswDigitalForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/core/shared-dialog/multi-select/multi-select-dialog.html b/src/components/form-control/core/shared-dialog/multi-select/multi-select-dialog.html
index da6c2d3..f21de4a 100644
--- a/src/components/form-control/core/shared-dialog/multi-select/multi-select-dialog.html
+++ b/src/components/form-control/core/shared-dialog/multi-select/multi-select-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit multiselect property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditMultiselectForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/core/shared-dialog/single-select/single-select-dialog.html b/src/components/form-control/core/shared-dialog/single-select/single-select-dialog.html
index 0581fde..290e594 100644
--- a/src/components/form-control/core/shared-dialog/single-select/single-select-dialog.html
+++ b/src/components/form-control/core/shared-dialog/single-select/single-select-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditSingleSelectForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/core/shared-dialog/text/text-dialog.html b/src/components/form-control/core/shared-dialog/text/text-dialog.html
index a919d74..d5e1e42 100644
--- a/src/components/form-control/core/shared-dialog/text/text-dialog.html
+++ b/src/components/form-control/core/shared-dialog/text/text-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditTextForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/datepicker/datepicker-dialog.html b/src/components/form-control/datepicker/datepicker-dialog.html
index 37d9281..7a1f4ab 100644
--- a/src/components/form-control/datepicker/datepicker-dialog.html
+++ b/src/components/form-control/datepicker/datepicker-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswDatepickerForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/datepicker/datepicker.ts b/src/components/form-control/datepicker/datepicker.ts
index 00aadd9..0f7d61e 100644
--- a/src/components/form-control/datepicker/datepicker.ts
+++ b/src/components/form-control/datepicker/datepicker.ts
@@ -58,7 +58,8 @@ export class AswDatepicker {
     editDatepickerDialog(control: DateControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDatepickerDialog, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/drawing/drawing.ts b/src/components/form-control/drawing/drawing.ts
index 4b1bac8..04c9edd 100644
--- a/src/components/form-control/drawing/drawing.ts
+++ b/src/components/form-control/drawing/drawing.ts
@@ -46,7 +46,8 @@ export class AswDrawing {
     drawingImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDrawing, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -59,7 +60,7 @@ export class AswDrawing {
     editDrawingDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDigitalDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/gps/gps-dialog.html b/src/components/form-control/gps/gps-dialog.html
index e705bb1..d33330e 100644
--- a/src/components/form-control/gps/gps-dialog.html
+++ b/src/components/form-control/gps/gps-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditGpsForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/gps/gps.ts b/src/components/form-control/gps/gps.ts
index 5b81403..4480e18 100644
--- a/src/components/form-control/gps/gps.ts
+++ b/src/components/form-control/gps/gps.ts
@@ -74,7 +74,7 @@ export class AswGps implements OnInit {
     editGpsDialog(control: GpsControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswGpsDialog, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/header/header-dialog.html b/src/components/form-control/header/header-dialog.html
index cb0467a..a5b377e 100644
--- a/src/components/form-control/header/header-dialog.html
+++ b/src/components/form-control/header/header-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswHeaderForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/header/header.ts b/src/components/form-control/header/header.ts
index 55a564a..a6158e8 100644
--- a/src/components/form-control/header/header.ts
+++ b/src/components/form-control/header/header.ts
@@ -57,7 +57,7 @@ export class AswHeader {
     editHeaderDialog(control: HeaderControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswHeaderDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/image/image-dialog.html b/src/components/form-control/image/image-dialog.html
index 90962c0..fecf52b 100644
--- a/src/components/form-control/image/image-dialog.html
+++ b/src/components/form-control/image/image-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswImageForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/image/image-upload-dialog.html b/src/components/form-control/image/image-upload-dialog.html
index 2ceed18..f0475c4 100644
--- a/src/components/form-control/image/image-upload-dialog.html
+++ b/src/components/form-control/image/image-upload-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Crop Uploaded Image</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswImageCropForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="row">
diff --git a/src/components/form-control/image/image.ts b/src/components/form-control/image/image.ts
index dd58ef1..ffcd6b7 100644
--- a/src/components/form-control/image/image.ts
+++ b/src/components/form-control/image/image.ts
@@ -47,7 +47,7 @@ export class AswImage {
     editImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -60,7 +60,8 @@ export class AswImage {
     uploadImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageUploadDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/multi-select/multi-select.ts b/src/components/form-control/multi-select/multi-select.ts
index 237cb07..0a5e04b 100644
--- a/src/components/form-control/multi-select/multi-select.ts
+++ b/src/components/form-control/multi-select/multi-select.ts
@@ -55,7 +55,8 @@ export class AswMultiSelect {
         });
         const dialogRef = this.dialog.open(AswMultiSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/number/number.ts b/src/components/form-control/number/number.ts
index f47fd24..5aa1da8 100644
--- a/src/components/form-control/number/number.ts
+++ b/src/components/form-control/number/number.ts
@@ -73,7 +73,8 @@ export class AswNumber implements OnInit, AfterViewInit {
     editNumberDialog(control: NumberControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswNumberDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/paragraph/paragraph.ts b/src/components/form-control/paragraph/paragraph.ts
index 6077061..a3b7e72 100644
--- a/src/components/form-control/paragraph/paragraph.ts
+++ b/src/components/form-control/paragraph/paragraph.ts
@@ -52,7 +52,8 @@ export class AswParagraph {
     editParagraphDialog(control: ParagraphControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswParagraphDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/qrcode/qrcode-dialog.html b/src/components/form-control/qrcode/qrcode-dialog.html
index c2264c9..320e189 100644
--- a/src/components/form-control/qrcode/qrcode-dialog.html
+++ b/src/components/form-control/qrcode/qrcode-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <mat-dialog-content class="mat-typography">
     <div class="row p-2">
         <div class="col-md-4">
diff --git a/src/components/form-control/qrcode/qrcode.ts b/src/components/form-control/qrcode/qrcode.ts
index 247a83f..e8db22d 100644
--- a/src/components/form-control/qrcode/qrcode.ts
+++ b/src/components/form-control/qrcode/qrcode.ts
@@ -55,6 +55,7 @@ export class AswQrCode {
         const dialogRef = this.dialog.open(AswQrCodeDialog, {
             disableClose: true,
             width: '80%',
+            minWidth: '80vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/radio-button/radio-button.ts b/src/components/form-control/radio-button/radio-button.ts
index 053c256..e518f7f 100644
--- a/src/components/form-control/radio-button/radio-button.ts
+++ b/src/components/form-control/radio-button/radio-button.ts
@@ -55,7 +55,8 @@ export class AswRadioButton {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/select/select.ts b/src/components/form-control/select/select.ts
index 3fb303e..5de30f3 100644
--- a/src/components/form-control/select/select.ts
+++ b/src/components/form-control/select/select.ts
@@ -55,7 +55,8 @@ export class AswSelect {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/signature/signature.ts b/src/components/form-control/signature/signature.ts
index f00423d..4fbb8cf 100644
--- a/src/components/form-control/signature/signature.ts
+++ b/src/components/form-control/signature/signature.ts
@@ -47,7 +47,8 @@ export class AswSignature {
     signatureDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDrawing, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -60,7 +61,7 @@ export class AswSignature {
     editSignatureDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDigitalDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/slide-toggle/slide-toggle-dialog.html b/src/components/form-control/slide-toggle/slide-toggle-dialog.html
index 13ec599..3627d53 100644
--- a/src/components/form-control/slide-toggle/slide-toggle-dialog.html
+++ b/src/components/form-control/slide-toggle/slide-toggle-dialog.html
@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditSlideToggleForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>
diff --git a/src/components/form-control/slide-toggle/slide-toggle.ts b/src/components/form-control/slide-toggle/slide-toggle.ts
index 0349bb2..faa196d 100644
--- a/src/components/form-control/slide-toggle/slide-toggle.ts
+++ b/src/components/form-control/slide-toggle/slide-toggle.ts
@@ -54,7 +54,7 @@ export class AswSlideToggle {
     editSlideToggleDialog(control: SlideToggleControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswSlideToggleDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/textarea/textarea.ts b/src/components/form-control/textarea/textarea.ts
index e2856ab..ad5920d 100644
--- a/src/components/form-control/textarea/textarea.ts
+++ b/src/components/form-control/textarea/textarea.ts
@@ -52,7 +52,8 @@ export class AswTextarea {
     editTextAreaDialog(control: TextareaControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswTextDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/components/form-control/textfield/textfield.ts b/src/components/form-control/textfield/textfield.ts
index 6b4da50..72be54c 100644
--- a/src/components/form-control/textfield/textfield.ts
+++ b/src/components/form-control/textfield/textfield.ts
@@ -54,7 +54,8 @@ export class AswTextField {
     editTextFieldDialog(control: TextFieldControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswTextDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
diff --git a/src/demo/components/home/home.component.ts b/src/demo/components/home/home.component.ts
index 0d53891..adf7130 100644
--- a/src/demo/components/home/home.component.ts
+++ b/src/demo/components/home/home.component.ts
@@ -31,9 +31,9 @@ export class HomeComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.username = USERNAME;
-        this.firstname = FIRSTNAME;
-        this.jsonData = this.aswSettingsService.previewData;
+        // this.username = USERNAME;
+        // this.firstname = FIRSTNAME;
+        //this.jsonData = this.aswSettingsService.previewData;
        // this.getJson();
     }
 
diff --git a/src/polyfills.ts b/src/polyfills.ts
index d5f67bd..373f538 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -57,7 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************
diff --git a/src/styles.scss b/src/styles.scss
index efe03f5..9283ac8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~@angular/material/prebuilt-themes/azure-blue.css";
 body {
     background-color: #F7F7F8;
 }
\ No newline at end of file