diff --git a/zeppelin-web-angular/angular.json b/zeppelin-web-angular/angular.json
index 37904c102f7..095c3881d31 100644
--- a/zeppelin-web-angular/angular.json
+++ b/zeppelin-web-angular/angular.json
@@ -72,7 +72,8 @@
               "src/styles/theme/light/antd-light.less",
               "src/styles.less",
               "./node_modules/highlight.js/styles/github.css",
-              "./node_modules/monaco-editor/min/vs/editor/editor.main.css"
+              "./node_modules/monaco-editor/min/vs/editor/editor.main.css",
+              "./node_modules/github-markdown-css/github-markdown.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
diff --git a/zeppelin-web-angular/package-lock.json b/zeppelin-web-angular/package-lock.json
index da898b09ce3..8c82716f71c 100644
--- a/zeppelin-web-angular/package-lock.json
+++ b/zeppelin-web-angular/package-lock.json
@@ -2844,13 +2844,10 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
-    "ansi-to-html": {
-      "version": "0.6.12",
-      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.12.tgz",
-      "integrity": "sha512-qBkIqLW979675mP76yB7yVkzeAWtATegdnDQ0RA3CZzknx0yUlNxMSML4xFdBfTs2GWYFQ1FELfbGbVSPzJ+LA==",
-      "requires": {
-        "entities": "^1.1.2"
-      }
+    "ansi_up": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-4.0.4.tgz",
+      "integrity": "sha512-vRxC8q6QY918MbehO869biJW4tiunJdjOhi5fpY6NLOliBQlZhOkKgABJKJqH+JZfb/WfjvjN1chLWI6tODerw=="
     },
     "any-observable": {
       "version": "0.3.0",
@@ -5538,11 +5535,6 @@
       "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "dev": true
     },
-    "entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
-    },
     "err-code": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz",
@@ -6396,6 +6388,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-markdown-css": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-3.0.1.tgz",
+      "integrity": "sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ=="
+    },
     "glob": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz",
diff --git a/zeppelin-web-angular/package.json b/zeppelin-web-angular/package.json
index 670c73cc2ce..9d8cafef99e 100644
--- a/zeppelin-web-angular/package.json
+++ b/zeppelin-web-angular/package.json
@@ -28,10 +28,11 @@
     "@angular/router": "~8.2.10",
     "@antv/data-set": "^0.10.2",
     "@antv/g2": "^3.5.4",
-    "ansi-to-html": "^0.6.11",
+    "ansi_up": "^4.0.4",
     "core-js": "^2.5.4",
     "date-fns": "^1.30.1",
     "diff-match-patch": "^1.0.4",
+    "github-markdown-css": "^3.0.1",
     "highlight.js": "^9.15.8",
     "lodash": "^4.17.11",
     "mathjax": "2.7.5",
diff --git a/zeppelin-web-angular/src/app/app.module.ts b/zeppelin-web-angular/src/app/app.module.ts
index 06be7f4f6f1..5f651027048 100644
--- a/zeppelin-web-angular/src/app/app.module.ts
+++ b/zeppelin-web-angular/src/app/app.module.ts
@@ -25,7 +25,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 import { MESSAGE_INTERCEPTOR, TRASH_FOLDER_ID_TOKEN } from '@zeppelin/interfaces';
-import { loadMonacoLanguage } from '@zeppelin/languages';
+import { loadMonacoBefore } from '@zeppelin/languages';
 import { TicketService } from '@zeppelin/services';
 import { ShareModule } from '@zeppelin/share';
 
@@ -37,7 +37,7 @@ import { RUNTIME_COMPILER_PROVIDERS } from './app-runtime-compiler.providers';
 import { AppComponent } from './app.component';
 
 export const loadMonaco = () => {
-  loadMonacoLanguage();
+  loadMonacoBefore();
 };
 
 registerLocaleData(en);
diff --git a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
index d6cb44c8c2f..27d08f94a81 100644
--- a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
+++ b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
@@ -1,3 +1,14 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
diff --git a/zeppelin-web-angular/src/app/languages/load.ts b/zeppelin-web-angular/src/app/languages/load.ts
index 5dad459c888..64c617acd6e 100644
--- a/zeppelin-web-angular/src/app/languages/load.ts
+++ b/zeppelin-web-angular/src/app/languages/load.ts
@@ -10,10 +10,19 @@
  * limitations under the License.
  */
 
-import { languages } from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
 import { conf as ScalaConf, language as ScalaLanguage } from './scala';
 
-export const loadMonacoLanguage = () => {
+export const loadMonacoBefore = () => {
+  editor.defineTheme('zeppelin-theme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.lineHighlightBackground': '#0000FF10'
+    }
+  });
+  editor.setTheme('zeppelin-theme');
   languages.register({ id: 'scala' });
   languages.setMonarchTokensProvider('scala', ScalaLanguage);
   languages.setLanguageConfiguration('scala', ScalaConf);
diff --git a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
index 856506e92f2..746967dc88f 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
@@ -19,7 +19,7 @@
 
   ::ng-deep .interpreter-item {
     &.edit {
-      background: @orange-1;
+      //background: @orange-1;
     }
     .ant-card-body {
       margin-top: -@card-padding-base;
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
index bc6d2805eb8..7e242390dcf 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
@@ -20,7 +20,7 @@
 
   ::ng-deep .repo-item {
     &.edit {
-      background: @orange-1;
+      //background: @orange-1;
     }
   }
 
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 0238f171aca..1da21e63a63 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -125,11 +125,9 @@
               (click)="toggleExtension('revisions')">
         <i nz-icon nzType="swap" nzTheme="outline"></i>
       </button>
-      <nz-button-group nzSize="small">
-        <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" nzTrigger="click">
-          {{currentRevision}}
-        </button>
-      </nz-button-group>
+      <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" nzTrigger="click">
+        {{currentRevision}}
+      </button>
       <nz-dropdown-menu #revisionsMenu="nzDropdownMenu">
         <ul nz-menu>
           <li nz-menu-item *ngFor="let r of noteRevisions" (click)="visitRevision(r)">
@@ -188,7 +186,8 @@
         <div class="ant-dropdown-menu padding-sm scheduler">
           Run note with cron scheduler.
           Either choose from preset or write your own
-          <a href="http://www.quartz-scheduler.org/documentation/quartz-2.1.x/tutorials/crontrigger" target="_blank">
+          <a href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html"
+             target="_blank">
             cron expression
           </a>
           .
@@ -226,7 +225,8 @@
       <button nz-button nzNoAnimation (click)="togglePermissions()">
         <i nz-icon nzType="lock" [nzTheme]="activatedExtension === 'permissions' ? 'fill' : 'outline'"></i>
       </button>
-      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" nz-dropdown nzTrigger="click">{{note.config.looknfeel}}
+      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" nz-dropdown
+              nzTrigger="click">{{note.config.looknfeel}}
         <i nz-icon nzType="down"></i>
       </button>
       <nz-dropdown-menu #menu="nzDropdownMenu">
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
index 994acc11cb4..9ec5dedb631 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
@@ -69,7 +69,6 @@ export class NotebookActionBarComponent extends MessageListenersManager implemen
     { name: '12h', value: '0 0 0/12 * * ?' },
     { name: '1d', value: '0 0 0 * * ?' }
   ];
-
   updateNoteName(name: string) {
     const trimmedNewName = name.trim();
     if (trimmedNewName.length > 0 && this.note.name !== trimmedNewName) {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
index e0c17a168fb..404fc288954 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
@@ -36,6 +36,7 @@ import {
   TicketService
 } from '@zeppelin/services';
 
+import { scrollIntoViewIfNeeded } from '@zeppelin/utility/element';
 import { NotebookParagraphComponent } from './paragraph/paragraph.component';
 
 @Component({
@@ -151,7 +152,14 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
       if (movedPara) {
         const listOfRestPara = this.note.paragraphs.filter(p => p.id !== data.id);
         this.note.paragraphs = [...listOfRestPara.slice(0, data.index), movedPara, ...listOfRestPara.slice(data.index)];
+        const paragraphComponent = this.listOfNotebookParagraphComponent.find(e => e.paragraph.id === data.id);
         this.cdr.markForCheck();
+        if (paragraphComponent) {
+          // Call when next tick
+          setTimeout(() => {
+            scrollIntoViewIfNeeded(paragraphComponent.getElement());
+          });
+        }
       }
     }
   }
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
index 64cfdee30fa..4b71d3d8ac8 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
@@ -45,6 +45,7 @@ import { NotebookParagraphProgressComponent } from './paragraph/progress/progres
 import { NotebookPermissionsComponent } from './permissions/permissions.component';
 import { NotebookRevisionsComparatorComponent } from './revisions-comparator/revisions-comparator.component';
 
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { WorkspaceShareModule } from '../../workspace/share/share.module';
 import { NotebookActionBarComponent } from './action-bar/action-bar.component';
 import { NotebookRoutingModule } from './notebook-routing.module';
@@ -90,7 +91,8 @@ import { NotebookShareModule } from './share/share.module';
     NzGridModule,
     NzRadioModule,
     DragDropModule,
-    NzCodeEditorModule
+    NzCodeEditorModule,
+    NzCheckboxModule
   ]
 })
 export class NotebookModule {}
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
index 246d09e7aad..ad9691e9ab6 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
@@ -516,9 +516,11 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
               this.commitParagraph();
               break;
             case ParagraphActions.MoveToUp:
+              event.preventDefault();
               this.moveUpParagraph();
               break;
             case ParagraphActions.MoveToDown:
+              event.preventDefault();
               this.moveDownParagraph();
               break;
             case ParagraphActions.SwitchEnable:
@@ -622,6 +624,10 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     }
   }
 
+  getElement(): HTMLElement {
+    return this.host && this.host.nativeElement;
+  }
+
   ngOnDestroy(): void {
     super.ngOnDestroy();
   }
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
index 0b246b0efbf..cb8369f273e 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
@@ -68,6 +68,7 @@
     <div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre [innerHTML]="plainText"></pre></div>
     <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" alt="img"></div>
   </ng-container>
+  <div *ngIf="frontEndError" class="text-plain"><pre>{{frontEndError}}</pre></div>
   <div *ngIf="angularComponent">
     <ng-container *ngComponentOutlet="angularComponent.component;ngModuleFactory: angularComponent.moduleFactory;injector: injector"></ng-container>
   </div>
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
index f1970729ab9..37f0dcb16a8 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
@@ -29,6 +29,11 @@
   }
 
   ::ng-deep {
+
+    .visualization-selector .ant-radio-button-wrapper {
+      padding: 0 10px;
+    }
+
     .inner-html, .text-plain {
 
       overflow: auto;
@@ -42,6 +47,37 @@
         height: auto;
         width: auto;
       }
+
+      table {
+        border: none;
+        border-collapse: collapse;
+        border-spacing: 0;
+        color: @text-color;
+        table-layout: fixed;
+      }
+      thead {
+        color: @table-header-color;
+        border-bottom: 2px @border-style-base fade(@black, 65%);
+        vertical-align: bottom;
+      }
+      tr, th, td {
+        text-align: right;
+        vertical-align: middle;
+        padding: 0.5em 0.5em;
+        line-height: normal;
+        white-space: normal;
+        max-width: none;
+        border: none;
+      }
+      th {
+        font-weight: bold;
+      }
+      tbody tr:nth-child(odd) {
+        background: darken(@table-header-bg, 3%);
+      }
+      tbody tr:hover {
+        background: @table-row-hover-bg;
+      }
     }
   }
 
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
index 86d94cce9a0..c8b75b903a6 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
@@ -29,7 +29,7 @@ import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import * as Convert from 'ansi-to-html';
+import { default as AnsiUp } from 'ansi_up';
 import * as hljs from 'highlight.js';
 import { NzResizeEvent } from 'ng-zorro-antd/resizable';
 import { utils, writeFile, WorkSheet, WritingOptions } from 'xlsx';
@@ -206,6 +206,7 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderDefaultDisplay() {
+    this.frontEndError = '';
     switch (this.result.type) {
       case DatasetType.TABLE:
         this.renderGraph();
@@ -240,22 +241,22 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderAngular(): void {
-    try {
-      this.runtimeCompilerService.createAndCompileTemplate(this.id, this.result.data).then(data => {
+    this.runtimeCompilerService
+      .createAndCompileTemplate(this.id, this.result.data)
+      .then(data => {
         this.angularComponent = data;
-        // this.angularComponent.moduleFactory
+        this.cdr.markForCheck();
+      })
+      .catch(error => {
+        this.angularComponent = null;
+        this.frontEndError = error.message;
         this.cdr.markForCheck();
       });
-    } catch (e) {
-      this.frontEndError = e.message;
-      console.log(e);
-    }
   }
 
   renderText(): void {
-    // tslint:disable-next-line:no-any
-    const convert: any = new Convert();
-    this.plainText = this.sanitizer.bypassSecurityTrustHtml(convert.toHtml(this.result.data));
+    const ansiUp = new AnsiUp();
+    this.plainText = this.sanitizer.bypassSecurityTrustHtml(ansiUp.ansi_to_html(this.result.data));
   }
 
   renderImg(): void {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
index a381779f5c5..37bebf3ab83 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
@@ -28,6 +28,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { ShareModule } from '@zeppelin/share';
 import { VisualizationModule } from '@zeppelin/visualizations/visualization.module';
 
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
 import { NotebookParagraphDynamicFormsComponent } from './dynamic-forms/dynamic-forms.component';
 import { NotebookParagraphResultComponent } from './result/result.component';
 
@@ -48,7 +50,9 @@ import { NotebookParagraphResultComponent } from './result/result.component';
     NzIconModule,
     NzCheckboxModule,
     NzSelectModule,
-    NzSwitchModule
+    NzSwitchModule,
+    NzInputModule,
+    NzGridModule
   ]
 })
 export class WorkspaceShareModule {}
diff --git a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
index 976e44b5d00..410ef17c7f3 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
@@ -18,6 +18,7 @@ import { ActivatedRoute, NavigationEnd, Route, Router } from '@angular/router';
 import { publishedSymbol, Published } from '@zeppelin/core/paragraph-base/published';
 import { HeliumManagerService } from '@zeppelin/helium-manager';
 import { MessageService } from '@zeppelin/services';
+import { setTheme } from '@zeppelin/visualizations/g2.config';
 import { log } from 'ng-zorro-antd/core';
 
 @Component({
@@ -47,6 +48,7 @@ export class WorkspaceComponent implements OnInit, OnDestroy {
       this.websocketConnected = data;
       this.cdr.markForCheck();
     });
+    setTheme();
     this.heliumManagerService.initPackages();
   }
 
diff --git a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
index 8ec7f2c36e9..f7f6fc42664 100644
--- a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
+++ b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
@@ -11,15 +11,17 @@
  */
 
 import {
+  ChangeDetectionStrategy,
   Compiler,
   Component,
   Injectable,
-  ModuleWithComponentFactories,
   NgModule,
   NgModuleFactory,
+  NO_ERRORS_SCHEMA,
   Type
 } from '@angular/core';
 
+import { CompileDirectiveMetadata, HtmlParser, TemplateParser } from '@angular/compiler';
 import { RuntimeDynamicModuleModule } from '@zeppelin/core';
 import { NgZService } from './ng-z.service';
 
@@ -33,16 +35,17 @@ export class DynamicTemplate {
   ) {}
 }
 
+export class DynamicTemplateError {
+  constructor(public message: string) {}
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class RuntimeCompilerService {
-  // tslint:disable-next-line:no-any
-  private compiledModule?: ModuleWithComponentFactories<any>;
-
   public async createAndCompileTemplate(paragraphId: string, template: string): Promise<DynamicTemplate> {
     const ngZService = this.ngZService;
-    const dynamicComponent = Component({ template: template })(
+    const dynamicComponent = Component({ template: template, selector: `dynamic-${paragraphId}` })(
       class DynamicTemplateComponent {
         z = {
           set: (key: string, value, id: string) => ngZService.setContextValue(key, value, id),
@@ -63,8 +66,13 @@ export class RuntimeCompilerService {
       imports: [RuntimeDynamicModuleModule]
     })(class DynamicModule {});
 
-    this.compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
-    return new DynamicTemplate(template, dynamicComponent, this.compiledModule.ngModuleFactory);
+    try {
+      this.compiler.clearCache();
+      const compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
+      return new DynamicTemplate(template, dynamicComponent, compiledModule.ngModuleFactory);
+    } catch (e) {
+      throw new DynamicTemplateError(`${e}`);
+    }
   }
 
   constructor(private compiler: Compiler, private ngZService: NgZService) {}
diff --git a/zeppelin-web-angular/src/app/services/shortcut.service.ts b/zeppelin-web-angular/src/app/services/shortcut.service.ts
index 4b2a62627a6..5bc9a2a2fcd 100644
--- a/zeppelin-web-angular/src/app/services/shortcut.service.ts
+++ b/zeppelin-web-angular/src/app/services/shortcut.service.ts
@@ -44,10 +44,10 @@ export const ShortcutsMap = {
   // Need register special character `≠` in MacOS
   [ParagraphActions.IncreaseWidth]: ['alt.ctrlCmd.+', 'alt.ctrlCmd.≠'],
   [ParagraphActions.Delete]: 'shift.delete',
-  [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup'],
-  [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown'],
-  [ParagraphActions.SelectAbove]: ['k', 'arrowup'],
-  [ParagraphActions.SelectBelow]: ['j', 'arrowdown'],
+  [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup', 'ctrlCmd.arrowleft'],
+  [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown', 'ctrlCmd.arrowright'],
+  [ParagraphActions.SelectAbove]: ['k', 'arrowup', 'arrowleft'],
+  [ParagraphActions.SelectBelow]: ['j', 'arrowdown', 'arrowright'],
   [ParagraphActions.SwitchLineNumber]: 'l',
   [ParagraphActions.SwitchTitleShow]: 't',
   [ParagraphActions.SwitchOutputShow]: 'o',
diff --git a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
index 70be6910499..7800443217f 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
@@ -72,7 +72,7 @@ <h4>
         </span>
         <span class="file" *ngSwitchCase="'note'">
           <a class="name">
-            <i nz-icon nzType="file-text" nzTheme="fill"></i>
+            <i nz-icon nzType="file" nzTheme="outline"></i>
             <a [routerLink]="['/notebook',node.origin.id]">
               {{ node.title }}
             </a>
diff --git a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
index aec40c15ccf..ea197e40200 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
@@ -48,10 +48,6 @@
       filter: grayscale(1);
     }
 
-    i {
-      margin-right: 6px;
-    }
-
     .operation {
       margin-left: 12px;
 
diff --git a/zeppelin-web-angular/src/app/utility/element.ts b/zeppelin-web-angular/src/app/utility/element.ts
new file mode 100644
index 00000000000..cdae6de0045
--- /dev/null
+++ b/zeppelin-web-angular/src/app/utility/element.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function scrollIntoViewIfNeeded(element: HTMLElement, center = true): void {
+  // tslint:disable-next-line:no-any
+  if (element && typeof (element as any).scrollIntoViewIfNeeded === 'function') {
+    // tslint:disable-next-line:no-any
+    (element as any).scrollIntoViewIfNeeded(center);
+  }
+}
diff --git a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
index 82ed55f0dcf..22944451cb2 100644
--- a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
+++ b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
@@ -83,6 +83,9 @@ export class BarChartVisualizationComponent extends G2VisualizationComponentBase
     const key = this.getKey();
     this.setScale();
 
+    this.chart.tooltip({
+      shared: false
+    });
     if (get(this.config.setting, 'multiBarChart.stacked', false)) {
       this.chart
         .intervalStack()
diff --git a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
index 2a91d7beccd..fb1497f43db 100644
--- a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
+++ b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
@@ -10,7 +10,7 @@
   ~ limitations under the License.
   -->
 
-<nz-card id="fields-drop-group" nzTitle="Available Fields" cdkDropListGroup>
+<nz-card id="fields-drop-group" nzTitle="Available Fields" nzSize="small" cdkDropListGroup>
   <div cdkDropList
        id="columns-list"
        [cdkDropListData]="columns"
diff --git a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
index 87bb382eaea..9091c367751 100644
--- a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
+++ b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
@@ -23,5 +23,11 @@
   }
   nz-card {
     background: #fff;
+    ::ng-deep {
+      .ant-card-head {
+        padding: 0 12px;
+        background: #fafafa;
+      }
+    }
   }
 });
diff --git a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
index ff03338c481..7333cee57ba 100644
--- a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
+++ b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
@@ -10,7 +10,7 @@
   ~ limitations under the License.
   -->
 
-<nz-card id="fields-drop-group" nzTitle="Available Fields" cdkDropListGroup>
+<nz-card id="fields-drop-group" nzTitle="Available Fields" nzSize="small" cdkDropListGroup>
   <div cdkDropList
        id="columns-list"
        [cdkDropListData]="columns"
diff --git a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
index 01427854d96..35d9c4e3892 100644
--- a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
+++ b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
@@ -23,5 +23,11 @@
   }
   nz-card {
     background: #fff;
+    ::ng-deep {
+      .ant-card-head {
+        padding: 0 12px;
+        background: #fafafa;
+      }
+    }
   }
 });
diff --git a/zeppelin-web-angular/src/app/visualizations/g2.config.ts b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
new file mode 100644
index 00000000000..aa5a4e9e30e
--- /dev/null
+++ b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
@@ -0,0 +1,130 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as G2 from '@antv/g2';
+
+const DEFAULT_COLOR = '#03578c';
+const COLOR_PLATE_8 = ['#03578c', '#179bd4', '#bf4f07', '#005041', '#8543E0', '#57c2e9', '#03138c', '#8c0357'];
+
+const COLOR_PLATE_16 = [
+  '#03588C',
+  '#82B8D9',
+  '#025959',
+  '#FACC14',
+  '#E6965C',
+  '#223273',
+  '#7564CC',
+  '#8543E0',
+  '#5C8EE6',
+  '#13C2C2',
+  '#5CA3E6',
+  '#3436C7',
+  '#B381E6',
+  '#F04864',
+  '#D598D9'
+];
+const COLOR_PLATE_24 = [
+  '#03588C',
+  '#66B5FF',
+  '#82B8D9',
+  '#025959',
+  '#027368',
+  '#9AE65C',
+  '#FACC14',
+  '#E6965C',
+  '#57AD71',
+  '#223273',
+  '#738AE6',
+  '#7564CC',
+  '#8543E0',
+  '#A877ED',
+  '#5C8EE6',
+  '#13C2C2',
+  '#70E0E0',
+  '#5CA3E6',
+  '#3436C7',
+  '#8082FF',
+  '#DD81E6',
+  '#F04864',
+  '#FA7D92',
+  '#D598D9'
+];
+const COLOR_PIE = ['#03588C', '#13C2C2', '#025959', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'];
+const COLOR_PIE_16 = [
+  '#03588C',
+  '#73C9E6',
+  '#13C2C2',
+  '#6CD9B3',
+  '#025959',
+  '#9DD96C',
+  '#FACC14',
+  '#E6965C',
+  '#F04864',
+  '#D66BCA',
+  '#8543E0',
+  '#8E77ED',
+  '#3436C7',
+  '#737EE6',
+  '#223273',
+  '#7EA2E6'
+];
+
+const zeppelinTheme = {
+  defaultColor: DEFAULT_COLOR,
+  colors: COLOR_PLATE_8,
+  colors_16: COLOR_PLATE_16,
+  colors_24: COLOR_PLATE_24,
+  colors_pie: COLOR_PIE,
+  colors_pie_16: COLOR_PIE_16,
+  shape: {
+    point: {
+      fill: DEFAULT_COLOR
+    },
+    hollowPoint: {
+      stroke: DEFAULT_COLOR
+    },
+    interval: {
+      fill: DEFAULT_COLOR
+    },
+    hollowInterval: {
+      stroke: DEFAULT_COLOR
+    },
+    area: {
+      fill: DEFAULT_COLOR
+    },
+    polygon: {
+      fill: DEFAULT_COLOR
+    },
+    hollowPolygon: {
+      stroke: DEFAULT_COLOR
+    },
+    hollowArea: {
+      stroke: DEFAULT_COLOR
+    },
+    line: {
+      stroke: DEFAULT_COLOR
+    },
+    edge: {
+      stroke: DEFAULT_COLOR
+    },
+    schema: {
+      stroke: DEFAULT_COLOR
+    }
+  }
+};
+
+export function setTheme() {
+  const theme = G2.Util.deepMix(G2.Global, zeppelinTheme);
+  console.log(zeppelinTheme);
+  // tslint:disable-next-line:no-any
+  (G2.Global as any).setTheme(theme);
+}
diff --git a/zeppelin-web-angular/src/styles/theme/light/theme-light.less b/zeppelin-web-angular/src/styles/theme/light/theme-light.less
index 6f071e5f728..576517a7604 100644
--- a/zeppelin-web-angular/src/styles/theme/light/theme-light.less
+++ b/zeppelin-web-angular/src/styles/theme/light/theme-light.less
@@ -74,8 +74,8 @@
 @heading-3-size: ceil(@font-size-base * 1.71);
 @heading-4-size: ceil(@font-size-base * 1.42);
 @line-height-base: 1.5;
-@border-radius-base: 0px;
-@border-radius-sm: 0px;
+@border-radius-base: 4px;
+@border-radius-sm: 2px;
 
 // vertical paddings
 @padding-lg: 24px; // containers