diff --git a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.html b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.html
index cbdec3485..8fea6ffe6 100644
--- a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.html
+++ b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.html
@@ -3,17 +3,23 @@
 		[disabled]="!enabledFeature(feature)">
 	  <mat-expansion-panel-header>
 		<mat-panel-title>
-		  {{ feature.name }}
+		  {{ 'PAC.Feature.Features.' + feature.code + '.Name' | translate: {Default: feature.name } }}
 		</mat-panel-title>
 		<mat-panel-description class="flex justify-end items-center">
-		  {{ feature.description }}
+		  {{ 'PAC.Feature.Features.' + feature.code + '.Description' | translate: {Default: feature.description } }}
 		</mat-panel-description>
-		<mat-slide-toggle [checked]="enabledFeature(feature)" (change)="featureChanged($event.checked, feature)"></mat-slide-toggle>
+		
+		<mat-slide-toggle class="inline-flex" [checked]="enabledFeature(feature)" (change)="featureChanged($event.checked, feature)"></mat-slide-toggle>
 	  </mat-expansion-panel-header>
 	  
 	  <mat-list *ngIf="feature?.children.length > 0" displayDensity="cosy">
 		<mat-list-item *ngFor="let child of feature.children">
-			<mat-checkbox [checked]="enabledFeature(child)" (change)="featureChanged($event.checked, child)">{{ child?.name }}</mat-checkbox>
+			<mat-checkbox [checked]="enabledFeature(child)" (change)="featureChanged($event.checked, child)">
+				<div class="flex items-center gap-4">
+					<span>{{ 'PAC.Feature.Features.' + child.code + '.Name' | translate: {Default: child.name } }}</span>
+					<span class="text-sm italic">{{ 'PAC.Feature.Features.' +  child.code + '.Description' | translate: {Default: child.description } }}</span>
+				</div>
+			</mat-checkbox>
 		</mat-list-item>
 	  </mat-list>
 
diff --git a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.scss b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.scss
index 38f3ef31e..bdb16be2a 100644
--- a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.scss
+++ b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.scss
@@ -1,3 +1,7 @@
 :host {
     @apply w-full;
+}
+
+.mat-mdc-slide-toggle {
+    @apply inline-flex;
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.ts b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.ts
index e415705e6..9e49618d7 100644
--- a/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.ts
+++ b/apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.ts
@@ -1,31 +1,30 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { MatDialog } from '@angular/material/dialog'
 import { ActivatedRoute } from '@angular/router'
+import { CountdownConfirmationComponent } from '@metad/components/confirm'
 import { IFeature, IFeatureOrganization, IFeatureToggle } from '@metad/contracts'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
-import { TranslateService } from '@ngx-translate/core'
-import { CountdownConfirmationComponent } from '@metad/components/confirm'
 import { combineLatest, firstValueFrom, of } from 'rxjs'
-import {
-  distinctUntilChanged,
-  map,
-  shareReplay,
-  startWith,
-  switchMap,
-  tap,
-  withLatestFrom
-} from 'rxjs/operators'
+import { distinctUntilChanged, map, shareReplay, startWith, switchMap, tap, withLatestFrom } from 'rxjs/operators'
 import { environment } from '../../../environments/environment'
 import { FeatureService, FeatureStoreService, Store } from '../../@core/services'
 import { TranslationBaseComponent } from '../language/translation-base.component'
 
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'pac-feature-toggle',
   templateUrl: './feature-toggle.component.html',
   styleUrls: ['./feature-toggle.component.scss']
 })
-export class FeatureToggleComponent extends TranslationBaseComponent implements OnInit, OnChanges {
+export class FeatureToggleComponent extends TranslationBaseComponent implements OnInit {
+  private readonly _activatedRoute = inject(ActivatedRoute)
+  private readonly _featureService = inject(FeatureService)
+  private readonly _featureStoreService = inject(FeatureStoreService)
+  private readonly _storeService = inject(Store)
+  private readonly _matDialog = inject(MatDialog)
+
   loading = false
   featureToggles = []
   featureTogglesDefinitions: IFeatureToggle[] = []
@@ -34,7 +33,7 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
     startWith(this._activatedRoute.snapshot.data),
     map((data) => data?.isOrganization),
     distinctUntilChanged(),
-    untilDestroyed(this),
+    takeUntilDestroyed(),
     shareReplay(1)
   )
   public readonly organization$ = this._storeService.selectedOrganization$
@@ -52,21 +51,10 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
       }
       return this._featureStoreService.loadFeatureOrganizations(['feature'], request).pipe(map(({ items }) => items))
     }),
-    untilDestroyed(this),
+    takeUntilDestroyed(),
     shareReplay(1)
   )
 
-  constructor(
-    private readonly _activatedRoute: ActivatedRoute,
-    private readonly _featureService: FeatureService,
-    private readonly _featureStoreService: FeatureStoreService,
-    private readonly _storeService: Store,
-    public readonly translationService: TranslateService,
-    private readonly _matDialog: MatDialog
-  ) {
-    super()
-  }
-
   ngOnInit(): void {
     combineLatest([this.featureTenant$, this.featureOrganizations$])
       .pipe(withLatestFrom(combineLatest([this.isOrganization$, this.organization$])), untilDestroyed(this))
@@ -99,26 +87,24 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
       .subscribe()
   }
 
-  ngOnChanges(change: SimpleChanges): void {}
-
   getFeatures() {
     this._featureStoreService.loadFeatures(['children']).pipe(untilDestroyed(this)).subscribe()
   }
 
-  async featureChanged(event: boolean, feature: IFeature) {
+  async featureChanged(isEnabled: boolean, feature: IFeature) {
     const result = await firstValueFrom(
       this._matDialog
         .open(CountdownConfirmationComponent, {
-          // context: {
-          // 	recordType: feature.description,
-          // 	isEnabled: isEnabled
-          // },
+          data: {
+          	recordType: feature.description,
+          	isEnabled: isEnabled
+          },
         })
         .afterClosed()
     )
 
     if (result) {
-      await this.emitFeatureToggle({ feature, isEnabled: !!event })
+      await this.emitFeatureToggle({ feature, isEnabled: !!isEnabled })
     } else {
       if (!environment.IS_ELECTRON) {
         window.location.reload()
@@ -126,18 +112,18 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
     }
   }
 
-  async emitFeatureToggle({feature, isEnabled}: { feature: IFeature; isEnabled: boolean }) {
+  async emitFeatureToggle({ feature, isEnabled }: { feature: IFeature; isEnabled: boolean }) {
     const isOrganization = await firstValueFrom(this.isOrganization$)
     const organization = await firstValueFrom(this.organization$)
     const { id: featureId } = feature
-        const request = {
-          featureId,
-          isEnabled
-        }
-        if (organization && isOrganization) {
-          const { id: organizationId } = organization
-          request['organizationId'] = organizationId
-        }
+    const request = {
+      featureId,
+      isEnabled
+    }
+    if (organization && isOrganization) {
+      const { id: organizationId } = organization
+      request['organizationId'] = organizationId
+    }
     await firstValueFrom(this._featureStoreService.changedFeature(request))
     if (!environment.IS_ELECTRON) {
       window.location.reload()
diff --git a/apps/cloud/src/app/@theme/header/organization-selector/organization-selector.component.ts b/apps/cloud/src/app/@theme/header/organization-selector/organization-selector.component.ts
index 5b24dafab..698e96333 100644
--- a/apps/cloud/src/app/@theme/header/organization-selector/organization-selector.component.ts
+++ b/apps/cloud/src/app/@theme/header/organization-selector/organization-selector.component.ts
@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, DestroyRef, OnInit, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { MatIconModule } from '@angular/material/icon'
 import { MatMenuModule } from '@angular/material/menu'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { Ability } from '@casl/ability'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { nonNullable } from '@metad/core'
 import { uniqBy } from 'lodash-es'
 import { filter, map, shareReplay, switchMap, tap } from 'rxjs'
@@ -12,7 +12,7 @@ import { AbilityActions, IOrganization, Store, UsersOrganizationsService } from
 import { OrgAvatarComponent } from '../../../@shared'
 import { TranslationBaseComponent } from '../../../@shared/language/translation-base.component'
 
-@UntilDestroy()
+
 @Component({
   standalone: true,
   selector: 'pac-organization-selector',
@@ -23,6 +23,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
   private readonly store = inject(Store)
   private readonly userOrganizationService = inject(UsersOrganizationsService)
   private readonly ability = inject(Ability)
+  private readonly destroyRef = inject(DestroyRef)
 
   selectedOrganization: IOrganization
 
@@ -76,7 +77,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
             ]
           : organizations
       ),
-      untilDestroyed(this),
+      takeUntilDestroyed(),
       shareReplay(1)
     )
 
@@ -94,7 +95,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
           this.selectedOrganization = organization
           this.store.featureOrganizations = organization.featureOrganizations ?? []
         }),
-        untilDestroyed(this)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe()
   }
@@ -108,7 +109,10 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
       this.store.selectedOrganization = null
       this.store.organizationId = null
       this.store.selectedEmployee = null
-      this.selectedOrganization = { name: 'All Org', id: null } as IOrganization
+      this.selectedOrganization = {
+        name: this.getTranslation('PAC.Header.Organization.AllOrg', { Default: 'All Org' }),
+        id: null
+      } as IOrganization
     }
   }
 }
diff --git a/apps/cloud/src/app/app.component.ts b/apps/cloud/src/app/app.component.ts
index e6afe46bb..5c1922f14 100644
--- a/apps/cloud/src/app/app.component.ts
+++ b/apps/cloud/src/app/app.component.ts
@@ -67,7 +67,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     combineLatest([this.appService.isMobile$, this.store.preferredTheme$])
     .subscribe(([isMobile, preferredTheme]) => {
-      const [primaryTheme, primaryColor] = preferredTheme.split('-')
+      const [primaryTheme, primaryColor] = (preferredTheme ?? '').split('-')
       preferredTheme = preferredTheme ?? ThemesEnum.default
       const theme = `ngm-theme-${preferredTheme} ${primaryTheme} ${preferredTheme}`
       // for body
diff --git a/apps/cloud/src/app/features/features.module.ts b/apps/cloud/src/app/features/features.module.ts
index df8496f7a..2bc2ab352 100644
--- a/apps/cloud/src/app/features/features.module.ts
+++ b/apps/cloud/src/app/features/features.module.ts
@@ -12,6 +12,7 @@ import { DataSource, Type } from '@metad/ocap-core'
 import { LetDirective } from '@ngrx/component'
 import { PacAuthModule } from '@metad/cloud/auth'
 import { NxTableModule } from '@metad/components/table'
+import { NgmFormlyModule } from '@metad/formly'
 import { NgmCopilotService } from '@metad/core'
 import { PACMaterialThemeModule } from '@metad/material-theme'
 import { NX_STORY_FEED, NX_STORY_MODEL, NX_STORY_STORE } from '@metad/story/core'
@@ -50,7 +51,10 @@ import { FeaturesComponent } from './features.component'
     CopilotChatComponent,
     NxTableModule.forRoot(),
     DensityDirective,
-    CopilotGlobalComponent
+    CopilotGlobalComponent,
+
+    // Formly
+    NgmFormlyModule.forRoot({}),
   ],
   providers: [
     DirtyCheckGuard,
diff --git a/apps/cloud/src/app/features/home/_home-theme.scss b/apps/cloud/src/app/features/home/_home-theme.scss
index 7f7f32e62..448cae153 100644
--- a/apps/cloud/src/app/features/home/_home-theme.scss
+++ b/apps/cloud/src/app/features/home/_home-theme.scss
@@ -1,21 +1,17 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '@angular/material' as mat;
-@use './insight/insight-theme' as insight;
 @use './dashboard/dashboard-theme' as dashboard;
 
 @mixin color($theme) {
-  @include insight.color($theme);
   @include dashboard.color($theme);
 }
 
 @mixin typography($theme) {
-  @include insight.typography($theme);
   @include dashboard.typography($theme);
 }
 
 @mixin density($theme) {
-  @include insight.density($theme);
   @include dashboard.density($theme);
 }
 
diff --git a/apps/cloud/src/app/features/home/_home.scss b/apps/cloud/src/app/features/home/_home.scss
index 2a65f5447..bddfc43a2 100644
--- a/apps/cloud/src/app/features/home/_home.scss
+++ b/apps/cloud/src/app/features/home/_home.scss
@@ -1,3 +1,5 @@
+@import './insight/_insight.component';
+
 .pac-home__content {
   .pac-home__gridster-item {
     background: transparent;
diff --git a/apps/cloud/src/app/features/home/home.component.ts b/apps/cloud/src/app/features/home/home.component.ts
index 1e43e3b73..c077d577f 100644
--- a/apps/cloud/src/app/features/home/home.component.ts
+++ b/apps/cloud/src/app/features/home/home.component.ts
@@ -1,6 +1,7 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatDialogModule } from '@angular/material/dialog'
@@ -14,12 +15,11 @@ import { MatTabsModule } from '@angular/material/tabs'
 import { RouterModule } from '@angular/router'
 import { NgmCommonModule } from '@metad/ocap-angular/common'
 import { AppearanceDirective, ButtonGroupDirective, DensityDirective } from '@metad/ocap-angular/core'
-import { UntilDestroy } from '@ngneat/until-destroy'
 import { TranslateModule } from '@ngx-translate/core'
+import { AnalyticsFeatures, FeatureEnum, Store, routeAnimations } from '../../@core'
 import { AppService } from '../../app.service'
-import { routeAnimations } from '../../@core'
 
-@UntilDestroy({ checkProperties: true })
+
 @Component({
   standalone: true,
   imports: [
@@ -47,51 +47,66 @@ import { routeAnimations } from '../../@core'
   ],
   selector: 'pac-home',
   template: `
-<nav mat-tab-nav-bar [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start" color="accent" disableRipple displayDensity="cosy" class="pac-home__navigation p-0 sm:px-2 md:px-8">
-  <span
-    mat-tab-link
-    routerLink="."
-    routerLinkActive
-    #rla="routerLinkActive"
-    [routerLinkActiveOptions]="{ exact: true }"
-    [active]="rla.isActive"
-  >
-    {{ 'PAC.MENU.HOME.TODAY' | translate: { Default: 'Today' } }}
-  </span>
-  <span
-    mat-tab-link
-    routerLink="./catalog"
-    routerLinkActive
-    #rla2="routerLinkActive"
-    [routerLinkActiveOptions]="{ exact: true }"
-    [active]="rla2.isActive"
-  >
-    {{ 'PAC.MENU.HOME.Catalog' | translate: { Default: 'Catalog' } }}
-  </span>
-  <span
-    mat-tab-link
-    routerLink="./trending"
-    routerLinkActive
-    #rla3="routerLinkActive"
-    [routerLinkActiveOptions]="{ exact: true }"
-    [active]="rla3.isActive"
-  >
-    {{ 'PAC.MENU.HOME.Trending' | translate: { Default: 'Trending' } }}
-  </span>
-  <span *ngIf="copilotEnabled$ | async"
-    mat-tab-link
-    routerLink="./insight"
-    routerLinkActive
-    #rla4="routerLinkActive"
-    [routerLinkActiveOptions]="{ exact: true }"
-    [active]="rla4.isActive"
-  >
-    {{ 'PAC.MENU.HOME.Insight' | translate: { Default: 'Insight' } }}
-  </span>
-</nav>
-<mat-tab-nav-panel #tabPanel class="flex-1 overflow-auto" [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
-  <router-outlet #o="outlet"></router-outlet>
-</mat-tab-nav-panel>
+    <nav
+      mat-tab-nav-bar
+      [tabPanel]="tabPanel"
+      mat-stretch-tabs="false"
+      mat-align-tabs="start"
+      color="accent"
+      disableRipple
+      displayDensity="cosy"
+      class="pac-home__navigation p-0 sm:px-2 md:px-8"
+    >
+      <span
+        mat-tab-link
+        routerLink="."
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [active]="rla.isActive"
+      >
+        {{ 'PAC.MENU.HOME.TODAY' | translate: { Default: 'Today' } }}
+      </span>
+      <span *ngIf="hasFeatureEnabled(AnalyticsFeatures.FEATURE_HOME_CATALOG)"
+        mat-tab-link
+        routerLink="./catalog"
+        routerLinkActive
+        #rla2="routerLinkActive"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [active]="rla2.isActive"
+      >
+        {{ 'PAC.MENU.HOME.Catalog' | translate: { Default: 'Catalog' } }}
+      </span>
+      <span
+        *ngIf="hasFeatureEnabled(AnalyticsFeatures.FEATURE_HOME_TREND)"
+        mat-tab-link
+        routerLink="./trending"
+        routerLinkActive
+        #rla3="routerLinkActive"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [active]="rla3.isActive"
+      >
+        {{ 'PAC.MENU.HOME.Trending' | translate: { Default: 'Trending' } }}
+      </span>
+      <span
+        *ngIf="copilotEnabled() && hasFeatureEnabled(AnalyticsFeatures.FEATURE_HOME_INSIGHT)"
+        mat-tab-link
+        routerLink="./insight"
+        routerLinkActive
+        #rla4="routerLinkActive"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [active]="rla4.isActive"
+      >
+        {{ 'PAC.MENU.HOME.Insight' | translate: { Default: 'Insight' } }}
+      </span>
+    </nav>
+    <mat-tab-nav-panel
+      #tabPanel
+      class="relative flex-1 overflow-auto"
+      [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path"
+    >
+      <router-outlet #o="outlet"></router-outlet>
+    </mat-tab-nav-panel>
   `,
   styles: [
     `
@@ -109,6 +124,13 @@ import { routeAnimations } from '../../@core'
 })
 export class HomeComponent {
   private readonly appService = inject(AppService)
+  private readonly store = inject(Store)
+  public readonly copilotEnabled = toSignal(this.appService.copilotEnabled$)
+
+  FeatureEnum = FeatureEnum
+  AnalyticsFeatures = AnalyticsFeatures
 
-  public readonly copilotEnabled$ = this.appService.copilotEnabled$
+  hasFeatureEnabled(featureKey: FeatureEnum | AnalyticsFeatures) {
+    return this.store.hasFeatureEnabled(featureKey)
+  }
 }
diff --git a/apps/cloud/src/app/features/home/insight/_insight-theme.scss b/apps/cloud/src/app/features/home/insight/_insight-theme.scss
deleted file mode 100644
index 448ba88ee..000000000
--- a/apps/cloud/src/app/features/home/insight/_insight-theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@use '@angular/material' as mat;
-
-@mixin color($theme) {
-  $config: mat.get-color-config($theme);
-
-  $primary: map.get($config, 'primary');
-  $accent: map.get($config, accent);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-
-  .mat-autocomplete-panel.pac-insight__autocomplete {
-    @apply mb-4;
-  }
-
-  .pac-indight__answer-panel .mat-expansion-panel-body {
-    padding: 0;
-  }
-}
-
-@mixin typography($theme) {
-}
-
-@mixin density($theme) {
-}
-
-@mixin theme($theme) {
-  $color: mat.get-color-config($theme);
-  $density: mat.get-density-config($theme);
-  $typography: mat.get-typography-config($theme);
-
-  @if $color != null {
-    @include color($color);
-  }
-  @if $density != null {
-    @include density($density);
-  }
-  @if $typography != null {
-    @include typography($typography);
-  }
-}
diff --git a/apps/cloud/src/app/features/home/insight/_insight.component.scss b/apps/cloud/src/app/features/home/insight/_insight.component.scss
new file mode 100644
index 000000000..4fa22d755
--- /dev/null
+++ b/apps/cloud/src/app/features/home/insight/_insight.component.scss
@@ -0,0 +1,7 @@
+.mat-autocomplete-panel.pac-insight__autocomplete {
+  @apply mb-4;
+}
+
+.pac-indight__answer-panel .mat-expansion-panel-body {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/home/insight/insight.component.html b/apps/cloud/src/app/features/home/insight/insight.component.html
index 0851e4857..65346af5f 100644
--- a/apps/cloud/src/app/features/home/insight/insight.component.html
+++ b/apps/cloud/src/app/features/home/insight/insight.component.html
@@ -1,6 +1,6 @@
 <div class="relative flex-1 flex flex-col items-center overflow-auto p-4" [class.pac-indight__expand-model]="showModel() && entityType()">
   <mat-accordion *ngIf="answers()?.length" class="flex-1 w-full md:w-1/2 lg:1/3 gap-4">
-    <mat-expansion-panel *ngFor="let answer of answers(); index as index" class="pac-indight__answer-panel group" togglePosition="before"
+    <mat-expansion-panel *ngFor="let answer of answers(); index as index; trackBy: trackByKey" class="pac-indight__answer-panel group" togglePosition="before"
       [expanded]="answer.expanded"
     >
       <mat-expansion-panel-header class="pac-indight__answer-header">
@@ -14,6 +14,12 @@
             (click)="$event.stopPropagation();$event.preventDefault();setPrompt(answer.title)">
             <mat-icon fontSet="material-icons-outlined" >edit</mat-icon>
           </button>
+
+          <button mat-icon-button displayDensity="compact" class="shrink-0 opacity-0 group-hover:opacity-100 duration-300"
+            [matTooltip]=" 'Story.Widget.Explore' | translate: {Default: 'Explore'} "
+            (click)="$event.stopPropagation();$event.preventDefault();openExplore(answer)">
+            <mat-icon fontSet="material-icons-outlined">explore</mat-icon>
+          </button>
           
           <mat-icon fontSet="material-icons-outlined" class="opacity-0 group-hover:opacity-100 duration-300" displayDensity="compact"
             [matTooltip]="answer.message">question_answer</mat-icon>
@@ -42,9 +48,8 @@
         <ngm-analytical-card *ngIf="answer.dataSettings" class="h-[300px]" 
           [dataSettings]="answer.dataSettings"
           [chartOptions]="answer.chartOptions"
-          [chartSettings]="{}"
-          [options]="{
-          }"
+          [chartSettings]="answer.chartSettings"
+          [options]="answer.options"
           [slicers]="answer.slicers"
         >
           <button mat-icon-button ngmAction displayDensity="cosy" class="ngm-menu-trigger opacity-20 group-hover:opacity-100 duration-200"
@@ -239,3 +244,10 @@
 
 <pac-copilot-enable *ngIf="copilotNotEnabled$ | async" class="z-[101]">
 </pac-copilot-enable>
+
+
+<ngm-story-explorer *ngIf="showExplorer()" class="absolute top-0 left-0 w-full h-full z-20"
+  cdkDropListGroup
+  [data]="explore()"
+  (closed)="closeExplorer($event)"
+></ngm-story-explorer>
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/home/insight/insight.component.scss b/apps/cloud/src/app/features/home/insight/insight.component.scss
index 7bfd5c70e..87bf25cd0 100644
--- a/apps/cloud/src/app/features/home/insight/insight.component.scss
+++ b/apps/cloud/src/app/features/home/insight/insight.component.scss
@@ -18,7 +18,7 @@
 }
 
 .pac-indight__answer-header.mat-expansion-panel-header {
-  @apply px-2;
+  @apply pr-2;
 }
 
 .ngm-select-element:focus {
@@ -26,7 +26,7 @@
 }
 
 .mat-mdc-input-element.mat-mdc-autocomplete-trigger {
-  @apply ml-0;
+  @apply ml-0 h-6;
 }
 
 .pac-insight__bottom-padding {
diff --git a/apps/cloud/src/app/features/home/insight/insight.component.ts b/apps/cloud/src/app/features/home/insight/insight.component.ts
index d82cb6bca..aee11e265 100644
--- a/apps/cloud/src/app/features/home/insight/insight.component.ts
+++ b/apps/cloud/src/app/features/home/insight/insight.component.ts
@@ -33,6 +33,8 @@ import { firstValueFrom } from 'rxjs'
 import { ToastrService } from '../../../@core'
 import { CopilotEnableComponent, MaterialModule, StorySelectorComponent } from '../../../@shared'
 import { InsightService } from './insight.service'
+import { StoryExplorerModule } from '@metad/story'
+import { QuestionAnswer } from './types'
 
 
 @Component({
@@ -55,7 +57,8 @@ import { InsightService } from './insight.service'
     NxSelectionModule,
     NgmEntityPropertyComponent,
 
-    CopilotEnableComponent
+    CopilotEnableComponent,
+    StoryExplorerModule
   ],
   selector: 'pac-home-insight',
   templateUrl: 'insight.component.html',
@@ -87,7 +90,7 @@ export class InsightComponent {
     return this.insightService.suggestedPrompts
   }
 
-  readonly answers = signal([])
+  readonly answers = signal<QuestionAnswer[]>([])
 
   answering = false
   askController: AbortController
@@ -128,6 +131,9 @@ export class InsightComponent {
   })
 
   showModel = signal(null)
+  // Story explorer
+  showExplorer = signal(false)
+  explore = signal(null)
 
   private promptControlSub = this.promptControl.valueChanges.pipe(takeUntilDestroyed())
     .subscribe(() => (this.insightService.error = ''))
@@ -146,6 +152,9 @@ export class InsightComponent {
   compareWithName(a, b) {
     return a?.name === b?.name
   }
+  trackByKey(index, item) {
+    return item?.key
+  }
 
   setPrompt(prompt: string) {
     this.promptControl.setValue(prompt)
@@ -207,11 +216,12 @@ export class InsightComponent {
     this.askController = new AbortController()
     this.answering = true
 
-    const _answer = {
+    const _answer  = {
+      key: uuid(),
       title: prompt,
       expanded: true,
       answering: true
-    }
+    } as QuestionAnswer
 
     // Append answer
     this.answers.set([...this.answers(), _answer])
@@ -230,7 +240,7 @@ export class InsightComponent {
         ...answer,
         expanded: true,
         answering: false
-      },
+      } as QuestionAnswer,
       ...this.answers().slice(index + 1)
     ])
 
@@ -289,7 +299,7 @@ export class InsightComponent {
         )
         .onAction()
         .subscribe(() => {
-          this.router.navigate([`/story/${result.storyId}`], {
+          this.router.navigate([`/story/${result.storyId}/edit`], {
             queryParams: {
               pageKey: result.pageKey,
               widgetKey: result.key
@@ -298,6 +308,35 @@ export class InsightComponent {
         })
     }
   }
+
+  async openExplore(answer) {
+    this.showExplorer.set(true)
+    this.explore.set(answer)
+  }
+
+  closeExplorer(event) {
+    this.showExplorer.set(false)
+    this.updateAnswer(this.explore().key, {
+      ...event,
+      dataSettings: {
+        ...event.dataSettings,
+        selectionVariant: null
+      },
+      slicers: event.dataSettings.selectionVariant?.selectOptions ?? []
+    })
+  }
+
+  updateAnswer(key: string, event: Partial<QuestionAnswer>) {
+    const index = this.answers().findIndex((n) => n.key === key)
+    this.answers.set([
+      ...this.answers().slice(0, index),
+      {
+        ...this.answers()[index],
+        ...event
+      },
+      ...this.answers().slice(index + 1)
+    ])
+  }
 }
 
 export function addAccordionWrapper(chartOptions) {
diff --git a/apps/cloud/src/app/features/home/insight/insight.service.ts b/apps/cloud/src/app/features/home/insight/insight.service.ts
index 513acacc8..b5173a708 100644
--- a/apps/cloud/src/app/features/home/insight/insight.service.ts
+++ b/apps/cloud/src/app/features/home/insight/insight.service.ts
@@ -23,7 +23,7 @@ import { BehaviorSubject, combineLatest, debounceTime, filter, firstValueFrom, m
 import { getSemanticModelKey } from '@metad/story/core'
 import { nonNullable } from '@metad/core'
 import zodToJsonSchema from 'zod-to-json-schema'
-import { ChartSchema, SuggestPromptsSchema } from './types'
+import { ChartSchema, SuggestsSchema } from './types'
 import { calcEntityTypePrompt, CopilotService, registerModel } from '../../../@core'
 
 
@@ -148,8 +148,8 @@ export class InsightService {
     this.model = model
     if (!this._suggestedPrompts()[getSemanticModelKey(model)]) {
       this.registerModel(model)
-      const prompts = await this.suggestPrompts()
-      this._suggestedPrompts.set({...this._suggestedPrompts(), [getSemanticModelKey(model)]: prompts})
+      const answer = await this.suggestPrompts()
+      this._suggestedPrompts.set({...this._suggestedPrompts(), [getSemanticModelKey(model)]: answer.suggests})
     }
   }
 
@@ -157,8 +157,8 @@ export class InsightService {
     this.error = null
     this.cube.set(cube)
     if (cube) {
-      const prompts = await this.suggestPrompts()
-      this._suggestedPrompts.set({...this._suggestedPrompts(), [getSemanticModelKey(this.model) + this.cube().name]: prompts})
+      const answer = await this.suggestPrompts()
+      this._suggestedPrompts.set({...this._suggestedPrompts(), [getSemanticModelKey(this.model) + this.cube().name]: answer.suggests})
     }
   }
 
@@ -361,7 +361,7 @@ ${this.getEntityTypePrompt(entityType)}
               {
                 name: 'create_suggests',
                 description: 'Should always be used to properly format output',
-                parameters: zodToJsonSchema(SuggestPromptsSchema)
+                parameters: zodToJsonSchema(SuggestsSchema)
               }
             ],
             function_call: { name: 'create_suggests' }
diff --git a/apps/cloud/src/app/features/home/insight/types.ts b/apps/cloud/src/app/features/home/insight/types.ts
index 34d6b6b75..c06a02389 100644
--- a/apps/cloud/src/app/features/home/insight/types.ts
+++ b/apps/cloud/src/app/features/home/insight/types.ts
@@ -1,3 +1,4 @@
+import { DataSettings, ISlicer } from '@metad/ocap-core';
 import { z } from 'zod'
 
 const ChartTypes = ['Bar', 'Column', 'Pie'] as const
@@ -53,4 +54,22 @@ export const ChartSchema = z.object({
   ).describe('The slicers used by the chart')
 })
 
-export const SuggestPromptsSchema = z.array(z.string().describe('The suggested prompt')).describe('The suggested prompts')
\ No newline at end of file
+export const SuggestsSchema = z.object({
+  suggests: z.array(
+    z.string().describe('The suggested prompt')
+  ).describe('The suggested prompts')
+})
+
+export interface QuestionAnswer {
+  key: string;
+  answering: boolean
+  chartOptions: any
+  dataSettings: DataSettings
+  chartSettings: any
+  options?: any
+  expanded: boolean
+  isCube: boolean
+  message: string
+  slicers: ISlicer[]
+  title: string
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/_project.component.scss b/apps/cloud/src/app/features/project/_project.component.scss
index 151713224..6d877f77e 100644
--- a/apps/cloud/src/app/features/project/_project.component.scss
+++ b/apps/cloud/src/app/features/project/_project.component.scss
@@ -1,3 +1,6 @@
+.pac-project__router-link {
+  @apply hover:bg-slate-100;
+}
 .pac-project__router-link.active {
   @apply bg-slate-100 hover:bg-slate-200 dark:bg-slate-100/10 dark:hover:bg-slate-200/10;
 }
diff --git a/apps/cloud/src/app/features/project/project.module.ts b/apps/cloud/src/app/features/project/project.module.ts
index d9f4d1b1e..2f57054f1 100644
--- a/apps/cloud/src/app/features/project/project.module.ts
+++ b/apps/cloud/src/app/features/project/project.module.ts
@@ -1,24 +1,10 @@
 import { A11yModule } from '@angular/cdk/a11y'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { MetadFormlyMatModule } from '@metad/formly-mat'
-import { MetadFormlyAccordionModule } from '@metad/formly-mat/accordion'
-import { NgmCommonModule, NgmTreeSelectComponent, ResizerModule, TreeTableModule } from '@metad/ocap-angular/common'
-import { OcapCoreModule } from '@metad/ocap-angular/core'
-import { FormlyModule } from '@ngx-formly/core'
-import { FormlyMaterialModule } from '@ngx-formly/material'
-import { FormlyMatSliderModule } from '@ngx-formly/material/slider'
-import { FormlyMatToggleModule } from '@ngx-formly/material/toggle'
 import { NgmDialogComponent } from '@metad/components/dialog'
 import { NxTableModule } from '@metad/components/table'
-import { PACFormlyButtonToggleModule } from '@metad/formly/button-toggle'
-import { PACFormlyChartTypeModule } from '@metad/formly/chart-type'
-import { PACFormlyCodeEditorModule } from '@metad/formly/code-editor'
-import { PACFormlyDesignerModule } from '@metad/formly/designer'
-import { PACFormlyEmptyModule } from '@metad/formly/empty'
-import { PACFormlyTableModule } from '@metad/formly/mat-table'
-import { PACFormlyPropertySelectModule } from '@metad/formly/property-select'
-import { PACFormlyMatSlicersModule } from '@metad/formly/slicers'
+import { NgmCommonModule, NgmTreeSelectComponent, ResizerModule, TreeTableModule } from '@metad/ocap-angular/common'
+import { OcapCoreModule } from '@metad/ocap-angular/core'
 import { NxStorySettingsModule } from '@metad/story'
 import { TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'
 import { NgxEchartsModule } from 'ngx-echarts'
@@ -45,21 +31,21 @@ import { ProjectRoutingModule } from './project-routing.module'
       serverLogLevel: NgxLoggerLevel.ERROR
     }),
 
-    // Formly
-    FormlyModule.forRoot(),
-    FormlyMaterialModule,
-    FormlyMatToggleModule,
-    FormlyMatSliderModule,
-    MetadFormlyMatModule,
-    PACFormlyChartTypeModule,
-    PACFormlyMatSlicersModule,
-    PACFormlyPropertySelectModule,
-    PACFormlyCodeEditorModule,
-    PACFormlyDesignerModule,
-    PACFormlyEmptyModule,
-    PACFormlyButtonToggleModule,
-    PACFormlyTableModule,
-    MetadFormlyAccordionModule,
+    // // Formly
+    // FormlyModule.forRoot(),
+    // FormlyMaterialModule,
+    // FormlyMatToggleModule,
+    // FormlyMatSliderModule,
+    // MetadFormlyMatModule,
+    // PACFormlyChartTypeModule,
+    // PACFormlyMatSlicersModule,
+    // PACFormlyPropertySelectModule,
+    // PACFormlyCodeEditorModule,
+    // PACFormlyDesignerModule,
+    // PACFormlyEmptyModule,
+    // PACFormlyButtonToggleModule,
+    // PACFormlyTableModule,
+    // MetadFormlyAccordionModule,
 
     OcapCoreModule.forRoot(),
     NgmCommonModule,
diff --git a/apps/cloud/src/app/features/semantic-model/model.module.ts b/apps/cloud/src/app/features/semantic-model/model.module.ts
index a63fbe292..0ad37991c 100644
--- a/apps/cloud/src/app/features/semantic-model/model.module.ts
+++ b/apps/cloud/src/app/features/semantic-model/model.module.ts
@@ -1,15 +1,5 @@
 import { NgModule } from '@angular/core'
-import { MetadFormlyMatModule } from '@metad/formly-mat'
-import { MetadFormlyEmptyModule } from '@metad/formly-mat/empty'
-import { FormlyModule } from '@ngx-formly/core'
-import { FormlyMatCheckboxModule } from '@metad/formly/checkbox'
-import { PACFormlyCodeEditorModule } from '@metad/formly/code-editor'
-import { PACFormlyInputModule } from '@metad/formly/input'
-import { FormlyMatToggleModule } from '@metad/formly/mat-toggle'
-import { PACFormlyPropertySelectModule } from '@metad/formly/property-select'
-import { PACFormlySelectModule } from '@metad/formly/select'
-import { PACFormlyMatSlicersModule } from '@metad/formly/slicers'
-import { PACFormlyTextAreaModule } from '@metad/formly/textarea'
+import { MetadFormlyExpansionModule } from '@metad/formly-mat/expansion'
 import { NgxPermissionsModule } from 'ngx-permissions'
 import { MaterialModule, SharedModule } from '../../@shared'
 import { SemanticModelRoutingModule } from './model-routing.module'
@@ -23,20 +13,10 @@ import { SemanticModelRoutingModule } from './model-routing.module'
 
     NgxPermissionsModule,
 
-    // Formly
-    FormlyModule.forRoot({
-      validationMessages: [{ name: 'required', message: 'This field is required' }]
-    }),
-    FormlyMatToggleModule,
-    MetadFormlyMatModule,
-    MetadFormlyEmptyModule,
-    PACFormlyMatSlicersModule,
-    PACFormlyPropertySelectModule,
-    PACFormlyCodeEditorModule,
-    FormlyMatCheckboxModule,
-    PACFormlyInputModule,
-    PACFormlySelectModule,
-    PACFormlyTextAreaModule
+    /**
+     * @deprecated use accordion
+     */
+    MetadFormlyExpansionModule
   ],
   providers: []
 })
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.html b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.html
index 6df66ff39..2fa898346 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.html
@@ -1,5 +1,5 @@
 <ngm-splitter [type]="SplitterType.Vertical" size='10rem'>
-  <ngm-splitter-pane class="pac-model__sub-area shadow-sm rounded-md m-1" minSize="35px">
+  <ngm-splitter-pane class="pac-model__sub-area" minSize="35px">
     <mat-toolbar class="pac-sub-toolbar flex justify-between item-center" displayDensity="compact">
       <span>
         {{ 'PAC.MENU.DIMENSIONS' | translate: {Default: "Dimensions"} }}
@@ -42,7 +42,7 @@
   </ngm-splitter-pane>
   <ngm-splitter-pane minSize="70px">
     <ngm-splitter [type]="SplitterType.Vertical" size='10rem' class="flex-1">
-      <ngm-splitter-pane class="pac-model__sub-area shadow-sm rounded-md m-1" minSize="35px">
+      <ngm-splitter-pane class="pac-model__sub-area" minSize="35px">
         <mat-toolbar class="pac-sub-toolbar flex justify-between item-center" displayDensity="compact">
           <span>
             {{ 'PAC.MENU.MEASURES' | translate: {Default: "Measures"} }}
@@ -88,7 +88,7 @@
           </div>
       </ngm-splitter-pane>
 
-      <ngm-splitter-pane class="pac-model__sub-area shadow-sm rounded-md m-1" minSize="35px">
+      <ngm-splitter-pane class="pac-model__sub-area" minSize="35px">
         <mat-toolbar class="pac-sub-toolbar flex justify-between item-center" displayDensity="compact">
           <span>
             {{ 'PAC.MENU.CALCULATED_MEMBERS' | translate: {Default: "Calculated Members"} }}
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.scss b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.scss
index ae406193d..5518a0d59 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/cube-structure.component.scss
@@ -1,3 +1,7 @@
+:host {
+  @apply bg-white rounded-lg overflow-hidden shadow-lg border border-solid border-slate-200 m-1;
+}
+
 .pac-cdk-drop__placeholder {
   @apply bg-gray-200 border-dashed border-2 border-gray-400 min-h-[60px] transition-transform;
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.html b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.html
index 6ef7ac5af..db7a6ea73 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="pac-nav-toolbar flex" displayDensity="compact">
+<div class="pac-nav-toolbar w-full flex p-1" displayDensity="compact">
     <button mat-icon-button displayDensity="cosy" (click)="drawer.toggle()">
         <mat-icon fontSet="material-icons-round">segment</mat-icon>
     </button>
@@ -42,7 +42,7 @@
             <span *ngIf="(isMobile$ | async)==false">{{ 'PAC.MENU.Attributes' | translate: {Default: "Attributes"} }}</span>
         </div>
     </button>
-</mat-toolbar>
+</div>
 
 <mat-drawer-container class="flex-1" autosize [hasBackdrop]="false">
     <mat-drawer #designerDrawer class="ngm-story__designer-drawer mat-elevation-z"
@@ -52,7 +52,7 @@
         [opened]="detailsOpen"
         (openedChange)="onDesignerDrawerChange($event)"
     >
-        <ngm-settings-panel class="pac-model__settings-container m-2 rounded-lg shadow-lg overflow-hidden"
+        <ngm-settings-panel class="pac-model__settings-container"
             liveMode
             (opened)="detailsOpen=true"
         >
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
index 8a346d3c7..ea6e3a5b3 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/entity.component.scss
@@ -1,9 +1,7 @@
 :host {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
+  @apply relative h-full flex-1 flex flex-col bg-white;
+
+  --mat-sidenav-content-background-color: theme(colors.white);
 
   &.pac-fullscreen {
     position: fixed;
@@ -14,13 +12,11 @@
 }
 
 .pac-model-entity__workspace {
-  display: flex;
-  flex-direction: column;
+  @apply flex flex-col;
 }
+
 .pac-model-entity__workspace-router {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  @apply flex flex-col bg-white rounded-lg overflow-hidden shadow-lg border border-solid border-slate-200 m-1;
 }
 
 .ngm-property-modeling {
@@ -33,6 +29,10 @@
   margin: 5px 0;
 }
 
-// .pac-model__settings-container {
-//   width: 300px;
-// }
\ No newline at end of file
+.mat-drawer.mat-drawer-side {
+  @apply border-0;
+}
+
+.pac-model__settings-container {
+  @apply bg-white rounded-lg overflow-hidden shadow-lg border border-solid border-slate-200 m-1;
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.html b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.html
index 49ea79b1c..8de561f43 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.html
@@ -1,8 +1,8 @@
 <ngm-splitter [type]="SplitterType.Vertical" class="flex-1">
     <ngm-splitter-pane>
-        <div *ngIf="expression$ | async as expression; else tables" class="w-full h-full">
+        <div *ngIf="expression(); else tables" class="w-full h-full">
             <ngm-editor-sql #editor class="w-full h-full"
-                [ngModel]="expression"
+                [ngModel]="expression()"
                 (ngModelChange)="changeExpression($event)"
                 >
             </ngm-editor-sql>
@@ -111,7 +111,7 @@
 </ngm-splitter>
 
 <ng-template #tables>
-<div class="pac-cube-structure-drop w-full h-full"
+<div class="pac-cube-structure-drop w-full"
   cdkDropList
   [cdkDropListData]="tables$ | async"
   (cdkDropListDropped)="drop($event)"
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.scss b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.scss
index 2d7359bf6..e6c0e660a 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.scss
@@ -6,9 +6,7 @@
 }
 
 .pac-cube-structure-drop {
-  border: 1px dashed grey;
-  padding: 1rem;
-  margin: 2px;
+  @apply rounded-md m-1 border border-dashed border-slate-200 p-4;
 }
 
 .pac-cube__join-table-container {
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.ts b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.ts
index 8ca85291d..06b506f12 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.ts
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/structure/structure.component.ts
@@ -1,34 +1,41 @@
 import { CdkDrag, CdkDragDrop, CdkDragRelease, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnInit, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  HostBinding,
+  OnInit,
+  inject
+} from '@angular/core'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
+import { NxCoreService, nonBlank } from '@metad/core'
 import { SplitterType } from '@metad/ocap-angular/common'
+import { effectAction } from '@metad/ocap-angular/core'
 import {
   AggregationRole,
-  getEntityDimensions,
-  getEntityMeasures,
   Join,
-  pick,
   Property,
   PropertyDimension,
   PropertyHierarchy,
   PropertyLevel,
   PropertyMeasure,
-  Table
+  Table,
+  getEntityDimensions,
+  getEntityMeasures,
+  pick
 } from '@metad/ocap-core'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
-import { NxCoreService, nonBlank } from '@metad/core'
 import { ToastrService, uuid } from 'apps/cloud/src/app/@core'
 import { isEmpty, values } from 'lodash-es'
-import { combineLatest, firstValueFrom, Observable } from 'rxjs'
+import { Observable, combineLatest, firstValueFrom } from 'rxjs'
 import { combineLatestWith, filter, map, shareReplay, switchMap, tap, withLatestFrom } from 'rxjs/operators'
 import { TranslationBaseComponent } from '../../../../../@shared'
 import { SemanticModelService } from '../../model.service'
 import { MODEL_TYPE } from '../../types'
 import { ModelEntityService } from '../entity.service'
 import { newDimensionFromColumn } from '../types'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
-import { effectAction } from '@metad/ocap-angular/core'
 
-@UntilDestroy({ checkProperties: true })
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'pac-model-structure',
@@ -42,14 +49,17 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
   public coreService = inject(NxCoreService)
   public modelService = inject(SemanticModelService)
   public entityService = inject(ModelEntityService)
-  private _toastrService = inject(ToastrService)
-  private _cdr = inject(ChangeDetectorRef)
+  private readonly _toastrService = inject(ToastrService)
+  private readonly _cdr = inject(ChangeDetectorRef)
+  private readonly _destroyRef = inject(DestroyRef)
 
   dimensions: Property[] = []
   measures: Property[] = []
   allVisible = false
   get visibleIndeterminate() {
-    return !!(this.dimensions.find((item) => item.visible) || this.measures.find((item) => item.visible)) && this.allVisible
+    return (
+      !!(this.dimensions.find((item) => item.visible) || this.measures.find((item) => item.visible)) && this.allVisible
+    )
   }
   get visibleEmpty() {
     return !(this.dimensions.find((item) => item.visible) || this.measures.find((item) => item.visible))
@@ -68,12 +78,13 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
     shareReplay(1)
   )
   public readonly fectTableFieldOptions$ = this.fectTableFields$.pipe(
-    map((properties) => properties.map((property) => ({
-      key: property.name,
-      value: property,
-      caption: property.caption,
-
-    })))
+    map((properties) =>
+      properties.map((property) => ({
+        key: property.name,
+        value: property,
+        caption: property.caption
+      }))
+    )
   )
 
   options$ = combineLatest([this.modelService.wordWrap$, this.coreService.onThemeChange()]).pipe(
@@ -84,7 +95,7 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
     tap((options) => console.debug(`[pac-model-structure] editor options`, options))
   )
 
-  public readonly expression$ = this.entityService.cube$.pipe(map((cube) => cube?.expression))
+  public readonly expression = toSignal(this.entityService.cube$.pipe(map((cube) => cube?.expression)))
 
   private _tableJoins = {}
   private _tableTypes = {}
@@ -119,7 +130,7 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
           this.entityService.select((state) => state.measures)
         ),
         filter(([properties, dimensions, measures]) => isEmpty(this.dimensions) && isEmpty(this.measures)),
-        untilDestroyed(this)
+        takeUntilDestroyed(this._destroyRef)
       )
       .subscribe(([properties, dimensions, measures]) => {
         this.dimensions =
@@ -129,7 +140,9 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
           )
         this.measures =
           measures ??
-          properties.filter((item) => item.role === AggregationRole.measure || item.dataType?.toLowerCase() === 'numeric')
+          properties.filter(
+            (item) => item.role === AggregationRole.measure || item.dataType?.toLowerCase() === 'numeric'
+          )
         this._cdr.detectChanges()
       })
   }
@@ -158,19 +171,24 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
   }
 
   async confirmOverwriteCube() {
-    if (!this.dimensions.filter((item) => item.visible).length && !this.measures.filter((item) => item.visible).length) {
-      this._toastrService.warning('PAC.MODEL.ENTITY.PleaseSelectFields', {Default: 'Please select fields!'})
+    if (
+      !this.dimensions.filter((item) => item.visible).length &&
+      !this.measures.filter((item) => item.visible).length
+    ) {
+      this._toastrService.warning('PAC.MODEL.ENTITY.PleaseSelectFields', { Default: 'Please select fields!' })
       return false
     }
 
     const cube = await firstValueFrom(this.entityService.cube$)
     if (cube.dimensions?.length || cube.measures?.length) {
-      return await firstValueFrom(this._toastrService.confirm({
-        code: 'PAC.MODEL.ENTITY.ConfirmOverwriteCube',
-        params: {
-          Default: 'The cube configured. Confirm overwrite?'
-        }
-      }))
+      return await firstValueFrom(
+        this._toastrService.confirm({
+          code: 'PAC.MODEL.ENTITY.ConfirmOverwriteCube',
+          params: {
+            Default: 'The cube configured. Confirm overwrite?'
+          }
+        })
+      )
     }
 
     return true
@@ -189,7 +207,11 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
     const dimensions = this.dimensions
       .filter((item) => item.visible)
       // Xmla 数据源的直接同步，sql 数据源的 1 生成 olap 维度 2 生成 sql 维度
-      .map((item) => modelType === MODEL_TYPE.XMLA ? {...item, __id__: uuid(),} : newDimensionFromColumn(item, modelType === MODEL_TYPE.OLAP))
+      .map((item) =>
+        modelType === MODEL_TYPE.XMLA
+          ? { ...item, __id__: uuid() }
+          : newDimensionFromColumn(item, modelType === MODEL_TYPE.OLAP)
+      )
 
     const measures = this.measures
       .filter((item) => item.visible)
@@ -219,8 +241,7 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
   }
 
   async createDimension() {
-    const levels = this.dimensions
-      .filter((item) => item.visible)
+    const levels = this.dimensions.filter((item) => item.visible)
     this.entityService.addDimension({
       __id__: uuid(),
       name: '',
@@ -233,7 +254,7 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
             __id__: uuid(),
             name: property.name,
             caption: property.caption,
-            column: property.name,
+            column: property.name
           }))
         }
       ]
@@ -302,7 +323,7 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
     if (!this._tableJoins[table.__id__]) {
       this._tableJoins[table.__id__] = this.tables$.pipe(
         map((tables) => tables.find(({ __id__ }) => __id__ === table.__id__)?.join),
-        untilDestroyed(this),
+        takeUntilDestroyed(this._destroyRef),
         shareReplay(1)
       )
     }
@@ -312,24 +333,20 @@ export class ModelEntityStructureComponent extends TranslationBaseComponent impl
   selectTableType(table: Table) {
     if (!this._tableTypes[table?.name]) {
       this._tableTypes[table?.name] = this.modelService.selectOriginalEntityType(table?.name).pipe(
-        map((entityType) => values(entityType?.properties).map((property) => ({
-          value: property,
-          key: property.name,
-          caption: property.caption
-        }))),
-        untilDestroyed(this),
+        map((entityType) =>
+          values(entityType?.properties).map((property) => ({
+            value: property,
+            key: property.name,
+            caption: property.caption
+          }))
+        ),
+        takeUntilDestroyed(this._destroyRef),
         shareReplay(1)
       )
     }
     return this._tableTypes[table?.name]
   }
 
-  setModel(event) {
-    // 不再从编辑器修改模型
-    // this.entityService.setCube(event.cube)
-    // this.entityService.setEntityType(event.entityType)
-  }
-
   changeExpression(value) {
     this.entityService.setExpression(value)
   }
diff --git a/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.html b/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.html
index 44c3699cb..e4351a5a2 100644
--- a/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.html
@@ -9,7 +9,7 @@ <h4 style="pointer-events: none;">
         (modelChange)="onFormChange(model)">
     </formly-form>
 
-    <div *ngIf="model.preferences?.exposeXmla" class="w-full overflow-auto">
+    <div *ngIf="model.preferences?.exposeXmla" class="w-full overflow-auto mt-2">
         <a [href]="xmlaUrl">{{xmlaUrl}}</a>
     </div>
 </mat-dialog-content>
diff --git a/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.ts b/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.ts
index 57c80511f..9250c5384 100644
--- a/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.ts
+++ b/apps/cloud/src/app/features/semantic-model/model/preferences/preferences.component.ts
@@ -7,7 +7,7 @@ import { FORMLY_ROW, FORMLY_W_1_2 } from '@metad/story/designer'
 import { cloneDeep, merge } from 'lodash-es'
 import { firstValueFrom, map } from 'rxjs'
 import { LANGUAGES, Visibility } from '../../../../@core/types'
-import { TranslationBaseComponent } from 'apps/cloud/src/app/@shared/language/translation-base.component'
+import { TranslationBaseComponent } from '../../../../@shared'
 
 @Component({
   selector: 'pac-model-preferences',
@@ -152,7 +152,8 @@ export class ModelPreferencesComponent extends TranslationBaseComponent implemen
             key: 'exposeXmla',
             type: 'toggle',
             props: {
-              label: TRANSLATE?.EnableExposeXMLA ?? 'Expose XMLA Service'
+              label: TRANSLATE?.EnableExposeXMLA ?? 'Expose XMLA Service',
+              placeholder: TRANSLATE?.EnableExposeXMLA ?? 'Expose XMLA Service',
             }
           }
         ]
diff --git a/apps/cloud/src/app/features/setting/account/account.component.html b/apps/cloud/src/app/features/setting/account/account.component.html
index 9b6839d93..7e913d9fe 100644
--- a/apps/cloud/src/app/features/setting/account/account.component.html
+++ b/apps/cloud/src/app/features/setting/account/account.component.html
@@ -8,7 +8,8 @@
     <div class="text-base flex">{{user()?.email}}</div>
   </div>
 
-  <nav mat-tab-nav-bar class="pac-tab-nav-bar" color="accent" mat-align-tabs="center" mat-stretch-tabs="false" disableRipple class="w-full">
+  <nav mat-tab-nav-bar class="pac-tab-nav-bar w-full" color="accent" mat-align-tabs="center" mat-stretch-tabs="false" disableRipple
+    [tabPanel]="tabPanel">
     <span mat-tab-link [routerLink]="['profile']"
       routerLinkActive #rla="routerLinkActive"
       [routerLinkActiveOptions]="{exact: true}"
diff --git a/apps/cloud/src/app/features/setting/account/account.component.ts b/apps/cloud/src/app/features/setting/account/account.component.ts
index d5851d34a..03a3c41ff 100644
--- a/apps/cloud/src/app/features/setting/account/account.component.ts
+++ b/apps/cloud/src/app/features/setting/account/account.component.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common'
-import { Component, inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { MatDividerModule } from '@angular/material/divider'
 import { MatTabsModule } from '@angular/material/tabs'
 import { RouterModule } from '@angular/router'
 import { TranslateModule } from '@ngx-translate/core'
-import { Store } from '../../../@core'
+import { Store, routeAnimations } from '../../../@core'
 import { UserAvatarEditorComponent, UserPipe } from '../../../@shared'
 
 @Component({
@@ -13,6 +13,8 @@ import { UserAvatarEditorComponent, UserPipe } from '../../../@shared'
   selector: 'pac-account',
   templateUrl: './account.component.html',
   styleUrls: ['./account.component.scss'],
+  animations: [routeAnimations],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
     MatTabsModule,
diff --git a/apps/cloud/src/app/features/setting/business-area/business-area/business-area.component.ts b/apps/cloud/src/app/features/setting/business-area/business-area/business-area.component.ts
index 2d99d971c..e45d0923d 100644
--- a/apps/cloud/src/app/features/setting/business-area/business-area/business-area.component.ts
+++ b/apps/cloud/src/app/features/setting/business-area/business-area/business-area.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnDestroy, computed, effect, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { ActivatedRoute, Router } from '@angular/router'
-import { BusinessAreasService, BusinessType } from '@metad/cloud/state'
+import { BusinessAreasService } from '@metad/cloud/state'
 import { TranslateModule } from '@ngx-translate/core'
 import { MaterialModule } from 'apps/cloud/src/app/@shared'
 import { BehaviorSubject, distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs'
 import { BusinessAreaInfoFormComponent } from '../area-info-form/area-info-form.component'
 import { BusinessAreaUsersComponent } from '../area-users/area-users.component'
 import { BusinessAreaComponent } from '../business-area.component'
+import { BusinessType } from '@metad/contracts'
 
 @Component({
   standalone: true,
diff --git a/apps/cloud/src/app/features/setting/certification/certification.component.html b/apps/cloud/src/app/features/setting/certification/certification.component.html
index 12b4b685b..6d9ff1638 100644
--- a/apps/cloud/src/app/features/setting/certification/certification.component.html
+++ b/apps/cloud/src/app/features/setting/certification/certification.component.html
@@ -5,7 +5,7 @@
       <div class="pac-page-subtitle">{{ 'PAC.KEY_WORDS.DigitalAssetCertificationTypes' | translate: {Default: 'Digital Asset Certification Types'} }}</div>
     </div>
   
-    <div class="flex justify-start m-4">
+    <div class="flex justify-start">
       <div ngmButtonGroup>
         <button mat-raised-button color="primary" (click)="createCertification()">
           {{ 'PAC.ACTIONS.New' | translate: {Default: 'New'} }}
diff --git a/apps/cloud/src/app/features/setting/features/features.component.ts b/apps/cloud/src/app/features/setting/features/features.component.ts
index 0e8a11302..7aea62d32 100644
--- a/apps/cloud/src/app/features/setting/features/features.component.ts
+++ b/apps/cloud/src/app/features/setting/features/features.component.ts
@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core'
-import { Router } from '@angular/router'
-import { IOrganization } from '../../../@core'
-import { TranslationBaseComponent } from '../../../@shared/language/translation-base.component'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { Router } from '@angular/router'
+import { IOrganization, routeAnimations } from '../../../@core'
+import { TranslationBaseComponent } from '../../../@shared/'
 
 
 @Component({
   selector: 'pac-features',
   templateUrl: './features.component.html',
   styleUrls: ['./features.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [routeAnimations]
 })
 export class PACFeaturesComponent extends TranslationBaseComponent implements OnInit {
   private router = inject(Router)
@@ -17,9 +18,12 @@ export class PACFeaturesComponent extends TranslationBaseComponent implements On
   tabs: any[]
   organization: IOrganization
 
+  private langSub = this.translateService.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
+    this.loadTabs()
+  })
+
   ngOnInit(): void {
     this.loadTabs()
-    this._applyTranslationOnTabs()
   }
 
   loadTabs() {
@@ -39,12 +43,6 @@ export class PACFeaturesComponent extends TranslationBaseComponent implements On
     return `/settings/features/${tab}`
   }
 
-  private _applyTranslationOnTabs() {
-    this.translateService.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
-      this.loadTabs()
-    })
-  }
-
   navigate(url) {
     this.router.navigate([url])
   }
diff --git a/apps/cloud/src/app/features/setting/organizations/organizations.module.ts b/apps/cloud/src/app/features/setting/organizations/organizations.module.ts
index 6b2f2573b..221a879aa 100644
--- a/apps/cloud/src/app/features/setting/organizations/organizations.module.ts
+++ b/apps/cloud/src/app/features/setting/organizations/organizations.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { FormlyMatToggleModule } from '@ngx-formly/material/toggle'
 import { NxTableModule } from '@metad/components/table'
 import { OrgAvatarComponent, OrgAvatarEditorComponent, SharedModule } from '../../../@shared'
 import { OrganizationMutationComponent } from './organization-mutation/organization-mutation.component'
@@ -12,7 +11,6 @@ import { OrganizationsComponent } from './organizations.component'
   imports: [
     SharedModule,
     FormsModule,
-    FormlyMatToggleModule,
     ReactiveFormsModule,
     OrganizationsRoutingModule,
     NxTableModule,
diff --git a/apps/cloud/src/app/features/setting/settings.component.ts b/apps/cloud/src/app/features/setting/settings.component.ts
index ae07ec534..c22a29e01 100644
--- a/apps/cloud/src/app/features/setting/settings.component.ts
+++ b/apps/cloud/src/app/features/setting/settings.component.ts
@@ -7,9 +7,6 @@ import { AnalyticsPermissionsEnum, FeatureEnum, PermissionsEnum, RolesEnum, Stor
   selector: 'pac-settings',
   template: `
     <div class="z-10 flex flex-col w-36 md:w-64 max-w-xs p-2 md:p-4 md:pr-0">
-      <!-- <h2 class="text-lg">
-    {{ 'PAC.MENU.Settings' | translate: {Default: 'Settings'} }}
-  </h2> -->
       <ul class="pac-nav__tab-bar flex-1 py-2 bg-slate-200 rounded-lg shadow-lg dark:bg-bluegray-800">
         <li
           class="pac-nav__tab-bar flex justify-start items-center px-4 py-2 cursor-pointer text-slate-600 dark:text-bluegray-100"
@@ -28,8 +25,7 @@ import { AnalyticsPermissionsEnum, FeatureEnum, PermissionsEnum, RolesEnum, Stor
       </ul>
     </div>
 
-    <div
-      [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title"
+    <div [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title"
       class="pac-nav__router relative flex-1"
     >
       <router-outlet #o="outlet"></router-outlet>
@@ -48,11 +44,6 @@ export class PACSettingComponent {
     distinctUntilChanged(),
     map(() => {
       return [
-        // {
-        //   link: 'general',
-        //   label: 'General',
-        //   icon: 'settings'
-        // },
         {
           link: 'account',
           label: 'Account',
@@ -90,15 +81,6 @@ export class PACSettingComponent {
             permissionKeys: [AnalyticsPermissionsEnum.BUSINESS_AREA_EDIT]
           }
         },
-        // {
-        //   link: 'notification-destinations',
-        //   label: 'PAC.KEY_WORDS.NOTIFICATION_DESTINATION',
-        //   icon: 'notifications',
-        //   data: {
-        //     permissionKeys: [AnalyticsPermissionsEnum.DATA_SOURCE_EDIT]
-        //   }
-        // },
-
         {
           link: 'users',
           label: 'User',
diff --git a/apps/cloud/src/app/features/story/designer/widget/widget.component.ts b/apps/cloud/src/app/features/story/designer/widget/widget.component.ts
index 2b4d2b180..e9933a5a3 100644
--- a/apps/cloud/src/app/features/story/designer/widget/widget.component.ts
+++ b/apps/cloud/src/app/features/story/designer/widget/widget.component.ts
@@ -644,14 +644,14 @@ export class DesignerWidgetComponent implements ControlValueAccessor {
   }
 }
 
-@UntilDestroy({ checkProperties: true })
+
 @Component({
   standalone: true,
   imports: [CommonModule, FormlyModule, TranslateModule, ReactiveFormsModule, DesignerWidgetComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'pac-formly-widget-designer',
   template: `
-<div *ngIf="props?.label" class="p-4">{{props.label}}</div>
+<!-- <div *ngIf="props?.label" class="p-4">{{props.label}}</div> -->
 <pac-designer-widget class="ngm-density__compact" [formControl]="$any(formControl)"></pac-designer-widget>`,
   styles: [
     `
diff --git a/apps/cloud/src/app/features/story/story.module.ts b/apps/cloud/src/app/features/story/story.module.ts
index fc0fd9fb0..1d2116ae0 100644
--- a/apps/cloud/src/app/features/story/story.module.ts
+++ b/apps/cloud/src/app/features/story/story.module.ts
@@ -8,7 +8,6 @@ import { NgmDialogComponent } from '@metad/components/dialog'
 import { NxTableModule } from '@metad/components/table'
 import { PACFormlyButtonToggleModule } from '@metad/formly/button-toggle'
 import { PACFormlyChartTypeModule } from '@metad/formly/chart-type'
-import { FormlyMatCheckboxModule } from '@metad/formly/checkbox'
 import { PACFormlyCodeEditorModule } from '@metad/formly/code-editor'
 import { PACFormlyColorPickerModule } from '@metad/formly/color-picker'
 import { PacFormlyColorsComponent } from '@metad/formly/colors'
@@ -18,7 +17,6 @@ import { PACFormlyEntityTypeModule } from '@metad/formly/entity-type'
 import { PACFormlyInputModule } from '@metad/formly/input'
 import { PACFormlyJsonModule } from '@metad/formly/json'
 import { PACFormlyTableModule } from '@metad/formly/mat-table'
-import { FormlyMatToggleModule } from '@metad/formly/mat-toggle'
 import { PACFormlyPropertySelectModule } from '@metad/formly/property-select'
 import { PACFormlySelectModule } from '@metad/formly/select'
 import { PACFormlySemanticModelModule } from '@metad/formly/semantic-model'
@@ -36,6 +34,8 @@ import { STORY_WIDGET_COMPONENTS } from '../../widgets'
 import { PACFormlyImageUploadComponent, PACFormlyWidgetDesignerComponent } from './designer'
 import { StoryRoutingModule } from './story-routing.module'
 import { STORY_DESIGNER_COMPONENTS } from './widgets'
+import { NgmFormlyModule } from '@metad/formly'
+import { NgmFormlyChartPropertModule } from '@metad/story/widgets/analytical-card'
 
 @NgModule({
   declarations: [],
@@ -53,7 +53,7 @@ import { STORY_DESIGNER_COMPONENTS } from './widgets'
     }),
 
     // Formly
-    FormlyModule.forRoot({
+    NgmFormlyModule.forRoot({
       types: [
         {
           name: 'styling',
@@ -63,33 +63,9 @@ import { STORY_DESIGNER_COMPONENTS } from './widgets'
           name: 'image-upload',
           component: PACFormlyImageUploadComponent
         },
-        {
-          name: 'colors',
-          component: PacFormlyColorsComponent
-        }
       ]
     }),
-    PACFormlyJsonModule,
-    FormlyMatToggleModule,
-    FormlyMatSliderModule,
-    MetadFormlyMatModule,
-    PACFormlyChartTypeModule,
-    PACFormlyMatSlicersModule,
-    PACFormlyPropertySelectModule,
-    PACFormlyCodeEditorModule,
-    PACFormlyDesignerModule,
-    PACFormlyEmptyModule,
-    PACFormlyButtonToggleModule,
-    PACFormlyTableModule,
-    MetadFormlyAccordionModule,
-    PACFormlyInputModule,
-    PACFormlySelectModule,
-    FormlyMatCheckboxModule,
-    PACFormlyTextAreaModule,
-    PACFormlySemanticModelModule,
-    PACFormlySortModule,
-    PACFormlyColorPickerModule,
-    PACFormlyEntityTypeModule,
+    NgmFormlyChartPropertModule,
 
     NgmCommonModule,
     NgmDialogComponent,
diff --git a/apps/cloud/src/app/features/story/story/story.component.html b/apps/cloud/src/app/features/story/story/story.component.html
index 797a7d102..f02d62571 100644
--- a/apps/cloud/src/app/features/story/story/story.component.html
+++ b/apps/cloud/src/app/features/story/story/story.component.html
@@ -26,7 +26,7 @@
 
 <mat-drawer-container class="ngm-story__container flex-1 h-full w-full" autosize [hasBackdrop]="false" cdkDropListGroup>
     <mat-drawer #drawer class="ngm-story__designer-drawer mat-elevation-z "
-        [mode]="(isMobile$ | async) ? 'over' : 'side'"
+        [mode]="isMobile() ? 'over' : 'side'"
         position="end" 
         [(opened)]="designerOpened"
         ngmResizer [resizerWidth]="400"
@@ -87,8 +87,8 @@
                 <ngm-story class="w-full h-full"
                     [id]="storyId"
                     [story]="story()"
-                    [pageKey]="pageKey$ | async"
-                    [widgetKey]="widgetKey$ | async"
+                    [pageKey]="pageKey()"
+                    [widgetKey]="widgetKey()"
                     [options]="storyOptions"
                     [editable]="editable"
                     [watermark]="watermark$ | async"
@@ -140,7 +140,7 @@
 
 <div *ngIf="error" class="pac-story__error">{{error}}</div>
 
-<ngm-story-explorer *ngIf="showExplorer()" class="absolute top-o left-0 w-full h-full z-10"
+<ngm-story-explorer *ngIf="showExplorer()" class="absolute top-0 left-0 w-full h-full z-20"
     cdkDropListGroup
     [data]="explore()"
     (closed)="closeExplorer($event)"
diff --git a/apps/cloud/src/app/features/story/story/story.component.ts b/apps/cloud/src/app/features/story/story/story.component.ts
index 95ea874e4..66f9b89f0 100644
--- a/apps/cloud/src/app/features/story/story/story.component.ts
+++ b/apps/cloud/src/app/features/story/story/story.component.ts
@@ -13,12 +13,12 @@ import {
   signal,
   ViewChild
 } from '@angular/core'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { ActivatedRoute, Router } from '@angular/router'
 import { CdkDragEnd } from '@angular/cdk/drag-drop'
 import { ResizerModule } from '@metad/ocap-angular/common'
 import { NgmDSCoreService, OcapCoreModule } from '@metad/ocap-angular/core'
-import { AgentType, C_MEASURES, isEqual } from '@metad/ocap-core'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
+import { AgentType, isEqual } from '@metad/ocap-core'
 import { TranslateModule } from '@ngx-translate/core'
 import { NgMapPipeModule, NxCoreService, ReversePipe } from '@metad/core'
 import {
@@ -51,7 +51,6 @@ type ResponsiveBreakpointType = {
   margin: number;
 }
 
-@UntilDestroy({ checkProperties: true })
 @Component({
   standalone: true,
   imports: [
@@ -153,11 +152,11 @@ export class StoryComponent implements OnInit {
   ]
 
   readonly watermark$ = this.store.user$.pipe(map((user) => `${user.mobile ?? ''} ${user.email ?? ''}`))
-  readonly isDark$ = this.appService.isDark$
-  isDirty$ = this.storyService.dirty$
-  isMobile$ = this.storyService.isMobile$
-  readonly pageKey$ = this.route.queryParams.pipe(map((queryParams) => queryParams['pageKey']))
-  readonly widgetKey$ = this.route.queryParams.pipe(map((queryParams) => queryParams['widgetKey']))
+  readonly isDark = toSignal(this.appService.isDark$)
+  readonly isDirty = toSignal(this.storyService.dirty$)
+  readonly isMobile = toSignal(this.storyService.isMobile$)
+  readonly pageKey = toSignal(this.route.queryParams.pipe(map((queryParams) => queryParams['pageKey'])))
+  readonly widgetKey = toSignal(this.route.queryParams.pipe(map((queryParams) => queryParams['widgetKey'])))
 
   // Story explorer
   showExplorer = signal(false)
@@ -168,7 +167,7 @@ export class StoryComponent implements OnInit {
   | Subscriptions (effect)
   |--------------------------------------------------------------------------
   */
-  private queryParamsSub = this.route.queryParams.subscribe((params) => {
+  private queryParamsSub = this.route.queryParams.pipe(takeUntilDestroyed()).subscribe((params) => {
     this.logger?.debug(`story 接收的原始 url 参数:`, params)
     this.storyOptions = {}
     if (params.$filters) {
@@ -201,13 +200,13 @@ export class StoryComponent implements OnInit {
       this.storyOptions.locale = params.$language
     }
 
+    this.showExplorer.set(!!params.explore)
     if (params.explore) {
-      this.showExplorer.set(true)
-      this.explore.set(JSON.parse(atob(params.explore)))
+      this.explore.set(JSON.parse(decodeURIComponent(window.escape(window.atob(params.explore)))))
     }
   })
 
-  private themeSub = this.storyService.themeChanging$.pipe(delay(300)).subscribe(async ([prev, current]) => {
+  private themeSub = this.storyService.themeChanging$.pipe(delay(300), takeUntilDestroyed(),).subscribe(async ([prev, current]) => {
     const story = await firstValueFrom(this.storyService.story$)
     const key = story.key || story.id
     const echartsTheme = story.options?.echartsTheme
@@ -231,13 +230,20 @@ export class StoryComponent implements OnInit {
   })
 
   private _emulatedDeviceSub = this.storyService.storyOptions$
-    .pipe(map((options) => options?.emulatedDevice))
+    .pipe(
+      map((options) => options?.emulatedDevice),
+      takeUntilDestroyed(),
+    )
     .subscribe((emulatedDevice) => {
       this.emulatedDevice = emulatedDevice
     })
 
   private echartsThemeSub = this.storyService.echartsTheme$
-    .pipe(filter(Boolean), distinctUntilChanged(isEqual))
+    .pipe(
+      takeUntilDestroyed(),
+      filter(Boolean),
+      distinctUntilChanged(isEqual)
+    )
     .subscribe(async (echartsTheme) => {
       const story = await firstValueFrom(this.storyService.story$)
       const key = story.key || story.id;
@@ -249,7 +255,7 @@ export class StoryComponent implements OnInit {
     })
 
   private isAuthenticatedSub = this.appService.isAuthenticated$
-    .pipe(untilDestroyed(this))
+    .pipe(takeUntilDestroyed())
     .subscribe((isAuthenticated) => {
       this.storyService.setAuthenticated(isAuthenticated)
     })
@@ -337,8 +343,18 @@ export class StoryComponent implements OnInit {
     this.showExplorer.set(false)
     this._router.navigate([], {
       relativeTo: this.route,
-      queryParams: {explore: null},
+      queryParams: {explore: null, widgetKey: null},
       queryParamsHandling: 'merge' // remove to replace all query params by provided
     })
+
+    if (event) {
+      console.log(`Update story widget: ${this.pageKey()}`, event)
+
+      this.storyService.updateWidget({
+        pageKey: this.pageKey(),
+        widgetKey: this.widgetKey(),
+        widget: event
+      })
+    }
   }
 }
diff --git a/apps/cloud/src/app/features/story/viewer/viewer.component.html b/apps/cloud/src/app/features/story/viewer/viewer.component.html
index 88e6fe198..b942a9362 100644
--- a/apps/cloud/src/app/features/story/viewer/viewer.component.html
+++ b/apps/cloud/src/app/features/story/viewer/viewer.component.html
@@ -108,8 +108,8 @@
 
 <ngm-story #storyComponent class="w-full h-full overflow-auto"
     [story]="story"
-    [pageKey]="pageKey$ | async"
-    [widgetKey]="widgetKey$ | async"
+    [pageKey]="pageKey()"
+    [widgetKey]="widgetKey()"
     [watermark]="watermark$ | async"
     [dark]="isDark$ | async"
     [(filterBarOpened)]="globalFilterBarOpened"
@@ -123,6 +123,12 @@
     </div>
 </div>
 
+<ngm-story-explorer *ngIf="showExplorer()" class="absolute top-0 left-0 w-full h-full z-20"
+    cdkDropListGroup
+    [data]="explore()"
+    (closed)="closeExplorer($event)"
+></ngm-story-explorer>
+
 <mat-menu #timerMenu="matMenu" class="ngm-density__compact mat-color-accent">
     <button mat-menu-item [matMenuTriggerFor]="dataMenu">
         <mat-icon fontSet="material-icons-round" class="shrink-0">autorenew</mat-icon>{{ 'Story.Toolbar.Data' | translate: {Default: 'Data'} }}
diff --git a/apps/cloud/src/app/features/story/viewer/viewer.component.scss b/apps/cloud/src/app/features/story/viewer/viewer.component.scss
index aed12f19f..e8724ac24 100644
--- a/apps/cloud/src/app/features/story/viewer/viewer.component.scss
+++ b/apps/cloud/src/app/features/story/viewer/viewer.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply h-full flex-1 max-w-full;
+  @apply relative h-full flex-1 max-w-full;
 
   &.pac-story-viewer.fullscreen {
     position: fixed;
diff --git a/apps/cloud/src/app/features/story/viewer/viewer.component.ts b/apps/cloud/src/app/features/story/viewer/viewer.component.ts
index f7ecd323d..ef88727aa 100644
--- a/apps/cloud/src/app/features/story/viewer/viewer.component.ts
+++ b/apps/cloud/src/app/features/story/viewer/viewer.component.ts
@@ -12,7 +12,8 @@ import {
   Renderer2,
   ViewChild,
   ViewContainerRef,
-  inject
+  inject,
+  signal
 } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -45,7 +46,8 @@ import { AppService } from '../../../app.service'
 import { registerStoryThemes, subscribeStoryTheme } from '../../../@theme'
 import { CdkMenuModule } from '@angular/cdk/menu'
 import { StoryScales, downloadStory } from '../types'
-import { toSignal } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
+import { StoryExplorerModule } from '@metad/story'
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -59,6 +61,7 @@ import { toSignal } from '@angular/core/rxjs-interop'
     TranslateModule,
     OcapCoreModule,
     NxStoryModule,
+    StoryExplorerModule
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'pac-story-viewer',
@@ -109,14 +112,14 @@ export class StoryViewerComponent extends TranslationBaseComponent implements On
     return this.story?.points?.length > 1
   }
 
-  readonly pageKey$ = this.route.queryParams.pipe(
+  readonly pageKey = toSignal(this.route.queryParams.pipe(
     startWith(this.route.snapshot.queryParams),
     map((queryParams) => queryParams['pageKey'])
-  )
-  readonly widgetKey$ = this.route.queryParams.pipe(
+  ))
+  readonly widgetKey = toSignal(this.route.queryParams.pipe(
     startWith(this.route.snapshot.queryParams),
     map((queryParams) => queryParams['widgetKey'])
-  )
+  ))
   readonly watermark$ = this.store.user$.pipe(map((user) => `${user.mobile ?? ''} ${user.email ?? ''}`))
   readonly isDark$ = this.appService.isDark$
   public readonly isAuthenticated$ = this.storyService.isAuthenticated$
@@ -126,6 +129,10 @@ export class StoryViewerComponent extends TranslationBaseComponent implements On
     map((options) => options?.scale ?? 100)
   ))
 
+  // Story explorer
+  showExplorer = signal(false)
+  explore = signal(null)
+
   /**
   |--------------------------------------------------------------------------
   | Subscriptions (effect)
@@ -138,6 +145,12 @@ export class StoryViewerComponent extends TranslationBaseComponent implements On
   private _themeSub = subscribeStoryTheme(this.storyService, this.coreService, this.renderer, this._elementRef)
   private _echartsThemeSub = registerStoryThemes(this.storyService)
   
+  private queryParamsSub = this.route.queryParams.pipe(takeUntilDestroyed()).subscribe((params) => {
+    this.showExplorer.set(!!params.explore)
+    if (params.explore) {
+      this.explore.set(JSON.parse(decodeURIComponent(window.escape(window.atob(params.explore)))))
+    }
+  })
   constructor(
     public appService: AppService,
     public storyService: NxStoryService,
@@ -300,6 +313,25 @@ export class StoryViewerComponent extends TranslationBaseComponent implements On
     this.storyComponent.resetScalePanState()
   }
 
+  closeExplorer(event) {
+    this.showExplorer.set(false)
+    this._router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {explore: null, widgetKey: null},
+      queryParamsHandling: 'merge' // remove to replace all query params by provided
+    })
+
+    if (event) {
+      console.log(`Update story widget: ${this.pageKey()}`, event)
+
+      this.storyService.updateWidget({
+        pageKey: this.pageKey(),
+        widgetKey: this.widgetKey(),
+        widget: event
+      })
+    }
+  }
+
   @HostListener('document:keydown.escape', ['$event'])
   onEscapeKeydown(event: KeyboardEvent) {
     this.toggleFullscreen(false)
diff --git a/apps/cloud/src/assets/i18n/zh-CN.json b/apps/cloud/src/assets/i18n/zh-CN.json
index 44cc23df8..4a311e7b3 100644
--- a/apps/cloud/src/assets/i18n/zh-CN.json
+++ b/apps/cloud/src/assets/i18n/zh-CN.json
@@ -1226,6 +1226,70 @@
     "Users": {
       "NoMoreOrganizations": "没有更多的组织可添加"
     },
+    "Feature": {
+      "Features": {
+        "FEATURE_HOME": {
+          "Name": "首页",
+          "Description": "首页展示用户常用功能"
+        },
+        "FEATURE_DASHBOARD": {
+          "Name": "仪表板",
+          "Description": "转到仪表板，查看收藏，故事目录，趋势和智慧洞察"
+        },
+        "FEATURE_HOME_CATALOG": {
+          "Name": "目录",
+          "Description": "用户拥有的故事仪表板，指标等目录"
+        },
+        "FEATURE_HOME_TREND": {
+          "Name": "趋势",
+          "Description": "组织内公开的故事仪表板热度趋势"
+        },
+        "FEATURE_HOME_INSIGHT": {
+          "Name": "洞察",
+          "Description": "智慧洞察，使用 AI 辅助数据分析"
+        },
+        "FEATURE_ROLES_PERMISSION": {
+          "Name": "角色权限",
+          "Description": "维护系统角色和权限"
+        },
+        "FEATURE_COPILOT": {
+          "Name": "AI 副驾驶",
+          "Description": "配置和使用 AI 副驾驶功能"
+        },
+        "FEATURE_MODEL": {
+          "Name": "语义模型",
+          "Description": "启用语义模型功能"
+        },
+        "FEATURE_PROJECT": {
+          "Name": "项目",
+          "Description": "启用项目工作空间功能"
+        },
+        "FEATURE_STORY": {
+          "Name": "故事",
+          "Description": "启用故事仪表板功能，制作，分享和浏览故事仪表板"
+        },
+        "FEATURE_INDICATOR": {
+          "Name": "指标",
+          "Description": "启用指标功能，注册，发布和申请查看业务指标数据"
+        },
+        "FEATURE_INDICATOR_REGISTER": {
+          "Name": "指标注册",
+          "Description": "启用指标注册功能，注册数据指标"
+        },
+        "FEATURE_INDICATOR_MARKET": {
+          "Name": "指标市场",
+          "Description": "启用指标市场功能，发布、浏览和申请指标"
+        },
+        "FEATURE_INDICATOR_APP": {
+          "Name": "指标应用",
+          "Description": "启用指标应用程序，浏览有权限的指标"
+        },
+        "FEATURE_BUSINESS_AREA": {
+          "Name": "业务域",
+          "Description": "启用业务域功能，创建和使用业务域"
+        }
+      }
+    },
     "title": {
       "short": "分析云"
     },
@@ -1562,46 +1626,6 @@
         "INDICATOR_CARD": "指标卡片",
         "TABSET": "选项卡"
       },
-      "CHART": {
-        "DIMENSIONS": "维度",
-        "MEASURES": "度量",
-        "RealTimeLinkedAnalysis": "实时联动分析",
-        "DisableContextMenu": "禁用上下文菜单",
-        "ShowDataButton": "显示数据按钮",
-        "HideHeader": "隐藏标题栏",
-        "HideDataDownload": "隐藏数据下载",
-        "HideScreenshot": "隐藏截图",
-        "MaximumLimit": "最大数据量限制",
-        "DigitInfo": "数字格式",
-        "TrellisHorizontal": "格子横向个数",
-        "UniversalTransition": "全局过渡动画",
-        "CustomLogic": "自定义逻辑",
-        "Color": "颜色",
-        "Enabled": "启用",
-        "ShowDecal": "显示贴花",
-        "Decals": "贴花图案",
-        "Options": "选项",
-        "ChartSettings": "图形配置",
-        "ChartVariants": "图形变体",
-        "ReferenceLine": {
-          "Title": "创建参考线",
-          "ReferenceLine": "参考线",
-          "removeLabel": "删除",
-          "Label": "名称",
-          "Type": "展示类型",
-          "MarkLine": "标记线",
-          "MarkPoint": "标记点",
-          "ValueType": "值类型",
-          "Fixed": "固定",
-          "Dynamic": "动态",
-          "Value": "值",
-          "Aggregation": "聚合类型",
-          "Min": "最小值",
-          "Max": "最大值",
-          "Average": "平均值",
-          "Median": "中位数"
-        }
-      },
       "SELECTION_PRESENTATION_VARIANTS": {
         "TITLE": "选择展示变式"
       },
@@ -1803,7 +1827,7 @@
           "SymbolSize": "符号大小",
           "SymbolRotate": "符号旋转",
           "SymbolOffset": "符号位移",
-          "Stack": "堆积",
+          "Stack": "堆叠",
           "TextAlign": {
             "Title": "文本对齐",
             "Auto": "自动",
@@ -2312,7 +2336,7 @@
           "ShowSymbol": "显示符号",
           "ShowAllSymbol": "显示所有符号",
           "Smooth": "平滑",
-          "Stack": "堆积",
+          "Stack": "堆叠",
           "Step": "分步",
           "AreaStyle": "面积样式",
           "Origin": "源"
@@ -2724,7 +2748,8 @@
       "Cancel": "取消",
       "Search": "搜索",
       "Options": "配置",
-      "Clear": "清空"
+      "Clear": "清空",
+      "Reset": "重置"
     },
     "PROPERTY_SELECT": {
       "REFERENCE_LINE": "参考线",
@@ -2732,7 +2757,7 @@
       "Category": "类别",
       "Category2": "类别2",
       "Group": "分组",
-      "Stacked": "堆积",
+      "Stacked": "堆叠",
       "Color": "颜色",
       "Trellis": "格子",
       "Axis1": "轴1",
@@ -2763,9 +2788,11 @@
       "Options": "配置"
     },
     "CHART": {
+      "GeoMapConfig": "地理配置",
       "ChartType": "图形类型",
       "CustomCode": "自定义代码",
       "AutomaticallyGenerateCode": "根据注释自动生成代码",
+      "ChartOptions": "图形属性",
       "None": "无",
       "Horizontal": "横向",
       "Vertical": "纵向",
@@ -2832,7 +2859,10 @@
       "Combination": "组合图",
       "BarTrellis": "柱形图矩阵",
       "Ask": "提问",
-      "ChartName": "图形名称"
+      "ChartName": "图形名称",
+      "Stacked": "堆叠",
+      "Variant": "变型",
+      "Orient": "方向"
     },
     "Select": {
       "UnableLoadOptionList": "无法加载可选项"
diff --git a/apps/cloud/src/assets/icons/charts/bar-polar.svg b/apps/cloud/src/assets/icons/charts/bar-polar.svg
index 71350ecc0..e34bfcc3d 100644
--- a/apps/cloud/src/assets/icons/charts/bar-polar.svg
+++ b/apps/cloud/src/assets/icons/charts/bar-polar.svg
@@ -1,14 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;background-size:initial;background-repeat-y:initial;background-repeat-x:initial;background-position-y:initial;background-position-x:initial;background-origin:initial;background-image:initial;background-color:rgb(255, 255, 255);background-clip:initial;background-attachment:initial;animation-play-state:paused" ><g class="ldl-scale" style="transform-origin:50% 50%;transform:rotate(0deg) scale(0.8, 0.8);animation-play-state:paused" ><path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#a0c8d7" fill="none" d="M50 65c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15" style="stroke:rgb(160, 200, 215);animation-play-state:paused" ></path>
-<path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#abbd81" fill="none" d="M69.617 61.028A22.397 22.397 0 0 0 72.5 50c0-12.426-10.074-22.5-22.5-22.5" style="stroke:rgb(171, 189, 129);animation-play-state:paused" ></path>
-<path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#f8b26a" fill="none" d="M20.026 51.256C20.684 67.242 33.852 80 50 80c16.569 0 30-13.431 30-30S66.569 20 50 20" style="stroke:rgb(248, 178, 106);animation-play-state:paused" ></path>
-<path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#e15b64" fill="none" d="M27.499 19.998C18.391 26.84 12.5 37.732 12.5 50c0 20.711 16.789 37.5 37.5 37.5S87.5 70.711 87.5 50 70.711 12.5 50 12.5" style="stroke:rgb(225, 91, 100);animation-play-state:paused" ></path>
-<metadata xmlns:d="https://loading.io/stock/" style="animation-play-state:paused" ><d:name style="animation-play-state:paused" >radial bar</d:name>
-
-
-<d:tags style="animation-play-state:paused" >radial bar,circle,progress,process,ring,circular,curve,infographics</d:tags>
-
-
-<d:license style="animation-play-state:paused" >by</d:license>
-
-
-<d:slug style="animation-play-state:paused" >c9xuhq</d:slug></metadata></g><!-- generated by https://loading.io/ --></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;background-size:initial;background-repeat-y:initial;background-repeat-x:initial;background-position-y:initial;background-position-x:initial;background-origin:initial;background-image:initial;background-color:rgb(255, 255, 255);background-clip:initial;background-attachment:initial;animation-play-state:paused" >
+  <g class="ldl-scale" style="transform-origin:50% 50%;transform:rotate(0deg) scale(0.8, 0.8);animation-play-state:paused" >
+    <path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#a0c8d7" fill="none" d="M50 65c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15" style="stroke:rgb(160, 200, 215);animation-play-state:paused" >
+    </path>
+    <path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#abbd81" fill="none" d="M69.617 61.028A22.397 22.397 0 0 0 72.5 50c0-12.426-10.074-22.5-22.5-22.5" style="stroke:rgb(171, 189, 129);animation-play-state:paused" >
+      </path>
+    <path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#f8b26a" fill="none" d="M20.026 51.256C20.684 67.242 33.852 80 50 80c16.569 0 30-13.431 30-30S66.569 20 50 20" style="stroke:rgb(248, 178, 106);animation-play-state:paused" >
+    </path>
+    <path stroke-miterlimit="10" stroke-linecap="round" stroke-width="5" stroke="#e15b64" fill="none" d="M27.499 19.998C18.391 26.84 12.5 37.732 12.5 50c0 20.711 16.789 37.5 37.5 37.5S87.5 70.711 87.5 50 70.711 12.5 50 12.5" style="stroke:rgb(225, 91, 100);animation-play-state:paused" >
+    </path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/apps/cloud/src/assets/icons/charts/column-polar-stacked.jpg b/apps/cloud/src/assets/icons/charts/column-polar-stacked.jpg
new file mode 100644
index 000000000..9027f01dd
Binary files /dev/null and b/apps/cloud/src/assets/icons/charts/column-polar-stacked.jpg differ
diff --git a/apps/cloud/src/assets/icons/charts/radar.jpg b/apps/cloud/src/assets/icons/charts/radar.jpg
new file mode 100644
index 000000000..757e52fc2
Binary files /dev/null and b/apps/cloud/src/assets/icons/charts/radar.jpg differ
diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
index 5e4bf54c7..bdea275d3 100644
--- a/apps/cloud/src/styles.scss
+++ b/apps/cloud/src/styles.scss
@@ -41,6 +41,8 @@
   @include indicator-market.color(dark-green-theme.$dark-theme);
 }
 
+@import 'libs/formly/_formly';
+@import 'libs/story-angular/src/lib/_index';
 @import './app/_app.component';
 
 html,
diff --git a/libs/apps/indicator-market/src/lib/indicator-market.component.html b/libs/apps/indicator-market/src/lib/indicator-market.component.html
index 54debcb04..b58b5f3fa 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.html
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.html
@@ -60,10 +60,10 @@
   </cdk-virtual-scroll-viewport>
 
   <div *ngIf="indicatorDataSource.isEmpty()" class="pac-indicator-market__empty">
-    <div class="signal text-2xl font-notoColorEmoji">🛒</div>
+    <div class="signal font-notoColorEmoji">🛒</div>
     <span>{{ 'IndicatorApp.Empty' | translate: {Default: 'Empty'} }}, 
       {{ 'IndicatorApp.Goto' | translate: {Default: 'Please go to'} }}
-      <a [routerLink]="['/indicator/market']" >{{ 'IndicatorApp.IndicatorMarket' | translate: {Default: 'Indicator Market'} }}</a>
+      <a class="underline" [routerLink]="['/indicator/market']" >{{ 'IndicatorApp.IndicatorMarket' | translate: {Default: 'Indicator Market'} }}</a>
       {{ 'IndicatorApp.ApplyIndicatorPermission' | translate: {Default: 'apply indicator permission'} }}
     </span>
   </div>
@@ -80,7 +80,7 @@
   <div class="pac-indicator-app__options flex flex-col gap-2 p-2">
 
     <label>{{ 'IndicatorApp.TimeGranularity' | translate: {Default: 'Time Granularity'} }}</label>
-    <mat-button-toggle-group ngmAppearance="outline" color="accent" displayDensity="cosy"
+    <mat-button-toggle-group ngmAppearance="hero" color="accent" displayDensity="cosy"
       [(ngModel)]="timeGranularity" (ngModelChange)="onTimeGranularity($event)" (click)="$event.stopPropagation()">
       <mat-button-toggle [value]="TIME_GRANULARITY.Year">
         {{ 'COMPONENTS.DATE_PICKER.Year' | translate: {Default: 'Year'} }}
diff --git a/libs/apps/indicator-market/src/lib/indicator-market.component.scss b/libs/apps/indicator-market/src/lib/indicator-market.component.scss
index 3a6286825..0a68186d5 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.scss
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.scss
@@ -50,18 +50,6 @@ $searching-transition: all 300ms;
 }
 
 .pac-indicator-market__drawer {
-  // min-width: 400px;
-  // width: 400px;
-  // max-width: 100%;
-  // height: 100%;
-  // position: relative;
-
-  .ant-list {
-    .ant-list-item {
-      overflow: hidden;
-    }
-  }
-
   .pac-indicator-market__empty {
     position: absolute;
     top: 50%;
@@ -73,6 +61,7 @@ $searching-transition: all 300ms;
   
     .signal {
       font-size: 3rem;
+      line-height: 4rem;
     }
   }
   
diff --git a/libs/apps/indicator-market/src/lib/indicator-market.component.ts b/libs/apps/indicator-market/src/lib/indicator-market.component.ts
index 5b3652cd4..c9b5940e0 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.ts
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.ts
@@ -41,7 +41,7 @@ export class IndicatoryMarketComponent extends ComponentStore<{ id?: string }> {
   NgxPopperjsTriggers = NgxPopperjsTriggers
   NgxPopperjsPlacements = NgxPopperjsPlacements
 
-  @HostBinding('class.ngm-theme-dark.dark') isDarkTheme = true
+  @HostBinding('class.ngm-theme-dark') @HostBinding('class.dark')isDarkTheme = true
   @HostBinding('class.indicator-market-app') isIndicatoryMarketComponent = true
   @HostBinding('class.searching') searching = false
 
diff --git a/libs/apps/indicator-market/src/lib/services/store.ts b/libs/apps/indicator-market/src/lib/services/store.ts
index aa97b9d1d..1cd889c51 100644
--- a/libs/apps/indicator-market/src/lib/services/store.ts
+++ b/libs/apps/indicator-market/src/lib/services/store.ts
@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core'
-import { IBusinessAreaUser, IComment, IFavorite, ISemanticModel } from '@metad/contracts'
+import { BusinessType, IBusinessAreaUser, IComment, IFavorite, ISemanticModel } from '@metad/contracts'
 import { NgmDSCoreService } from '@metad/ocap-angular/core'
 import { ComponentStore } from '@metad/store'
 import { createEntityAdapter, EntityAdapter, EntityState, Update } from '@ngrx/entity'
 import {
   BusinessAreasService,
-  BusinessType,
   convertIndicatorResult,
   convertNewSemanticModelResult,
   FavoritesService,
@@ -18,6 +17,7 @@ import { combineLatest, firstValueFrom, Observable, Subject } from 'rxjs'
 import { concatMap, debounceTime, distinctUntilChanged, map, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { IndicatorState, TagEnum } from '../types'
 
+
 type DataSources = {
   [id: string]: {
     name: string
diff --git a/libs/apps/state/src/lib/favorite.service.ts b/libs/apps/state/src/lib/favorite.service.ts
index 10a906b34..ce1f0d0cf 100644
--- a/libs/apps/state/src/lib/favorite.service.ts
+++ b/libs/apps/state/src/lib/favorite.service.ts
@@ -1,11 +1,11 @@
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { IFavorite } from '@metad/contracts'
+import { BusinessType, IFavorite } from '@metad/contracts'
 import { map, switchMap } from 'rxjs/operators'
 import { C_URI_API_FAVORITES } from './constants'
 import { OrganizationBaseService } from './organization-base.service'
 import { Store } from './store.service'
-import { BusinessType } from './types'
+
 
 @Injectable({
   providedIn: 'root'
diff --git a/libs/apps/state/src/lib/store.service.ts b/libs/apps/state/src/lib/store.service.ts
index 00a22825b..6f385b2e4 100644
--- a/libs/apps/state/src/lib/store.service.ts
+++ b/libs/apps/state/src/lib/store.service.ts
@@ -12,7 +12,8 @@ import {
 	PermissionsEnum,
 	IProject,
 	FeatureEnum,
-	OrganizationPermissionsEnum
+	OrganizationPermissionsEnum,
+	AnalyticsFeatures
 } from '@metad/contracts';
 import { Injectable } from '@angular/core';
 import { StoreConfig, Store as AkitaStore, Query } from '@datorama/akita';
@@ -363,7 +364,7 @@ export class Store {
 	/*
 	 * Check features are enabled/disabled for tenant organization
 	 */
-	hasFeatureEnabled(feature: FeatureEnum) {
+	hasFeatureEnabled(feature: FeatureEnum | AnalyticsFeatures) {
 		const {
 			featureTenant = [],
 			featureOrganizations = [],
diff --git a/libs/apps/state/src/lib/types.ts b/libs/apps/state/src/lib/types.ts
index 2cb0f1952..94dc5567d 100644
--- a/libs/apps/state/src/lib/types.ts
+++ b/libs/apps/state/src/lib/types.ts
@@ -1,23 +1,9 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import {
-  AnalyticsPermissionsEnum,
-  IDataSource,
-  IIndicator,
-  ISemanticModel,
-  IStory,
-  IStoryWidget,
-  IndicatorOptionFields,
-  PermissionsEnum
-} from '@metad/contracts'
+import { IDataSource, IIndicator, ISemanticModel, IStory, IStoryWidget, IndicatorOptionFields } from '@metad/contracts'
 import { Indicator as OCAPIndicator, SemanticModel, isNil, omit, omitBy, pick } from '@metad/ocap-core'
 import { Story, StoryConnection, StoryModel, StoryPoint, StoryWidget, uuid } from '@metad/story/core'
 import { convertNewSemanticModelResult } from './models.service'
 
-export enum BusinessType {
-  SEMANTIC_MODEL = 'SEMANTIC_MODEL',
-  STORY = 'STORY',
-  INDICATOR = 'INDICATOR'
-}
 
 export enum ThemesEnum {
   default = 'default',
@@ -39,11 +25,7 @@ export const SystemPrivacyFields = [
   'visibility'
 ]
 
-const SYSTEM_FIELDS = [
-  'id',
-  'name',
-  ...SystemPrivacyFields
-]
+const SYSTEM_FIELDS = ['id', 'name', ...SystemPrivacyFields]
 
 export interface Indicator extends Partial<OCAPIndicator>, Omit<IIndicator, 'type'> {
   //
@@ -189,190 +171,4 @@ export function convertIndicatorResult(result: IIndicator): any {
     ...omit(result, 'options'),
     ...(result.options ?? {})
   } as any
-}
-
-// /**
-//  * @deprecated
-//  */
-// export enum FeatureEnum {
-//   FEATURE_DASHBOARD = 'FEATURE_DASHBOARD',
-//   FEATURE_TIME_TRACKING = 'FEATURE_TIME_TRACKING',
-//   FEATURE_ESTIMATE = 'FEATURE_ESTIMATE',
-//   FEATURE_ESTIMATE_RECEIVED = 'FEATURE_ESTIMATE_RECEIVED',
-//   FEATURE_INVOICE = 'FEATURE_INVOICE',
-//   FEATURE_INVOICE_RECURRING = 'FEATURE_INVOICE_RECURRING',
-//   FEATURE_INVOICE_RECEIVED = 'FEATURE_INVOICE_RECEIVED',
-//   FEATURE_INCOME = 'FEATURE_INCOME',
-//   FEATURE_EXPENSE = 'FEATURE_EXPENSE',
-//   FEATURE_PAYMENT = 'FEATURE_PAYMENT',
-//   FEATURE_PROPOSAL = 'FEATURE_PROPOSAL',
-//   FEATURE_PROPOSAL_TEMPLATE = 'FEATURE_PROPOSAL_TEMPLATE',
-//   FEATURE_PIPELINE = 'FEATURE_PIPELINE',
-//   FEATURE_PIPELINE_DEAL = 'FEATURE_PIPELINE_DEAL',
-//   FEATURE_DASHBOARD_TASK = 'FEATURE_DASHBOARD_TASK',
-//   FEATURE_TEAM_TASK = 'FEATURE_TEAM_TASK',
-//   FEATURE_MY_TASK = 'FEATURE_MY_TASK',
-//   FEATURE_JOB = 'FEATURE_JOB',
-//   FEATURE_EMPLOYEES = 'FEATURE_EMPLOYEES',
-//   FEATURE_EMPLOYEE_TIME_ACTIVITY = 'FEATURE_EMPLOYEE_TIME_ACTIVITY',
-//   FEATURE_EMPLOYEE_TIMESHEETS = 'FEATURE_EMPLOYEE_TIMESHEETS',
-//   FEATURE_EMPLOYEE_APPOINTMENT = 'FEATURE_EMPLOYEE_APPOINTMENT',
-//   FEATURE_EMPLOYEE_APPROVAL = 'FEATURE_EMPLOYEE_APPROVAL',
-//   FEATURE_EMPLOYEE_APPROVAL_POLICY = 'FEATURE_EMPLOYEE_APPROVAL_POLICY',
-//   FEATURE_EMPLOYEE_LEVEL = 'FEATURE_EMPLOYEE_LEVEL',
-//   FEATURE_EMPLOYEE_POSITION = 'FEATURE_EMPLOYEE_POSITION',
-//   FEATURE_EMPLOYEE_TIMEOFF = 'FEATURE_EMPLOYEE_TIMEOFF',
-//   FEATURE_EMPLOYEE_RECURRING_EXPENSE = 'FEATURE_EMPLOYEE_RECURRING_EXPENSE',
-//   FEATURE_EMPLOYEE_CANDIDATE = 'FEATURE_EMPLOYEE_CANDIDATE',
-//   FEATURE_MANAGE_INTERVIEW = 'FEATURE_MANAGE_INTERVIEW',
-//   FEATURE_MANAGE_INVITE = 'FEATURE_MANAGE_INVITE',
-//   FEATURE_ORGANIZATION = 'FEATURE_ORGANIZATION',
-//   FEATURE_ORGANIZATION_EQUIPMENT = 'FEATURE_ORGANIZATION_EQUIPMENT',
-//   FEATURE_ORGANIZATION_INVENTORY = 'FEATURE_ORGANIZATION_INVENTORY',
-//   FEATURE_ORGANIZATION_TAG = 'FEATURE_ORGANIZATION_TAG',
-//   FEATURE_ORGANIZATION_VENDOR = 'FEATURE_ORGANIZATION_VENDOR',
-//   FEATURE_ORGANIZATION_PROJECT = 'FEATURE_ORGANIZATION_PROJECT',
-//   FEATURE_ORGANIZATION_DEPARTMENT = 'FEATURE_ORGANIZATION_DEPARTMENT',
-//   FEATURE_ORGANIZATION_TEAM = 'FEATURE_ORGANIZATION_TEAM',
-//   FEATURE_ORGANIZATION_DOCUMENT = 'FEATURE_ORGANIZATION_DOCUMENT',
-//   FEATURE_ORGANIZATION_EMPLOYMENT_TYPE = 'FEATURE_ORGANIZATION_EMPLOYMENT_TYPE',
-//   FEATURE_ORGANIZATION_RECURRING_EXPENSE = 'FEATURE_ORGANIZATION_RECURRING_EXPENSE',
-//   FEATURE_ORGANIZATION_HELP_CENTER = 'FEATURE_ORGANIZATION_HELP_CENTER',
-//   FEATURE_CONTACT = 'FEATURE_CONTACT',
-//   FEATURE_GOAL = 'FEATURE_GOAL',
-//   FEATURE_GOAL_REPORT = 'FEATURE_GOAL_REPORT',
-//   FEATURE_GOAL_SETTING = 'FEATURE_GOAL_SETTING',
-//   FEATURE_REPORT = 'FEATURE_REPORT',
-//   FEATURE_USER = 'FEATURE_USER',
-//   FEATURE_ORGANIZATIONS = 'FEATURE_ORGANIZATIONS',
-//   FEATURE_APP_INTEGRATION = 'FEATURE_APP_INTEGRATION',
-//   FEATURE_SETTING = 'FEATURE_SETTING',
-//   FEATURE_EMAIL_HISTORY = 'FEATURE_EMAIL_HISTORY',
-//   FEATURE_EMAIL_TEMPLATE = 'FEATURE_EMAIL_TEMPLATE',
-//   FEATURE_IMPORT_EXPORT = 'FEATURE_IMPORT_EXPORT',
-//   FEATURE_FILE_STORAGE = 'FEATURE_FILE_STORAGE',
-//   FEATURE_PAYMENT_GATEWAY = 'FEATURE_PAYMENT_GATEWAY',
-//   FEATURE_SMS_GATEWAY = 'FEATURE_SMS_GATEWAY',
-//   FEATURE_SMTP = 'FEATURE_SMTP',
-//   FEATURE_ROLES_PERMISSION = 'FEATURE_ROLES_PERMISSION'
-// }
-
-// /**
-//  * @deprecated
-//  */
-// export enum AnalyticsFeatures {
-//   FEATURE_BUSINESS_GROUP = 'FEATURE_BUSINESS_GROUP',
-//   FEATURE_INDICATOR = 'FEATURE_INDICATOR',
-//   FEATURE_INDICATOR_MARKET = 'FEATURE_INDICATOR_MARKET',
-//   FEATURE_INDICATOR_REGISTER = 'FEATURE_INDICATOR_REGISTER',
-//   FEATURE_INDICATOR_MY = 'FEATURE_INDICATOR_MY',
-//   FEATURE_INDICATOR_VIEWER = 'FEATURE_INDICATOR_VIEWER',
-//   FEATURE_STORY = 'FEATURE_STORY',
-//   FEATURE_STORY_CREATION = 'FEATURE_STORY_CREATION',
-//   FEATURE_STORY_VIEWER = 'FEATURE_STORY_VIEWER',
-//   FEATURE_STORY_MARKET = 'FEATURE_STORY_MARKET',
-//   FEATURE_MODEL = 'FEATURE_MODEL',
-//   FEATURE_MODEL_CREATION = 'FEATURE_MODEL_CREATION',
-//   FEATURE_MODEL_VIEWER = 'FEATURE_MODEL_VIEWER',
-//   FEATURE_SUBSCRIPTION = 'FEATURE_SUBSCRIPTION',
-//   FEATURE_INSIGHT = 'FEATURE_INSIGHT',
-//   FEATURE_INSIGHT_ADMIN = 'FEATURE_INSIGHT_ADMIN',
-//   FEATURE_INSIGHT_VIEWER = 'FEATURE_INSIGHT_VIEWER'
-// }
-
-// /**
-//  * @deprecated
-//  */
-// export enum RolesEnum {
-//   SUPER_ADMIN = 'SUPER_ADMIN',
-//   ADMIN = 'ADMIN',
-//   DATA_ENTRY = 'DATA_ENTRY',
-//   EMPLOYEE = 'EMPLOYEE',
-//   CANDIDATE = 'CANDIDATE',
-//   MANAGER = 'MANAGER',
-//   VIEWER = 'VIEWER',
-//   TRIAL = 'TRIAL'
-// }
-
-// /**
-//  * @deprecated
-//  */
-// export enum OrganizationPermissionsEnum {
-//   ALLOW_MANUAL_TIME = 'allowManualTime',
-//   ALLOW_MODIFY_TIME = 'allowModifyTime',
-//   ALLOW_DELETE_TIME = 'allowDeleteTime',
-//   ALLOW_FUTURE_DATE = 'futureDateAllowed'
-// }
-
-export enum IndicatorType {
-  BASIC = 'BASIC',
-  DERIVE = 'DERIVE'
-}
-
-/**
- * @deprecated
- */
-export const PermissionGroups = {
-  //Permissions which can be given to any role
-  GENERAL: [
-    PermissionsEnum.ADMIN_DASHBOARD_VIEW,
-    PermissionsEnum.ORG_INVITE_VIEW,
-    PermissionsEnum.ORG_INVITE_EDIT,
-    PermissionsEnum.POLICY_VIEW,
-    PermissionsEnum.POLICY_EDIT,
-    PermissionsEnum.ORG_TAGS_EDIT,
-    PermissionsEnum.VIEW_ALL_EMAILS,
-    PermissionsEnum.VIEW_ALL_EMAIL_TEMPLATES,
-    PermissionsEnum.ORG_HELP_CENTER_EDIT,
-    PermissionsEnum.ORG_CONTACT_EDIT,
-    PermissionsEnum.ORG_CONTACT_VIEW,
-    PermissionsEnum.ORG_TEAM_EDIT,
-    PermissionsEnum.ORG_CONTRACT_EDIT,
-    PermissionsEnum.EVENT_TYPES_VIEW,
-    PermissionsEnum.VIEW_ALL_ACCOUNTING_TEMPLATES,
-
-    // DataSource
-    AnalyticsPermissionsEnum.DATA_SOURCE_VIEW,
-    AnalyticsPermissionsEnum.DATA_SOURCE_EDIT,
-    // Semantic Model
-    AnalyticsPermissionsEnum.MODELS_VIEW,
-    AnalyticsPermissionsEnum.MODELS_EDIT,
-    // Story
-    AnalyticsPermissionsEnum.STORIES_VIEW,
-    AnalyticsPermissionsEnum.STORIES_EDIT,
-    // BusinessGroup
-    AnalyticsPermissionsEnum.BUSINESS_AREA_VIEW,
-    AnalyticsPermissionsEnum.BUSINESS_AREA_EDIT,
-    // Indicator
-    AnalyticsPermissionsEnum.INDICATOR_VIEW,
-    AnalyticsPermissionsEnum.INDICATOR_MARTKET_VIEW,
-    AnalyticsPermissionsEnum.INDICATOR_EDIT,
-    // Insight
-    AnalyticsPermissionsEnum.INSIGHT_VIEW,
-    AnalyticsPermissionsEnum.INSIGHT_EDIT,
-    // Subscription
-    AnalyticsPermissionsEnum.SUBSCRIPTION_VIEW,
-    AnalyticsPermissionsEnum.SUBSCRIPTION_EDIT
-  ],
-
-  //Readonly permissions, are only enabled for admin role
-  ADMINISTRATION: [
-    PermissionsEnum.ORG_EMPLOYEES_VIEW,
-    PermissionsEnum.ORG_EMPLOYEES_EDIT,
-    PermissionsEnum.ORG_USERS_VIEW,
-    PermissionsEnum.ORG_USERS_EDIT,
-    PermissionsEnum.ALL_ORG_VIEW,
-    PermissionsEnum.ALL_ORG_EDIT,
-    PermissionsEnum.CHANGE_SELECTED_ORGANIZATION,
-    PermissionsEnum.CHANGE_ROLES_PERMISSIONS,
-    PermissionsEnum.SUPER_ADMIN_EDIT,
-    PermissionsEnum.PUBLIC_PAGE_EDIT,
-    PermissionsEnum.INTEGRATION_VIEW,
-    PermissionsEnum.FILE_STORAGE_VIEW,
-    PermissionsEnum.SMS_GATEWAY_VIEW,
-    PermissionsEnum.CUSTOM_SMTP_VIEW,
-    PermissionsEnum.IMPORT_EXPORT_VIEW,
-    PermissionsEnum.ACCESS_DELETE_ACCOUNT,
-    PermissionsEnum.ACCESS_DELETE_ALL_DATA
-  ]
-}
+}
\ No newline at end of file
diff --git a/libs/apps/state/src/lib/widgets.service.ts b/libs/apps/state/src/lib/widgets.service.ts
index 4b824c795..2798f7570 100644
--- a/libs/apps/state/src/lib/widgets.service.ts
+++ b/libs/apps/state/src/lib/widgets.service.ts
@@ -1,23 +1,22 @@
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { IStory, IStoryWidget } from '@metad/contracts'
+import { Injectable, inject } from '@angular/core'
+import { BusinessType, IStory, IStoryWidget } from '@metad/contracts'
 import { hierarchize } from '@metad/ocap-core'
 import { StoryWidget } from '@metad/story/core'
 import { combineLatestWith, map } from 'rxjs'
 import { C_API_STORY_WIDGET } from './constants'
 import { FavoritesService } from './favorite.service'
-import { BusinessType, convertStoryResult, convertStoryWidget, convertStoryWidgetResult } from './types'
+import { convertStoryResult, convertStoryWidget, convertStoryWidgetResult } from './types'
 import { BusinessAreaUserService } from './business-area-user.service'
 
+
 @Injectable({
   providedIn: 'root'
 })
 export class WidgetsService {
-  constructor(
-    private httpClient: HttpClient,
-    private userBusinessAreas: BusinessAreaUserService,
-    private favoritesService: FavoritesService
-  ) {}
+  private httpClient = inject(HttpClient)
+  private userBusinessAreas = inject(BusinessAreaUserService)
+  private favoritesService = inject(FavoritesService)
 
   getAll(relations: Array<string> = []) {
     let params = new HttpParams()
diff --git a/libs/component-angular/confirm/countdown/countdown.component.html b/libs/component-angular/confirm/countdown/countdown.component.html
index 7a00a7b81..0113f0acf 100644
--- a/libs/component-angular/confirm/countdown/countdown.component.html
+++ b/libs/component-angular/confirm/countdown/countdown.component.html
@@ -8,6 +8,7 @@ <h4 style="pointer-events: none;">
   <span>
     <b>{{ recordType }}</b>
     {{ 'COMPONENTS.COUNTDOWN_CONFIRMATION.WAS' | translate: {Default: 'Waiting seconds'} }}
+    {{ countDownConfig.leftTime }}
     {{
       (isEnabled ? ('COMPONENTS.COUNTDOWN_CONFIRMATION.ENABLED' | translate: {Default: 'Enabled'}) : ('COMPONENTS.COUNTDOWN_CONFIRMATION.DISABLED' | translate: {Default: 'Disabled'})) +
         '?'
diff --git a/libs/component-angular/confirm/countdown/countdown.component.ts b/libs/component-angular/confirm/countdown/countdown.component.ts
index de92b40e5..2c990aa55 100644
--- a/libs/component-angular/confirm/countdown/countdown.component.ts
+++ b/libs/component-angular/confirm/countdown/countdown.component.ts
@@ -1,9 +1,9 @@
-import { Component, HostBinding } from '@angular/core'
-import { MatDialogRef } from '@angular/material/dialog'
+import { Component, HostBinding, inject } from '@angular/core'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
 import { CountdownConfig, CountdownEvent, CountdownTimer } from '@metad/components/countdown'
 
 @Component({
-  selector: 'pac-countdown-confirmation',
+  selector: 'ngm-countdown-confirmation',
   templateUrl: 'countdown.component.html',
   styles: [
     `
@@ -16,13 +16,21 @@ import { CountdownConfig, CountdownEvent, CountdownTimer } from '@metad/componen
   providers: [CountdownTimer]
 })
 export class CountdownConfirmationComponent {
+  @HostBinding('class.ngm-dialog-container') isDialogContainer = true
+
+  protected dialogRef: MatDialogRef<CountdownConfirmationComponent> = inject(MatDialogRef)
+  private data = inject(MAT_DIALOG_DATA)
+
   recordType: string
   isEnabled: boolean
-  countDownConfig: CountdownConfig = { leftTime: 5 }
+  countDownConfig: CountdownConfig = { leftTime: 10 }
 
-  @HostBinding('class.ngm-dialog-container') isDialogContainer = true
-
-  constructor(protected dialogRef: MatDialogRef<CountdownConfirmationComponent>) {}
+  constructor() {
+    if (this.data) {
+      this.recordType = this.data.recordType
+      this.isEnabled = this.data.isEnabled
+    }
+  }
 
   handleActionEvent(e: CountdownEvent) {
     if (e.action === 'done') {
diff --git a/libs/component-angular/form-field/colors/colors.component.ts b/libs/component-angular/form-field/colors/colors.component.ts
index 5b9a3f7a2..eed083ca0 100644
--- a/libs/component-angular/form-field/colors/colors.component.ts
+++ b/libs/component-angular/form-field/colors/colors.component.ts
@@ -43,7 +43,7 @@ export class NgmColorsComponent implements ControlValueAccessor {
 
   @Input() label: string
   @Input() placeholder: string
-  @Input() options: { label: string; colors: Array<{colors: string[]; keywords: string[]}> }[]
+  @Input() options: { label: string; colors: Array<{colors: string[]; keywords?: string[]}> }[]
 
   @Input() disabled = false
 
diff --git a/libs/component-angular/property/property-select/property-select.component.html b/libs/component-angular/property/property-select/property-select.component.html
index 539228239..faf319a43 100644
--- a/libs/component-angular/property/property-select/property-select.component.html
+++ b/libs/component-angular/property/property-select/property-select.component.html
@@ -1,25 +1,31 @@
-<form [formGroup]="formGroup" class="flex-1 max-w-full flex flex-col justify-start items-stretch">
-  <label class="flex item p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden">
-    <span *ngIf="label" class="mr-1">{{label}}</span>
-    <ng-container *ngIf="label$ | async as label">
-      <mat-icon *ngIf="label.icon" displayDensity="compact">{{ label.icon }}</mat-icon>
-      <span>
-        {{ 'COMPONENTS.COMMON.'+(label?.label ?? 'DIMENSION_MEASURE') | translate: {Default: label?.label ?? 'Dimension/Measure'} }}
-      </span>
-    </ng-container>
-  </label>
+<label class="flex item p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden">
+  <span *ngIf="label" class="mr-1">{{label}}</span>
+  <ng-container *ngIf="label$ | async as label">
+    <mat-icon *ngIf="label.icon" displayDensity="compact">{{ label.icon }}</mat-icon>
+    <span>
+      {{ 'COMPONENTS.COMMON.'+(label?.label ?? 'DIMENSION_MEASURE') | translate: {Default: label?.label ?? 'Dimension/Measure'} }}
+    </span>
+  </ng-container>
+</label>
 
-  <div class="flex items-center w-full max-w-full py-1 px-2 text-xs rounded-md bg-gray-100 ring-offset-1 ring-2 ring-transparent hover:ring-yellow-500/50">
+<div class="flex flex-col items-stretch gap-2 w-full max-w-full p-1 text-xs rounded-lg 
+  bg-gray-100 ring-offset-1 ring-2 ring-transparent hover:ring-yellow-500/50">
+  <form [formGroup]="formGroup" class="flex-1 max-w-full flex justify-start items-center">
     <div class="flex items-center">
       <ng-content select="[ngmPrefix]"></ng-content>
     </div>
     <mat-select #propertySelect formControlName="dimension" panelClass="ngm-property-select__panel ngm-select-panel ngm-density__cosy" class="overflow-hidden flex-1"
-      [required]="required"
-      *ngrxLet="selectTrigger$ as selectTrigger">
-      <mat-select-trigger *ngIf="selectTrigger" class="flex items-center overflow-hidden">
-        <ngm-entity-property hiddenIcon [property]="selectTrigger" class="flex-1" ></ngm-entity-property>
+      [required]="required">
+      <mat-select-trigger *ngIf="selectTrigger()" class="flex items-center overflow-hidden">
+        <ngm-entity-property hiddenIcon [property]="selectTrigger()" class="flex-1" ></ngm-entity-property>
 
         <div class="flex items-center">
+
+          <button matSuffix mat-icon-button [displayDensity]="displayDensity" (click)="$event.stopPropagation();$event.preventDefault();showMore.set(!showMore())">
+            <mat-icon *ngIf="!showMore()">expand_more</mat-icon>
+            <mat-icon *ngIf="showMore()">expand_less</mat-icon>
+          </button>
+
           <button mat-icon-button *ngIf="showAttributes" [displayDensity]="displayDensity"
             [matMenuTriggerFor]="dimensionMenu"
             #mt="matMenuTrigger"
@@ -44,7 +50,6 @@
               <mat-icon>straighten</mat-icon>
           </button>
           
-          <ng-content select="[ngmSuffix]"></ng-content>
         </div>
       </mat-select-trigger>
 
@@ -104,10 +109,13 @@
       </mat-optgroup>
     </mat-select>
 
-    <ng-content></ng-content>
+    <ng-content select="[ngmSuffix]"></ng-content>
+  </form>
 
+  <div *ngIf="showMore()" class="min-h-12 w-full flex justify-center items-center">
+    <ng-content></ng-content>
   </div>
-</form>
+</div>
 
 <mat-menu #dimensionMenu="matMenu" class="ngm-formly ngm-density__compact">
   <button mat-menu-item *ngIf="showDisplayAs()" disableRipple [matMenuTriggerFor]="displayMenu">
@@ -260,7 +268,7 @@
     <button mat-menu-item disableRipple *ngFor="let property of hierarchies$ | async; trackBy: trackByName"
       (click)="$event.stopPropagation();">
       <mat-radio-button class="ngm-radio-button__property" [value]="property.name">
-        <ngm-entity-property class="w-full" hiddenIcon [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.descriptionAndId"></ngm-entity-property>
+        <ngm-entity-property class="w-full" hiddenIcon [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto"></ngm-entity-property>
       </mat-radio-button>
     </button>
   </mat-menu>
diff --git a/libs/component-angular/property/property-select/property-select.component.scss b/libs/component-angular/property/property-select/property-select.component.scss
index 12c62a9e6..f8680d249 100644
--- a/libs/component-angular/property/property-select/property-select.component.scss
+++ b/libs/component-angular/property/property-select/property-select.component.scss
@@ -1,6 +1,5 @@
 :host {
-  display: flex;
-  flex: 1;
+  @apply flex-1 flex flex-col;
 }
 
 .ngm-property-select__create-calculation {
diff --git a/libs/component-angular/property/property-select/property-select.component.ts b/libs/component-angular/property/property-select/property-select.component.ts
index e465ffdd9..6964f123f 100644
--- a/libs/component-angular/property/property-select/property-select.component.ts
+++ b/libs/component-angular/property/property-select/property-select.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, computed, EventEmitter, forwardRef, HostBinding, inject, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core'
+import { AfterViewInit, ChangeDetectionStrategy, Component, computed, EventEmitter, forwardRef, HostBinding, inject, Input, OnInit, Output, signal, ViewChild, ViewContainerRef } from '@angular/core'
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatDialog } from '@angular/material/dialog'
 import {
@@ -9,7 +9,6 @@ import {
   DataSettings,
   Dimension,
   DisplayBehaviour,
-  EntitySet,
   EntityType,
   FilterSelectionType,
   getEntityProperty,
@@ -233,7 +232,7 @@ export class PropertySelectComponent implements ControlValueAccessor, OnInit, Af
     zeroSuppression: new FormControl<boolean>(true),
     formatting: new FormControl(),
     parameter: new FormControl(),
-    order: new FormControl<OrderDirection>(null)
+    order: new FormControl<OrderDirection>(null),
   })
   // 初始值
   private readonly _formValue = this.formGroup.value
@@ -406,7 +405,7 @@ export class PropertySelectComponent implements ControlValueAccessor, OnInit, Af
       })
     )
 
-  public readonly selectTrigger$ = combineLatest([
+  private readonly selectTrigger$ = combineLatest([
     this.property$.pipe(startWith(null)),
     this.hierarchy$.pipe(startWith(null)),
     this.level$.pipe(startWith(null)),
@@ -440,6 +439,8 @@ export class PropertySelectComponent implements ControlValueAccessor, OnInit, Af
     })
   )
 
+  public readonly selectTrigger = toSignal(this.selectTrigger$)
+
   get caption() {
     return this.formGroup.get('caption').value
   }
@@ -582,6 +583,8 @@ export class PropertySelectComponent implements ControlValueAccessor, OnInit, Af
     return this.capacities?.includes(PropertyCapacity.Order)
   }
 
+  showMore = signal(false)
+
   private onChange: any
   private onTouched: any
 
@@ -639,8 +642,12 @@ export class PropertySelectComponent implements ControlValueAccessor, OnInit, Af
         })
       })
 
-    // 订阅 formGroup 发回给双向绑定
-    this.formGroup.valueChanges.pipe(untilDestroyed(this)).subscribe((value) => {
+    // subscribe formGroup to export value
+    this.formGroup.valueChanges.pipe(
+      // Update value when property is initialized
+      filter(() => !!this.property$.value),
+      untilDestroyed(this)
+    ).subscribe((value) => {
       if (this.property$.value?.role === AggregationRole.measure) {
         value = {
           ...value,
diff --git a/libs/component-angular/selection/base-slicers.ts b/libs/component-angular/selection/base-slicers.ts
index 4d7cd942a..ed10a7384 100644
--- a/libs/component-angular/selection/base-slicers.ts
+++ b/libs/component-angular/selection/base-slicers.ts
@@ -206,7 +206,7 @@ export class BaseSlicersComponent {
       const dialogRef = this._dialog.open(NgmValueHelpComponent, {
         viewContainerRef: this.viewContainerRef,
         data: {
-          dimension: pick(slicer, 'dimension', 'hierarchy'),
+          dimension: pick(slicer?.dimension, 'dimension', 'hierarchy', 'displayBehaviour'),
           slicer: slicer,
           dataSettings: this.dataSettings,
           options: {
diff --git a/libs/core-angular/src/lib/smart-chart/types.ts b/libs/core-angular/src/lib/smart-chart/types.ts
index fc6537d49..aad1d1f77 100644
--- a/libs/core-angular/src/lib/smart-chart/types.ts
+++ b/libs/core-angular/src/lib/smart-chart/types.ts
@@ -67,6 +67,7 @@ export enum NxChartType {
   ColumnStacked100 = 'ColumnStacked100',
   ColumnStackedDual100 = 'ColumnStackedDual100',
   ColumnGrouped = 'ColumnGrouped',
+  ColumnPolar = 'ColumnPolar',
   Bar = 'Bar',
   BarStacked = 'BarStacked',
   BarDual = 'BarDual',
diff --git a/libs/formly/.eslintrc.json b/libs/formly/.eslintrc.json
index 5d6bb91a6..98edd07f0 100644
--- a/libs/formly/.eslintrc.json
+++ b/libs/formly/.eslintrc.json
@@ -17,7 +17,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "pac-formly",
+            "prefix": "pac-formly|ngm-formly",
             "style": "kebab-case"
           }
         ]
diff --git a/libs/formly/_formly-theme.scss b/libs/formly/_formly-theme.scss
index ccc6c3414..7e7aca22d 100644
--- a/libs/formly/_formly-theme.scss
+++ b/libs/formly/_formly-theme.scss
@@ -125,7 +125,7 @@
   }
 
   .ngm-formly__row {
-    @apply grid grid-cols-12 gap-4;
+    @apply grid grid-cols-12 gap-x-4;
   }
   .ngm-formly__col-12 {
     @apply col-span-12 max-w-full;
diff --git a/libs/formly/_formly.scss b/libs/formly/_formly.scss
new file mode 100644
index 000000000..9d60e1711
--- /dev/null
+++ b/libs/formly/_formly.scss
@@ -0,0 +1,6 @@
+.ngm-formly__gap-2 {
+    @apply gap-2;
+}
+.ngm-formly__my-2 {
+    @apply my-2;
+}
\ No newline at end of file
diff --git a/libs/formly/accordion/accordion-wrapper.component.html b/libs/formly/accordion/accordion-wrapper.component.html
new file mode 100644
index 000000000..6933e220c
--- /dev/null
+++ b/libs/formly/accordion/accordion-wrapper.component.html
@@ -0,0 +1,25 @@
+<mat-accordion class="ngm-accordion" [displayMode]="props.displayMode" [hideToggle]="props.hideToggle"
+  [multi]="props.expandedMulti"
+  [togglePosition]="props.togglePosition ?? 'before'">
+    <mat-expansion-panel #expansionPanel *ngFor="let item of field.fieldGroup" [class.mat-elevation-z]="props.elevationZ"
+      [expanded]="!item.props.disabled && item.props.expanded"
+      [disabled]="(item.hideExpression || item.props.toggleable) && !model?.[item.props.keyShow]"
+      >
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{item.props.label}}
+        </mat-panel-title>
+        <mat-panel-description class="flex-1">
+          <mat-slide-toggle *ngIf="item.hideExpression || item.props.toggleable" labelPosition="before"
+            [checked]="model?.[item.props.keyShow]"
+            (change)="onToggle($event, item, expansionPanel)"
+            (click)="$event.stopPropagation();">
+          </mat-slide-toggle>
+        </mat-panel-description>
+        
+      </mat-expansion-panel-header>
+
+      <formly-field [field]="item"></formly-field>
+      
+    </mat-expansion-panel>
+</mat-accordion>
diff --git a/libs/formly/accordion/accordion-wrapper.component.scss b/libs/formly/accordion/accordion-wrapper.component.scss
new file mode 100644
index 000000000..d6dc7fb47
--- /dev/null
+++ b/libs/formly/accordion/accordion-wrapper.component.scss
@@ -0,0 +1,14 @@
+.mat-expansion-panel-header-description {
+  justify-content: flex-end;
+  flex: 0;
+}
+
+:host::ng-deep {
+  &
+    > .mat-accordion
+    > .mat-expansion-panel
+    > .mat-expansion-panel-header
+    > .mat-content {
+    overflow: visible;
+  }
+}
diff --git a/libs/formly/accordion/accordion-wrapper.component.stories.ts b/libs/formly/accordion/accordion-wrapper.component.stories.ts
new file mode 100644
index 000000000..478394e5c
--- /dev/null
+++ b/libs/formly/accordion/accordion-wrapper.component.stories.ts
@@ -0,0 +1,346 @@
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { MetadFormlyEmptyModule } from '../empty';
+import { MetadFormlyPanelModule } from '../panel';
+import { MetadFormlyAccordionComponent } from './accordion-wrapper.component';
+import { MetadFormlyAccordionModule } from './accordion-wrapper.module';
+
+export default {
+  title: 'Material/Accordion',
+  component: MetadFormlyAccordionComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        FormlyModule.forRoot(),
+        FormlyMaterialModule,
+        MetadFormlyAccordionModule,
+        MetadFormlyPanelModule,
+        MetadFormlyEmptyModule,
+      ],
+    }),
+  ],
+} as Meta<MetadFormlyAccordionComponent>;
+
+const Template: Story<any> = (args: MetadFormlyAccordionComponent) => ({
+  props: args,
+  template: `<formly-form [form]="form" [fields]="schema" [model]="model"></formly-form>
+<button mat-button [disabled]="form.invalid">Submit</button>
+<div>Result:</div>
+<pre>{{form.value | json}}</pre>`,
+});
+
+function fieldGroup() {
+  return [
+    {
+      className: 'metad-formly__col col-6',
+      key: 'show',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Is Show',
+      },
+    },
+    {
+      className: 'metad-formly__col col-6',
+      key: 'type',
+      type: 'select',
+      templateOptions: {
+        label: 'Type',
+        options: [
+          { value: 'value', label: 'Value' },
+          { value: 'category', label: 'Category' },
+        ],
+      },
+    },
+  ];
+}
+
+const AccordionFieldGroup = [
+  {
+    key: 'value',
+    hideExpression: `!field.parent.model.showValue`,
+    templateOptions: {
+      label: 'Expansion Value',
+      keyShow: 'showValue',
+      toggleable: true,
+    },
+    fieldGroup: fieldGroup(),
+  },
+  {
+    key: 'value2',
+    hideExpression: `!field.parent.model.showValue2`,
+    templateOptions: {
+      label: 'Expansion Value2',
+      keyShow: 'showValue2',
+      toggleable: true,
+    },
+    fieldGroup: fieldGroup(),
+  },
+  {
+    key: 'value3',
+    hideExpression: `!field.parent.model.showValue3`,
+    templateOptions: {
+      label: 'Expansion Value3',
+      keyShow: 'showValue3',
+      toggleable: true,
+      disabled: true,
+    },
+    fieldGroup: fieldGroup(),
+  },
+  {
+    key: 'value4',
+    hideExpression: `!field.parent.model.showValue4`,
+    fieldGroup: fieldGroup(),
+  },
+  {
+    key: 'value5',
+    fieldGroup: fieldGroup(),
+  },
+];
+
+const ShowValues = [
+  {
+    key: 'showValue',
+    type: 'empty',
+  },
+  {
+    key: 'showValue2',
+    type: 'empty',
+  },
+  {
+    key: 'showValue3',
+    type: 'empty',
+  },
+];
+
+const ShowValueTrues = [
+  {
+    key: 'showValue',
+    type: 'empty',
+    defaultValue: true,
+  },
+  {
+    key: 'showValue2',
+    type: 'empty',
+    defaultValue: true,
+  },
+  {
+    key: 'showValue3',
+    type: 'empty',
+    defaultValue: true,
+  },
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        label: 'Expansion Type',
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const DisplayMode = Template.bind({});
+DisplayMode.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        displayMode: 'default',
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const HideToggle = Template.bind({});
+HideToggle.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        hideToggle: true,
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const ExpandedMulti = Template.bind({});
+ExpandedMulti.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValueTrues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        expandedMulti: true,
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const TogglePosition = Template.bind({});
+TogglePosition.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValueTrues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        togglePosition: 'after',
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const ElevationZ = Template.bind({});
+ElevationZ.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    ...ShowValues,
+    {
+      wrappers: ['accordion'],
+      templateOptions: {
+        elevationZ: true,
+      },
+      fieldGroup: AccordionFieldGroup,
+    },
+  ],
+};
+
+export const SubAccordion = Template.bind({});
+SubAccordion.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    {
+      key: 'showValue',
+      type: 'empty',
+    },
+    {
+      wrappers: ['accordion'],
+      fieldGroup: [
+        {
+          key: 'value',
+          templateOptions: {
+            label: 'Sub Accordion Value',
+          },
+          fieldGroup: [
+            ...ShowValues,
+            {
+              wrappers: ['accordion'],
+              templateOptions: {
+                elevationZ: true,
+              },
+              fieldGroup: AccordionFieldGroup,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const SubAccordionWithHide = Template.bind({});
+SubAccordionWithHide.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    {
+      key: 'showValue',
+      type: 'empty',
+    },
+    {
+      wrappers: ['accordion'],
+      fieldGroup: [
+        {
+          key: 'value',
+          hideExpression: `!field.parent.model.showValue`,
+          templateOptions: {
+            label: 'Sub Accordion Value',
+            keyShow: 'showValue',
+          },
+          fieldGroup: [
+            ...ShowValues,
+            {
+              wrappers: ['accordion'],
+              templateOptions: {
+                elevationZ: true,
+              },
+              fieldGroup: AccordionFieldGroup,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+
+export const SubAccordionWithFlatFields = Template.bind({});
+SubAccordionWithFlatFields.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    {
+      key: 'showValue',
+      type: 'empty',
+      defaultValue: true
+    },
+    {
+      wrappers: ['accordion'],
+      fieldGroup: [
+        {
+          key: 'value',
+          hideExpression: `!field.parent.model.showValue`,
+          templateOptions: {
+            label: 'Sub Accordion Value',
+            keyShow: 'showValue',
+          },
+          fieldGroup: [
+            {
+              key: 'flatField',
+              type: 'input',
+              templateOptions: {
+                label: 'Flat Field'
+              }
+            },
+            ...ShowValues,
+            {
+              wrappers: ['accordion'],
+              templateOptions: {
+                elevationZ: true,
+              },
+              fieldGroup: AccordionFieldGroup,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/libs/formly/accordion/accordion-wrapper.component.ts b/libs/formly/accordion/accordion-wrapper.component.ts
new file mode 100644
index 000000000..9ee1309e8
--- /dev/null
+++ b/libs/formly/accordion/accordion-wrapper.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { MatExpansionPanel } from '@angular/material/expansion';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+
+@Component({
+  selector: 'ngm-formly-accordion',
+  templateUrl: './accordion-wrapper.component.html',
+  styleUrls: ['./accordion-wrapper.component.scss'],
+  host: {
+    class: 'ngm-formly-accordion',
+  },
+})
+export class NgmFormlyAccordionComponent<
+  F extends FormlyFieldConfig = FormlyFieldConfig
+> extends FieldWrapper<F> {
+  onToggle(
+    event: MatSlideToggleChange,
+    field: FormlyFieldConfig,
+    expansionPanel: MatExpansionPanel
+  ) {
+    this.formControl.patchValue({
+      [field.props.keyShow]: event.checked,
+    });
+
+    if (this.formControl.value[field.props.keyShow]) {
+      expansionPanel?.open();
+    } else {
+      expansionPanel?.close();
+    }
+  }
+}
diff --git a/libs/formly/accordion/accordion-wrapper.module.ts b/libs/formly/accordion/accordion-wrapper.module.ts
new file mode 100644
index 000000000..dd1560ad2
--- /dev/null
+++ b/libs/formly/accordion/accordion-wrapper.module.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormlyModule } from '@ngx-formly/core';
+import { NgmFormlyAccordionComponent } from './accordion-wrapper.component';
+
+@NgModule({
+  declarations: [NgmFormlyAccordionComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatSlideToggleModule,
+    MatExpansionModule,
+    FormlyModule.forChild({
+      types: [
+        {
+          name: 'accordion',
+          component: NgmFormlyAccordionComponent,
+        },
+      ],
+      wrappers: [
+        {
+          name: 'accordion',
+          component: NgmFormlyAccordionComponent,
+        },
+      ],
+    }),
+  ],
+  exports: [NgmFormlyAccordionComponent],
+})
+export class NgmFormlyAccordionModule {}
diff --git a/libs/formly/tab-group/index.ts b/libs/formly/accordion/index.ts
similarity index 100%
rename from libs/formly/tab-group/index.ts
rename to libs/formly/accordion/index.ts
diff --git a/libs/formly/tab-group/ng-package.json b/libs/formly/accordion/ng-package.json
similarity index 53%
rename from libs/formly/tab-group/ng-package.json
rename to libs/formly/accordion/ng-package.json
index 4141100c0..3b2206adc 100644
--- a/libs/formly/tab-group/ng-package.json
+++ b/libs/formly/accordion/ng-package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/libs/formly/tab-group",
+  "dest": "../../../dist/libs/material/accordion",
   "lib": {
-    "entryFile": "./index.ts"
+    "entryFile": "index.ts"
   }
 }
diff --git a/libs/formly/accordion/public-api.ts b/libs/formly/accordion/public-api.ts
new file mode 100644
index 000000000..82ea72621
--- /dev/null
+++ b/libs/formly/accordion/public-api.ts
@@ -0,0 +1,2 @@
+export * from './accordion-wrapper.component';
+export * from './accordion-wrapper.module';
diff --git a/libs/formly/array/array.module.ts b/libs/formly/array/array.module.ts
index 549a6d1f0..bea4bcc94 100644
--- a/libs/formly/array/array.module.ts
+++ b/libs/formly/array/array.module.ts
@@ -4,13 +4,13 @@ import { NgModule } from '@angular/core'
 import { ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatIconModule } from '@angular/material/icon'
-import { AppearanceDirective } from '@metad/ocap-angular/core'
+import { AppearanceDirective, DensityDirective } from '@metad/ocap-angular/core'
 import { FormlyModule } from '@ngx-formly/core'
 import { TranslateModule } from '@ngx-translate/core'
-import { NxFormlyArrayComponent } from './array.type'
+import { NgmFormlyArrayComponent } from './array.type'
 
 @NgModule({
-  declarations: [NxFormlyArrayComponent],
+  declarations: [NgmFormlyArrayComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -19,16 +19,17 @@ import { NxFormlyArrayComponent } from './array.type'
     MatButtonModule,
     TranslateModule,
     AppearanceDirective,
+    DensityDirective,
 
     FormlyModule.forChild({
       types: [
         {
           name: 'array',
-          component: NxFormlyArrayComponent,
+          component: NgmFormlyArrayComponent,
         },
       ],
     }),
   ],
-  exports: [NxFormlyArrayComponent],
+  exports: [NgmFormlyArrayComponent],
 })
-export class PACFormlyArrayModule {}
+export class NgmFormlyArrayModule {}
diff --git a/libs/formly/array/array.type.scss b/libs/formly/array/array.type.scss
new file mode 100644
index 000000000..792e7dc68
--- /dev/null
+++ b/libs/formly/array/array.type.scss
@@ -0,0 +1,14 @@
+:host {
+  flex: 1;
+}
+.ngm-formly-cdk__drag-placeholder {
+  min-height: 60px;
+}
+
+.ngm-formly__array-row {
+  @apply pb-2 border-b border-solid border-slate-200;
+}
+
+.ngm-formly-cdk__drag-list {
+  @apply mb-2;
+}
\ No newline at end of file
diff --git a/libs/formly/array/array.type.ts b/libs/formly/array/array.type.ts
index d76d27390..db20e9514 100644
--- a/libs/formly/array/array.type.ts
+++ b/libs/formly/array/array.type.ts
@@ -4,10 +4,11 @@ import { FormArray } from '@angular/forms';
 import { FieldArrayType } from '@ngx-formly/core'
 
 @Component({
-  selector: 'pac-formly-array',
+  selector: 'ngm-formly-array',
   template: `
-<div class="ngm-formly__title">{{ to.label }}</div>
-<div class="ngm-formly-cdk__drag-list flex flex-col justify-start items-stretch" [class.empty]="!field.fieldGroup?.length" 
+<div *ngIf="to.label" class="ngm-formly__title">{{ to.label }}</div>
+<div class="ngm-formly-cdk__drag-list flex flex-col justify-start items-stretch"
+  [class.empty]="!field.fieldGroup?.length" 
   cdkDropList
   (cdkDropListDropped)="drop($event)">
 
@@ -20,17 +21,21 @@ import { FieldArrayType } from '@ngx-formly/core'
   <div *ngFor="let field of field.fieldGroup; let i = index;" class="ngm-formly__array-row"
     cdkDragBoundary=".ngm-formly-cdk__drag-list" cdkDrag>
 
+    <div class="text-sm flex justify-between items-center">
+      <div><span *ngIf="props.labelField">{{model[i]?.[props.labelField]}}</span></div>
+      <button *ngIf="!to.hideDelete" class="ngm-formly__remove" mat-icon-button color="warn" displayDensity="compact"
+        (click)="remove(i)">
+        <mat-icon>clear</mat-icon>
+      </button>
+    </div>
     <formly-field class="flex-1" [field]="field"></formly-field>
-
-    <button *ngIf="!to.disableDelete" class="ngm-formly__remove" mat-icon-button color="warn" (click)="remove(i)">
-      <mat-icon>clear</mat-icon>
-    </button>
-
     <div class="ngm-formly-cdk__drag-placeholder" *cdkDragPlaceholder></div>
   </div>
 </div>
 
-<button *ngIf="field.fieldGroup?.length" mat-button color="primary" type="button" ngmAppearance="dashed" (click)="add()">
+<button *ngIf="field.fieldGroup?.length" mat-button color="primary" type="button" ngmAppearance="dashed"
+  class="w-full"
+  (click)="add()">
   <div class="flex items-center">
     <mat-icon>add</mat-icon>
     <span>{{ 'FORMLY.COMMON.ADD' | translate: {Default: 'Add'} }} {{to.label}}</span>
@@ -38,20 +43,11 @@ import { FieldArrayType } from '@ngx-formly/core'
 </button>
 `,
   host: {
-    class: 'pac-formly-array'
+    class: 'ngm-formly-array'
   },
-  styles: [
-`
-:host {
-  flex: 1;
-}
-.ngm-formly-cdk__drag-placeholder {
-  min-height: 60px;
-}
-`,
-  ]
+  styleUrls: ['array.type.scss'],
 })
-export class NxFormlyArrayComponent extends FieldArrayType {
+export class NgmFormlyArrayComponent extends FieldArrayType {
 
   drop(event: CdkDragDrop<string[]>) {
     if (!Array.isArray(this.field.fieldGroup) || !Array.isArray(this.field.model)) {
diff --git a/libs/formly/chart-type/chart-type.component.html b/libs/formly/chart-type/chart-type.component.html
index d919f63ea..7103d5698 100644
--- a/libs/formly/chart-type/chart-type.component.html
+++ b/libs/formly/chart-type/chart-type.component.html
@@ -1,206 +1,176 @@
 <label class="p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{'FORMLY.CHART.ChartType' | translate: {Default: 'Chart Type'} }}</label>
-<div class="flex items-center w-full max-w-full py-1 px-2 text-xs rounded-md bg-gray-100 ring-offset-1 ring-2 ring-transparent hover:ring-yellow-500/50">
-  <div class="pac-formly-chart-type__prefix">
-    <ng-content class="ngm-prefix"></ng-content>
-  </div>
-
-  <mat-select class="flex-1" [formControl]="chartTypeControl" panelClass="ngm-formly-chart-type__panel ngm-select-panel ngm-density__cosy">
-    <mat-select-trigger *ngIf="type" class="flex items-center">
-      <mat-icon *ngIf="type" class="mr-1" displayDensity="compact" [svgIcon]="getChartType(type)?.icon"></mat-icon>
-      <div class="flex-1">
-        <span>{{ 'FORMLY.CHART.' + typeLabel | translate: {Default: typeLabel} }}</span>
-        <span *ngIf="name.value" class="">:{{name.value}}</span>
-      </div>
-
-      <button matSuffix mat-icon-button displayDensity="compact"
-        [popper]="attrs"
-        [popperTrigger]="NgxPopperjsTriggers.click"
-        [popperHideOnClickOutside]="true"
-        [popperHideOnScroll]="true"
-        [popperHideOnMouseLeave]="false"
-        [popperPlacement]="NgxPopperjsPlacements.TOPEND"
-        (click)="$event.stopPropagation();$event.preventDefault();">
-        <mat-icon fontSet="material-icons-round">more_vert</mat-icon>
-      </button>
-
-      <button *ngIf="HAS_ORIENTS[type]" matSuffix mat-icon-button displayDensity="compact"
-        [matMenuTriggerFor]="orientMenu"
-        #mt="matMenuTrigger"
-        [class.active]="mt.menuOpen"
-        (click)="$event.stopPropagation();$event.preventDefault();">
-        <mat-icon fontSet="material-icons-outlined">signpost</mat-icon>
-      </button>
-
-      <button *ngIf="VARIANTS[type]" matSuffix mat-icon-button displayDensity="compact"
-        [matMenuTriggerFor]="variantMenu"
-        #mt="matMenuTrigger"
-        [class.active]="mt.menuOpen"
-        (click)="$event.stopPropagation();$event.preventDefault();">
-        <mat-icon fontSet="material-icons-outlined">subscript</mat-icon>
-      </button>
-
-      <button *ngIf="type===NxChartType.GeoMap" matSuffix mat-icon-button displayDensity="compact"
-        (click)="$event.stopPropagation();$event.preventDefault();openMap()">
-        <mat-icon fontSet="material-icons-outlined">map</mat-icon>
-      </button>
-
-      <button *ngIf="type===NxChartType.Custom" matSuffix mat-icon-button displayDensity="compact"
-        (click)="$event.stopPropagation();$event.preventDefault();showCustomCode=!showCustomCode">
-        <mat-icon fontSet="material-icons-outlined"
-          [color]="showCustomCode?'accent':''"
-        >code</mat-icon>
-      </button>
-
-      <button *ngIf="type!==NxChartType.Custom" matSuffix mat-icon-button displayDensity="compact"
-        (click)="$event.stopPropagation();$event.preventDefault();openChartOptions()">
-        <mat-icon fontSet="material-icons-outlined">settings</mat-icon>
-      </button>
-    </mat-select-trigger>
-    
-    <mat-option>-- {{'FORMLY.CHART.None' | translate: {Default: 'None'} }} --</mat-option>
-    <mat-optgroup *ngFor="let group of chartTypeGroups" [label]=" 'FORMLY.CHART.' + group.name | translate: {Default: group.name} "
-                  [disabled]="group.disabled">
-      <mat-option *ngFor="let chart of group.charts" [value]="chart.value" class="text-slate-500">
-        <mat-icon [svgIcon]="chart.icon" ></mat-icon>
-        {{ 'FORMLY.CHART.' + chart.label | translate: {Default: chart.label} }}
-      </mat-option>
-    </mat-optgroup>
-  </mat-select>
-  <button matSuffix *ngIf="removable" class="ngm-formly__remove" displayDensity="compact"
-    mat-icon-button color="warn"
-    (click)="$event.stopPropagation();$event.preventDefault();killMyself()">
-    <mat-icon>clear</mat-icon>
-  </button>
-</div>
+<div class="flex flex-col p-1 rounded-lg ring-offset-1 ring-2 bg-gray-100 ring-transparent hover:ring-yellow-500/50">
+  <div class="flex items-center w-full max-w-full text-xs">
+    <div class="pac-formly-chart-type__prefix">
+      <ng-content class="ngm-prefix"></ng-content>
+    </div>
+  
+    <mat-select class="flex-1" [formControl]="chartTypeControl" panelClass="ngm-formly-chart-type__panel ngm-select-panel ngm-density__cosy">
+      <mat-select-trigger *ngIf="type" class="flex items-center">
+        <mat-icon *ngIf="type" class="mr-1" displayDensity="compact" [svgIcon]="getChartType(type)?.icon"></mat-icon>
+        <div class="flex-1">
+          <span>{{ 'FORMLY.CHART.' + typeLabel | translate: {Default: typeLabel} }}</span>
+          <span *ngIf="name.value" class="">:{{name.value}}</span>
+        </div>
+
+        <button *ngIf="type!==NxChartType.Custom" matSuffix mat-icon-button displayDensity="compact"
+          (click)="$event.stopPropagation();$event.preventDefault();showMore.set(!showMore())">
+          <mat-icon *ngIf="!showMore()">expand_more</mat-icon>
+          <mat-icon *ngIf="showMore()">expand_less</mat-icon>
+        </button>
+  
+        <button *ngIf="type===NxChartType.Custom" matSuffix mat-icon-button displayDensity="compact"
+          (click)="$event.stopPropagation();$event.preventDefault();showCustomCode.set(!showCustomCode())">
+          <mat-icon fontSet="material-icons-outlined"
+            [color]="showCustomCode()?'accent':''"
+          >code</mat-icon>
+        </button>
 
-<mat-radio-group [(ngModel)]="orient">
-  <mat-menu #orientMenu="matMenu" class="ngm-formly ngm-density__compact">
-    <button mat-menu-item disableRipple *ngFor="let orient of ORIENTS"
-      (click)="$event.stopPropagation();">
-      <mat-radio-button [value]="orient.value">
-        {{'FORMLY.CHART.'+orient.label | translate: {Default: orient.label} }}
-      </mat-radio-button>
+      </mat-select-trigger>
+      
+      <mat-option>-- {{'FORMLY.CHART.None' | translate: {Default: 'None'} }} --</mat-option>
+      <mat-optgroup *ngFor="let group of chartTypeGroups" [label]=" 'FORMLY.CHART.' + group.name | translate: {Default: group.name} "
+                    [disabled]="group.disabled">
+        <mat-option *ngFor="let chart of group.charts" [value]="chart.value" class="text-slate-500">
+          <mat-icon [svgIcon]="chart.icon" ></mat-icon>
+          {{ 'FORMLY.CHART.' + chart.label | translate: {Default: chart.label} }}
+        </mat-option>
+      </mat-optgroup>
+    </mat-select>
+
+    <button matSuffix *ngIf="removable" class="ngm-formly__remove" displayDensity="compact"
+      mat-icon-button color="warn"
+      (click)="$event.stopPropagation();$event.preventDefault();killMyself()">
+      <mat-icon>clear</mat-icon>
     </button>
-  </mat-menu>
-</mat-radio-group>
-
-<mat-radio-group [(ngModel)]="variant">
-  <mat-menu #variantMenu="matMenu" class="ngm-formly ngm-density__compact">
-    <button mat-menu-item disableRipple *ngFor="let option of VARIANTS[type]"
-      (click)="$event.stopPropagation();">
-      <mat-radio-button [value]="option.value">
-        {{ 'FORMLY.CHART.'+option.label | translate: {Default: option.label} }}
-      </mat-radio-button>
-    </button>
-  </mat-menu>
-</mat-radio-group>
+  </div>
 
+  <div *ngIf="showMore()" class="min-h-12 w-full flex flex-col justify-start items-stretch gap-1 mt-2" displayDensity="compact">
 
-<ng-template #mapTemp>
-  <header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
-    <h4 style="pointer-events: none;">
-        {{ 'FORMLY.CHART.Map' | translate: {Default: 'Map'} }}
-    </h4>
-  </header>
+    <div class="flex flex-col justify-start items-start gap-2 rounded-lg p-2 bg-white" >
+      <div class="flex items-center text-sm">
+        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="text-slate-900">edit_attributes</mat-icon>
+        <span>{{ 'FORMLY.CHART.ChartType' | translate: {Default: 'Chart Type'} }}</span>
+      </div>
 
-  <mat-dialog-content class="pac-formly-chart__map-dialog-content" style="width: 500px;">
+      <ngm-input class="w-full" [label]="'FORMLY.CHART.ChartName' | translate: {Default: 'Chart Name'}"
+        [formControl]="name"
+      ></ngm-input>
+      
+      <div *ngIf="HAS_ORIENTS[type]" class="flex flex-col justify-start items-start">
+        <label class="ngm-input-label">{{ 'FORMLY.CHART.Orient' | translate: {Default: 'Orient'} }}</label>
+        <mat-radio-group [(ngModel)]="orient">
+          <mat-radio-button *ngFor="let orient of ORIENTS" [value]="orient.value">
+            {{'FORMLY.CHART.'+orient.label | translate: {Default: orient.label} }}
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
 
-    <form [formGroup]="mapFormGroup" class="flex flex-col justify-start items-start">
-      <mat-form-field appearance="fill" class="self-stretch">
-        <mat-label>{{ 'FORMLY.CHART.MapName' | translate: {Default: 'Map Name'} }}</mat-label>
-        <input matInput formControlName="map" >
-      </mat-form-field>
+      <div *ngIf="VARIANTS[type]" class="flex flex-col justify-start items-start">
+        <label class="ngm-input-label">{{ 'FORMLY.CHART.Variant' | translate: {Default: 'Variant'} }}</label>
+        <mat-radio-group [(ngModel)]="variant">
+          <mat-radio-button *ngFor="let option of VARIANTS[type]" [value]="option.value">
+            {{ 'FORMLY.CHART.'+option.label | translate: {Default: option.label} }}
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </div>
 
-      <mat-form-field appearance="fill" class="self-stretch">
-        <mat-label>{{ 'FORMLY.CHART.MapUrl' | translate: {Default: 'Map Url'} }}</mat-label>
-        <input matInput formControlName="mapUrl" >
-      </mat-form-field>
+    <form *ngIf="type===NxChartType.GeoMap" [formGroup]="mapFormGroup" class="flex flex-col justify-start items-start gap-2 rounded-lg p-2 bg-white">
+      <div class="flex items-center text-sm">
+        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="text-slate-900">map</mat-icon>
+        <span>{{ 'FORMLY.CHART.GeoMapConfig' | translate: {Default: 'GeoMap Config'} }}</span>
+      </div>
 
+      <ngm-input class="self-stretch" [label]="'FORMLY.CHART.MapName' | translate: {Default: 'Map Name'}" formControlName="map"></ngm-input>
+      
+      <ngm-input class="self-stretch" [label]="'FORMLY.CHART.MapUrl' | translate: {Default: 'Map Url'}" formControlName="mapUrl"></ngm-input>
+      
       <mat-checkbox formControlName="isTopoJSON">
         {{ 'FORMLY.CHART.IsTopoJSON' | translate: {Default: 'Is TopoJSON'} }}
       </mat-checkbox>
-
-      <mat-form-field *ngIf="mapFormGroup.value.isTopoJSON" appearance="fill" class="self-stretch">
-        <mat-label>{{ 'FORMLY.CHART.FeatureObjectNames' | translate: {Default: 'Feature Object Names'} }}</mat-label>
-        <input matInput formControlName="features">
-      </mat-form-field>
-
-      <mat-form-field appearance="fill">
-        <mat-label>{{ 'FORMLY.CHART.MapProjection' | translate: {Default: 'Map Projection'} }}</mat-label>
-        <mat-select formControlName="projection" >
-          <mat-option>{{ 'FORMLY.CHART.None' | translate: {Default: 'None'} }}</mat-option>
-          <mat-option *ngFor="let proj of GeoProjections" [value]="proj">{{ proj }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </form>
-  </mat-dialog-content>
-
-  <mat-dialog-actions align="end">
-    <div ngmButtonGroup>
-        <button mat-flat-button mat-dialog-close>
-            {{ 'COMPONENTS.COMMON.CANCEL' | translate: {Default: 'Cancel'} }}
+      
+      <ngm-input *ngIf="mapFormGroup.value.isTopoJSON" class="self-stretch"
+        [label]="'FORMLY.CHART.FeatureObjectNames' | translate: {Default: 'Feature Object Names'}"
+        formControlName="features"></ngm-input>
+
+      <ngm-select [label]="'FORMLY.CHART.MapProjection' | translate: {Default: 'Map Projection'}"
+        formControlName="projection"
+        valueKey="key"
+        [selectOptions]="GeoProjections"
+        >
+      </ngm-select>
+
+      <div ngmButtonGroup class="self-end">
+        <button mat-flat-button [disabled]="mapFormGroup.pristine" (click)="confirmMap()">
+          {{ 'FORMLY.COMMON.Reset' | translate: {Default: 'Reset'} }}
         </button>
-        <button mat-raised-button color="accent" cdkFocusInitial [mat-dialog-close]="true">
-            {{ 'COMPONENTS.COMMON.APPLY' | translate: {Default: 'Apply'} }}
+        <button mat-raised-button color="primary" [disabled]="mapFormGroup.invalid || mapFormGroup.pristine" (click)="confirmMap(true)">
+          {{ 'FORMLY.COMMON.Apply' | translate: {Default: 'Apply'} }}
         </button>
-    </div>
-  </mat-dialog-actions>
+      </div>
+    </form>
 
-</ng-template>
+    <div class="w-full bg-white rounded-lg">
+      <div class="flex items-center text-sm p-2">
+        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="text-slate-900">analytics</mat-icon>
+        <span>{{ 'FORMLY.CHART.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
+      </div>
 
-<div *ngIf="showCustomCode" class="flex flex-col justify-start items-stretch relative mt-2" ngmResizer [resizerHeight]="500">
-  <header class="flex justify-between items-center">
-    <input matInput [formControl]="name"
-      placeholder="{{ 'FORMLY.CHART.CustomCode' | translate: {Default: 'Custom Code'} }}"  
-    />
-  
-    <div class="flex items-center gap-2">
-      <button mat-icon-button displayDensity="cosy" [disabled]="!scripts || answering"
-        [matTooltip]=" 'FORMLY.CHART.AutomaticallyGenerateCode' | translate: {Default: 'Automatically generate code by comments'} "
-        (click)="askComplete()">
-          <mat-icon fontSet="material-icons-outlined">auto_awesome</mat-icon>
-      </button>
-      <button mat-icon-button displayDensity="cosy" [disabled]="answering"
-          [popper]="copilot"
-          [popperTrigger]="NgxPopperjsTriggers.click"
-          [popperHideOnClickOutside]="true"
-          [popperHideOnScroll]="true"
-          [popperHideOnMouseLeave]="false"
-          [popperPlacement]="NgxPopperjsPlacements.TOPEND">
-          <mat-icon fontSet="material-icons-outlined">try</mat-icon>
-      </button>
+      <ngm-designer-form class="w-full" [(ngModel)]="chartOptions"></ngm-designer-form>
     </div>
-  </header>
-  
-  <ngx-monaco-editor class="flex-1 w-full"
-      [options]="editorOptions"
-      [(ngModel)]="scripts"
-      (onInit)="editor$.next($event)"
-  ></ngx-monaco-editor>
-  <div ngmResizerBar resizerBarPosition="bottom" style="z-index: 1;"
-    cdkDrag
-    cdkDragLockAxis="y"
-  ></div>
+    
+  </div>
+
+  <div *ngIf="showCustomCode()" class="flex flex-col justify-start items-stretch relative mt-2 bg-white rounded-lg overflow-hidden"
+    ngmResizer [resizerHeight]="500">
+    <header class="flex justify-between items-center px-2">
+      <input matInput class="rounded-md p-1 outline-none text-sm bg-white focus-within:bg-slate-100 hover:bg-slate-200" [formControl]="name"
+        placeholder="{{ 'FORMLY.CHART.CustomCode' | translate: {Default: 'Custom Code'} }}"  
+      />
+    
+      <div class="flex items-center gap-2">
+        <button mat-icon-button displayDensity="compact" [disabled]="!scripts || answering"
+          [matTooltip]=" 'FORMLY.CHART.AutomaticallyGenerateCode' | translate: {Default: 'Automatically generate code by comments'} "
+          (click)="askComplete()">
+            <mat-icon fontSet="material-icons-outlined">auto_awesome</mat-icon>
+        </button>
+        <button mat-icon-button displayDensity="compact" [disabled]="answering"
+            [popper]="copilot"
+            [popperTrigger]="NgxPopperjsTriggers.click"
+            [popperHideOnClickOutside]="true"
+            [popperHideOnScroll]="true"
+            [popperHideOnMouseLeave]="false"
+            [popperPlacement]="NgxPopperjsPlacements.TOPEND">
+            <mat-icon fontSet="material-icons-outlined">try</mat-icon>
+        </button>
+      </div>
+    </header>
+    
+    <ngx-monaco-editor class="flex-1 w-full"
+        [options]="editorOptions"
+        [(ngModel)]="scripts"
+        (onInit)="editor$.next($event)"
+    ></ngx-monaco-editor>
+    <div ngmResizerBar resizerBarPosition="bottom" style="z-index: 1;"
+      cdkDrag
+      cdkDragLockAxis="y"
+    ></div>
+  </div>
+
 </div>
 
+
 <popper-content #copilot class="z-[101]">
-  <form (ngSubmit)="copilot.hide();askCopilot()" class="bg-white p-2">
+  <form (ngSubmit)="copilot.hide();askCopilot()" class="bg-white p-1">
     <div class="relative w-full flex ">
-      <div class="inset-y-0 left-0 flex items-center pointer-events-none">
+      <div class="absolute inset-y-0 left-1 flex items-center pointer-events-none font-notoColorEmoji">
         🤖
       </div>
-      <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      <input type="text" id="simple-search" class="block w-full pl-6 p-1 outline-none text-sm rounded-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
         placeholder="{{ 'FORMLY.CHART.Ask' | translate: {Default: 'Ask'} }}..." required
         matInput [(ngModel)]="prompt" [ngModelOptions]="{standalone: true}"
       >
     </div>
   </form>
 </popper-content>
-
-<popper-content #attrs class="z-[101]">
-  <div class="flex flex-col bg-white p-2" displayDensity="compact">
-    <ngm-input [label]="'FORMLY.CHART.ChartName' | translate: {Default: 'Chart Name'}"
-    [formControl]="name"
-    ></ngm-input>
-  </div>
-</popper-content>
diff --git a/libs/formly/chart-type/chart-type.component.scss b/libs/formly/chart-type/chart-type.component.scss
index 895988e9a..a24dc474a 100644
--- a/libs/formly/chart-type/chart-type.component.scss
+++ b/libs/formly/chart-type/chart-type.component.scss
@@ -1,11 +1,4 @@
 :host {
+  --mat-expansion-header-text-size: 12px;
   @apply flex-1 flex flex-col border border-transparent;
-
-  &.pac-formly-chart-type__custom-code {
-    @apply border-dashed border-slate-300 rounded-sm;
-  }
-}
-
-.mat-mdc-input-element {
-  @apply text-slate-900 bg-gray-50 p-1 outline-none text-sm;
 }
diff --git a/libs/formly/chart-type/chart-type.component.ts b/libs/formly/chart-type/chart-type.component.ts
index 9c1a6c3a7..695dac43c 100644
--- a/libs/formly/chart-type/chart-type.component.ts
+++ b/libs/formly/chart-type/chart-type.component.ts
@@ -1,36 +1,53 @@
-import { ChangeDetectionStrategy, Component, HostBinding, inject, OnInit, TemplateRef, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, Component, effect, HostBinding, inject, OnInit, signal, TemplateRef, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup } from '@angular/forms'
 import { MatDialog } from '@angular/material/dialog'
 import { CopilotChatMessageRoleEnum } from '@metad/copilot'
 import { MetadFormlyArrayComponent } from '@metad/formly-mat/array'
-import { cloneDeep, isNil, isString } from '@metad/ocap-core'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
+import { isEqual, isNil, isString, omit } from '@metad/ocap-core'
 import { FieldType } from '@ngx-formly/core'
 import { NgmCopilotService, NxChartType } from '@metad/core'
 import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
-import { BehaviorSubject, firstValueFrom } from 'rxjs'
-import { CHART_TYPES, GeoProjections } from './types'
+import { BehaviorSubject, distinctUntilChanged, map } from 'rxjs'
 import { TranslateService } from '@ngx-translate/core'
-import { NxSettingsPanelService } from '@metad/story/designer'
+import { STORY_DESIGNER_SCHEMA } from '@metad/story/designer'
+import { ChartOptionsSchemaService } from '@metad/story/widgets/analytical-card'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { CHART_TYPES, GeoProjections } from './types'
+
 
-@UntilDestroy({ checkProperties: true })
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'pac-formly-chart-type',
   templateUrl: './chart-type.component.html',
-  styleUrls: ['chart-type.component.scss']
+  styleUrls: ['chart-type.component.scss'],
+  providers: [
+    {
+      provide: STORY_DESIGNER_SCHEMA,
+      useClass: ChartOptionsSchemaService
+    },
+  ]
 })
 export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
   @HostBinding('class.pac-formly-chart-type') readonly _hostClass = true
   NgxPopperjsTriggers = NgxPopperjsTriggers
   NgxPopperjsPlacements = NgxPopperjsPlacements
   NxChartType = NxChartType
-  GeoProjections = GeoProjections
+  GeoProjections = [
+    {
+      key: null,
+      caption: '--'
+    },
+    ...GeoProjections.map((geoProjection) => ({
+      key: geoProjection,
+      caption: geoProjection
+    }))
+  ]
 
-  private readonly _dialog = inject(MatDialog)
   private readonly formlyArray? = inject(MetadFormlyArrayComponent,{ optional: true })
-  private readonly translateService = inject(TranslateService)
-  private readonly settingsService = inject(NxSettingsPanelService)
+  private readonly schema = inject<ChartOptionsSchemaService>(STORY_DESIGNER_SCHEMA)
+  private copilotService = inject(NgmCopilotService)
+
+  @ViewChild('mapTemp') mapTemplate: TemplateRef<unknown>
 
   ORIENTS = [
     { value: 'horizontal', label: 'Horizontal', icon: 'align_horizontal_left' },
@@ -48,7 +65,8 @@ export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
   VARIANTS = {
     Bar: [
       { value: null, label: 'None' },
-      { value: 'polar', label: 'Polar' }
+      { value: 'polar', label: 'Polar' },
+      { value: 'stacked', label: 'Stacked' },
     ],
     Waterfall: [
       {
@@ -78,14 +96,6 @@ export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
     ]
   }
 
-  private copilotService = inject(NgmCopilotService)
-
-  @ViewChild('mapTemp') mapTemplate: TemplateRef<unknown>
-
-  get chartType() {
-    return this.chartTypeForm.value
-  }
-
   chartTypeForm = new FormGroup({
     name: new FormControl(null),
     type: new FormControl(null),
@@ -101,10 +111,10 @@ export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
     return this.chartTypeForm.get('type') as FormControl
   }
   get type() {
-    return this.chartType?.type
+    return this.chartType()?.type
   }
   get typeLabel() {
-    return this.getChartType(this.chartType?.type)?.label
+    return this.getChartType(this.chartType()?.type)?.label
   }
 
   chartTypeGroups = CHART_TYPES
@@ -128,6 +138,15 @@ export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
     this.chartTypeForm.patchValue({ scripts: value })
   }
 
+  get chartOptions() {
+    return this.chartTypeForm.value?.chartOptions
+  }
+  set chartOptions(value) {
+    this.chartTypeForm.patchValue({
+      chartOptions: value
+    })
+  }
+
   // Form for geomap type
   mapFormGroup = new FormGroup({
     map: new FormControl(null),
@@ -141,8 +160,10 @@ export class PACFormlyChartTypeComponent extends FieldType implements OnInit {
     return this.field.props?.['removable']
   }
 
-  @HostBinding('class.pac-formly-chart-type__custom-code')
-  showCustomCode = false
+  showMore = signal(false)
+  showCustomCode = signal(false)
+
+  chartType = toSignal(this.chartTypeForm.valueChanges.pipe(map((value) => omit(value, 'chartOptions')), distinctUntilChanged(isEqual)))
 
   prompt = ''
   answering = false
@@ -155,6 +176,13 @@ data 数据类型为 {data: <实际数据对象（包含measure对应的属性
     automaticLayout: true
   }
 
+  constructor() {
+    super()
+    effect(() => {
+      this.schema.chartType = this.chartType()
+    }, {allowSignalWrites: true})
+  }
+
   ngOnInit(): void {
     if (isNil(this.field.formControl.value) || isString(this.field.formControl.value)) {
       this.chartTypeForm.patchValue({ type: this.field.formControl.value })
@@ -167,13 +195,8 @@ data 数据类型为 {data: <实际数据对象（包含measure对应的属性
     })
   }
 
-  async openMap() {
-    this.mapFormGroup.patchValue({
-      ...this.field.formControl.value,
-    })
-    
-    const result = await firstValueFrom(this._dialog.open(this.mapTemplate, { panelClass: 'ngm-dialog-container' }).afterClosed())
-    if (result) {
+  confirmMap(ok?: boolean) {
+    if (ok) {
       this.field.formControl.setValue({
         ...this.mapFormGroup.value,
         ...this.chartTypeForm.value
@@ -181,6 +204,7 @@ data 数据类型为 {data: <实际数据对象（包含measure对应的属性
     } else {
       this.mapFormGroup.reset()
     }
+    this.mapFormGroup.markAsPristine()
   }
 
   getChartType(type: string) {
@@ -197,27 +221,6 @@ data 数据类型为 {data: <实际数据对象（包含measure对应的属性
     return chart
   }
 
-  async openChartOptions() {
-    const title = await firstValueFrom(
-      this.translateService.get('FORMLY.PROPERTY_SELECT.ChartOptions', { Default: 'Chart Options' })
-    )
-
-    const result = this.settingsService.openSecondDesigner(
-      'ChartOptions',
-      cloneDeep(this.field.formControl.value),
-      title,
-      true
-    )
-    .pipe(untilDestroyed(this))
-    .subscribe((result) => {
-      if (result) {
-        this.chartTypeForm.patchValue({
-          chartOptions: cloneDeep(result.chartOptions)
-        })
-      }
-    })
-  }
-
   killMyself() {
     if (this.field.form instanceof FormArray) {
       const index = this.field.parent.fieldGroup.indexOf(this.field)
diff --git a/libs/formly/chart-type/chart-type.module.ts b/libs/formly/chart-type/chart-type.module.ts
index 7dbeb6841..094192768 100644
--- a/libs/formly/chart-type/chart-type.module.ts
+++ b/libs/formly/chart-type/chart-type.module.ts
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatDialogModule } from '@angular/material/dialog'
-import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatIconModule } from '@angular/material/icon'
 import { MatInputModule } from '@angular/material/input'
 import { MatMenuModule } from '@angular/material/menu'
@@ -19,6 +18,7 @@ import { NgxPopperjsModule } from 'ngx-popperjs'
 import { MonacoEditorModule } from 'ngx-monaco-editor'
 import { NgmCommonModule, ResizerModule } from '@metad/ocap-angular/common'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgmDesignerFormComponent } from '@metad/story/designer'
 
 @NgModule({
   declarations: [PACFormlyChartTypeComponent],
@@ -43,6 +43,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'
     NgmCommonModule,
     ResizerModule,
     NgxPopperjsModule,
+    NgmDesignerFormComponent,
     FormlyModule.forChild({
       types: [
         {
diff --git a/libs/formly/checkbox/checkbox.module.ts b/libs/formly/checkbox/checkbox.module.ts
index 55e9eecdc..d65d0f092 100644
--- a/libs/formly/checkbox/checkbox.module.ts
+++ b/libs/formly/checkbox/checkbox.module.ts
@@ -6,10 +6,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
-import { FormlyFieldCheckboxComponent } from './checkbox.type';
+import { NgmFormlyCheckboxComponent } from './checkbox.type';
 
 @NgModule({
-  declarations: [FormlyFieldCheckboxComponent],
+  declarations: [NgmFormlyCheckboxComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -21,7 +21,7 @@ import { FormlyFieldCheckboxComponent } from './checkbox.type';
       types: [
         {
           name: 'checkbox',
-          component: FormlyFieldCheckboxComponent,
+          component: NgmFormlyCheckboxComponent,
           // wrappers: ['form-field'],
         },
         {
@@ -32,4 +32,4 @@ import { FormlyFieldCheckboxComponent } from './checkbox.type';
     }),
   ],
 })
-export class FormlyMatCheckboxModule {}
+export class NgmFormlyMatCheckboxModule {}
diff --git a/libs/formly/checkbox/checkbox.type.ts b/libs/formly/checkbox/checkbox.type.ts
index 5bcf64c91..1329f84ca 100644
--- a/libs/formly/checkbox/checkbox.type.ts
+++ b/libs/formly/checkbox/checkbox.type.ts
@@ -12,7 +12,6 @@ import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { FieldType, FormlyFieldProps } from '@ngx-formly/material/form-field';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { FormlyFieldCheckbox } from '@ngx-formly/material/checkbox';
 
 interface CheckboxProps extends FormlyFieldProps {
   indeterminate?: boolean;
@@ -20,11 +19,11 @@ interface CheckboxProps extends FormlyFieldProps {
 }
 
 export interface FormlyCheckboxFieldConfig extends FormlyFieldConfig<CheckboxProps> {
-  type: 'checkbox' | Type<FormlyFieldCheckbox>;
+  type: 'checkbox' | Type<NgmFormlyCheckboxComponent>;
 }
 
 @Component({
-  selector: 'pac-formly-field-mat-checkbox',
+  selector: 'ngm-formly-mat-checkbox',
   template: `
     <mat-checkbox
       [formControl]="formControl"
@@ -47,7 +46,7 @@ export interface FormlyCheckboxFieldConfig extends FormlyFieldConfig<CheckboxPro
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./checkbox.type.scss'],
 })
-export class FormlyFieldCheckboxComponent
+export class NgmFormlyCheckboxComponent
   extends FieldType<FieldTypeConfig<CheckboxProps>>
   implements AfterViewInit, AfterViewChecked, OnDestroy
 {
diff --git a/libs/formly/mat-toggle/toggle.module.ts b/libs/formly/mat-toggle/toggle.module.ts
index 55f11c9a4..1ada078ab 100644
--- a/libs/formly/mat-toggle/toggle.module.ts
+++ b/libs/formly/mat-toggle/toggle.module.ts
@@ -3,26 +3,23 @@ import { CommonModule } from '@angular/common';
 import { FormlyModule } from '@ngx-formly/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
-
-import { FormlyFieldToggle } from './toggle.type';
+import { NgmFormlyToggleComponent } from './toggle.type';
 
 @NgModule({
-  declarations: [FormlyFieldToggle],
+  declarations: [NgmFormlyToggleComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule,
     MatSlideToggleModule,
-    FormlyMatFormFieldModule,
     FormlyModule.forChild({
       types: [
         {
           name: 'toggle',
-          component: FormlyFieldToggle,
+          component: NgmFormlyToggleComponent,
           // wrappers: ['form-field'],
         },
       ],
     }),
   ],
 })
-export class FormlyMatToggleModule {}
+export class NgmFormlyMatToggleModule {}
diff --git a/libs/formly/mat-toggle/toggle.type.scss b/libs/formly/mat-toggle/toggle.type.scss
index b95fb3294..02034f3e7 100644
--- a/libs/formly/mat-toggle/toggle.type.scss
+++ b/libs/formly/mat-toggle/toggle.type.scss
@@ -1,3 +1,3 @@
 :host {
-  @apply flex items-center w-full min-h-[42px];
+  @apply h-full flex items-center w-full min-h-[42px];
 }
\ No newline at end of file
diff --git a/libs/formly/mat-toggle/toggle.type.ts b/libs/formly/mat-toggle/toggle.type.ts
index 0347ba032..449f45c39 100644
--- a/libs/formly/mat-toggle/toggle.type.ts
+++ b/libs/formly/mat-toggle/toggle.type.ts
@@ -8,11 +8,11 @@ interface ToggleProps extends FormlyFieldProps {
 }
 
 export interface FormlyToggleFieldConfig extends FormlyFieldConfig<ToggleProps> {
-  type: 'toggle' | Type<FormlyFieldToggle>;
+  type: 'toggle' | Type<NgmFormlyToggleComponent>;
 }
 
 @Component({
-  selector: 'formly-field-mat-toggle',
+  selector: 'ngm-formly-mat-toggle',
   template: `
     <mat-slide-toggle class="text-sm"
       [id]="id"
@@ -29,7 +29,7 @@ export interface FormlyToggleFieldConfig extends FormlyFieldConfig<ToggleProps>
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['toggle.type.scss']
 })
-export class FormlyFieldToggle extends FieldType<FieldTypeConfig<ToggleProps>> {
+export class NgmFormlyToggleComponent extends FieldType<FieldTypeConfig<ToggleProps>> {
   @ViewChild(MatSlideToggle, { static: true }) slideToggle!: MatSlideToggle;
   override defaultOptions = {
     props: {
diff --git a/libs/formly/panel/index.ts b/libs/formly/panel/index.ts
new file mode 100644
index 000000000..3d5a01709
--- /dev/null
+++ b/libs/formly/panel/index.ts
@@ -0,0 +1 @@
+export * from './public-api'
diff --git a/libs/formly/panel/ng-package.json b/libs/formly/panel/ng-package.json
new file mode 100644
index 000000000..5382b27b5
--- /dev/null
+++ b/libs/formly/panel/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/libs/material/panel",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
diff --git a/libs/formly/panel/panel.module.ts b/libs/formly/panel/panel.module.ts
new file mode 100644
index 000000000..31811df1d
--- /dev/null
+++ b/libs/formly/panel/panel.module.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+import { FormlyModule } from '@ngx-formly/core'
+import { MetadFormlyPanelComponent } from './panel.type'
+
+@NgModule({
+  declarations: [MetadFormlyPanelComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    MatButtonModule,
+    FormlyModule.forChild({
+      wrappers: [{ name: 'panel', component: MetadFormlyPanelComponent }]
+    })
+  ],
+  exports: [MetadFormlyPanelComponent]
+})
+export class MetadFormlyPanelModule {}
diff --git a/libs/formly/panel/panel.type.stories.ts b/libs/formly/panel/panel.type.stories.ts
new file mode 100644
index 000000000..5d76b5383
--- /dev/null
+++ b/libs/formly/panel/panel.type.stories.ts
@@ -0,0 +1,74 @@
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { MetadFormlyPanelModule } from './panel.module';
+import { MetadFormlyPanelComponent } from './panel.type';
+
+
+export default {
+  title: 'Material/Panel',
+  component: MetadFormlyPanelComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        FormlyModule.forRoot(),
+        FormlyMaterialModule,
+        MetadFormlyPanelModule,
+      ],
+    }),
+  ],
+} as Meta<MetadFormlyPanelComponent>;
+
+const Template: Story<any> = (args: MetadFormlyPanelComponent) => ({
+  props: args,
+  template: `<formly-form [form]="form" [fields]="schema" [model]="model"></formly-form>
+<button mat-button [disabled]="form.invalid">Submit</button>
+<div>Result:</div>
+<pre>{{form.value | json}}</pre>`,
+});
+
+function fieldGroup() {
+  return [
+    {
+      key: 'show',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Is Show',
+      },
+    },
+    {
+      key: 'type',
+      type: 'select',
+      templateOptions: {
+        label: 'Type',
+        options: [
+          { value: 'value', label: 'Value' },
+          { value: 'category', label: 'Category' },
+        ],
+      },
+    },
+  ]
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+  form: new FormGroup({}),
+  model: {},
+  schema: [
+    {
+      key: 'value',
+      wrappers: ['panel'],
+      templateOptions: {
+        label: 'Panel Type',
+        padding: true
+      },
+      fieldGroup: fieldGroup(),
+    },
+  ],
+};
diff --git a/libs/formly/panel/panel.type.ts b/libs/formly/panel/panel.type.ts
new file mode 100644
index 000000000..2b38d6ab6
--- /dev/null
+++ b/libs/formly/panel/panel.type.ts
@@ -0,0 +1,34 @@
+import { Component, HostBinding } from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+
+@Component({
+  selector: 'metad-formly-panel-wrapper',
+  template: `
+<div class="metad-formly__title">{{ to?.label }}</div>
+<div class="card-body">
+  <ng-container #fieldComponent></ng-container>
+</div>
+`,
+  styles: [
+    `:host {
+display: flex;
+flex-direction: column;
+flex: 1;
+max-width: 100%;
+margin-top: 1rem;
+}
+:host.metad-formly__panel-padding {
+  padding: 0 1.5rem;
+}`
+  ],
+  host: {
+    class: 'metad-formly__panel-wrapper'
+  }
+})
+export class MetadFormlyPanelComponent extends FieldWrapper {
+  @HostBinding('class.metad-formly__nested-area') nestedArea = true
+  @HostBinding('class.metad-formly__panel-padding')
+  get isPadding() {
+    return this.to?.padding
+  }
+}
diff --git a/libs/formly/panel/public-api.ts b/libs/formly/panel/public-api.ts
new file mode 100644
index 000000000..3edefab80
--- /dev/null
+++ b/libs/formly/panel/public-api.ts
@@ -0,0 +1,2 @@
+export * from './panel.module'
+export * from './panel.type'
diff --git a/libs/formly/property-select/property-select.component.html b/libs/formly/property-select/property-select.component.html
index 4c59e7688..2ce57ae74 100644
--- a/libs/formly/property-select/property-select.component.html
+++ b/libs/formly/property-select/property-select.component.html
@@ -32,7 +32,7 @@
     <mat-icon fontSet="material-icons-outlined">adjust</mat-icon>
   </button>
 
-  <button class="ngm-formly__remove" *ngIf="removable" displayDensity="compact"
+  <button ngmSuffix class="ngm-formly__remove" *ngIf="removable" displayDensity="compact"
     mat-icon-button color="warn"
     (click)="$event.stopPropagation();$event.preventDefault();killMyself()">
     <mat-icon>clear</mat-icon>
diff --git a/libs/formly/property-select/property-select.component.ts b/libs/formly/property-select/property-select.component.ts
index 0a9a7532b..86c428f1f 100644
--- a/libs/formly/property-select/property-select.component.ts
+++ b/libs/formly/property-select/property-select.component.ts
@@ -383,9 +383,7 @@ export class PACFormlyPropertySelectComponent extends FieldType implements OnIni
     this.editAttributesSubscription?.unsubscribe()
     this.editAttributesSubscription = this.settingsService.openSecondDesigner(
       'DimensionChartOptions',
-      {
-        chartOptions: this.formControl.value?.chartOptions ?? {}
-      },
+      this.formControl.value?.chartOptions ?? {},
       title,
       true
     )
@@ -393,7 +391,7 @@ export class PACFormlyPropertySelectComponent extends FieldType implements OnIni
       .subscribe((result) => {
         if (result) {
           this.patchValue({
-            chartOptions: result.chartOptions
+            chartOptions: result
           })
         }
       })
diff --git a/libs/formly/src/lib/formly.module.ts b/libs/formly/src/lib/formly.module.ts
index b7f839853..950b5408c 100644
--- a/libs/formly/src/lib/formly.module.ts
+++ b/libs/formly/src/lib/formly.module.ts
@@ -1,49 +1,95 @@
 import { CommonModule } from '@angular/common'
 import { ModuleWithProviders, NgModule } from '@angular/core'
-import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core'
+import { NgmFormlyAccordionModule } from '@metad/formly/accordion'
+import { PACFormlyButtonToggleModule } from '@metad/formly/button-toggle'
 import { PACFormlyChartTypeModule } from '@metad/formly/chart-type'
+import { NgmFormlyMatCheckboxModule } from '@metad/formly/checkbox'
 import { PACFormlyCodeEditorModule } from '@metad/formly/code-editor'
-import { PACFormlyPropertySelectModule } from '@metad/formly/property-select'
+import { PACFormlyColorPickerModule } from '@metad/formly/color-picker'
+import { PacFormlyColorsComponent } from '@metad/formly/colors'
+import { PACFormlyDesignerModule } from '@metad/formly/designer'
+import { PACFormlyEmptyModule } from '@metad/formly/empty'
+import { PACFormlyEntityTypeModule } from '@metad/formly/entity-type'
+import { PACFormlyInputModule } from '@metad/formly/input'
+import { PACFormlyJsonModule } from '@metad/formly/json'
+import { PACFormlyTableModule } from '@metad/formly/mat-table'
+import { NgmFormlyMatToggleModule } from '@metad/formly/mat-toggle'
+import { PACFormlySelectModule } from '@metad/formly/select'
+import { PACFormlySemanticModelModule } from '@metad/formly/semantic-model'
 import { PACFormlyMatSlicersModule } from '@metad/formly/slicers'
+import { FormlyMatSliderModule } from '@metad/formly/slider'
+import { PACFormlySortModule } from '@metad/formly/sort'
+import { PACFormlyTextAreaModule } from '@metad/formly/textarea'
+import { NgmFormlyArrayModule } from '@metad/formly/array'
+import { ConfigOption, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core'
+import { MetadFormlyPanelModule } from '@metad/formly-mat/panel'
+import { MetadFormlyMatTabGroupModule } from '@metad/formly-mat/tab-group'
 
 export function validateRequired(err, field: FormlyFieldConfig) {
   return `This field is required`
 }
 export function validateMinLength(err, field: FormlyFieldConfig) {
-  return `Should have atleast ${field.templateOptions.minLength} characters`
+  return `Should have atleast ${field.props.minLength} characters`
 }
 export function validateMaxLength(err, field: FormlyFieldConfig) {
-  return `Should have less than ${field.templateOptions.maxLength} characters`
+  return `Should have less than ${field.props.maxLength} characters`
 }
 export function validateMin(err, field: FormlyFieldConfig) {
-  return 'This value should be more than ' + field.templateOptions.min
+  return 'This value should be more than ' + field.props.min
 }
 export function validateMax(err, field: FormlyFieldConfig) {
-  return `This value should be less than ${field.templateOptions.max}`
+  return `This value should be less than ${field.props.max}`
 }
 
 @NgModule({
   declarations: [],
   imports: [CommonModule],
   exports: [
-    PACFormlyPropertySelectModule,
-    PACFormlyCodeEditorModule,
+    PACFormlyJsonModule,
+    NgmFormlyMatToggleModule,
+    FormlyMatSliderModule,
     PACFormlyChartTypeModule,
-    PACFormlyMatSlicersModule
+    PACFormlyMatSlicersModule,
+    PACFormlyCodeEditorModule,
+    PACFormlyDesignerModule,
+    PACFormlyEmptyModule,
+    PACFormlyButtonToggleModule,
+    PACFormlyTableModule,
+    PACFormlyInputModule,
+    PACFormlySelectModule,
+    NgmFormlyMatCheckboxModule,
+    PACFormlyTextAreaModule,
+    PACFormlySemanticModelModule,
+    PACFormlySortModule,
+    PACFormlyColorPickerModule,
+    PACFormlyEntityTypeModule,
+    MetadFormlyPanelModule,
+    MetadFormlyMatTabGroupModule,
+
+    NgmFormlyArrayModule,
+    NgmFormlyAccordionModule
   ]
 })
-export class PACFormlyModule {
-  static forRoot(): ModuleWithProviders<PACFormlyModule> {
+export class NgmFormlyModule {
+  static forRoot(options?: ConfigOption): ModuleWithProviders<NgmFormlyModule> {
     return {
-      ngModule: PACFormlyModule,
+      ngModule: NgmFormlyModule,
       providers: [
         ...FormlyModule.forRoot({
           validationMessages: [
             { name: 'required', message: validateRequired },
-            { name: 'minlength', message: validateMinLength },
-            { name: 'maxlength', message: validateMaxLength },
+            { name: 'minLength', message: validateMinLength },
+            { name: 'maxLength', message: validateMaxLength },
             { name: 'min', message: validateMin },
-            { name: 'max', message: validateMax }
+            { name: 'max', message: validateMax },
+            ...(options?.validationMessages ?? [])
+          ],
+          types: [
+            {
+              name: 'colors',
+              component: PacFormlyColorsComponent
+            },
+            ...(options?.types ?? [])
           ]
         }).providers
       ]
diff --git a/libs/formly/tab-group/public-api.ts b/libs/formly/tab-group/public-api.ts
deleted file mode 100644
index ac544d38f..000000000
--- a/libs/formly/tab-group/public-api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './tab-group.component'
-export * from './tab-group.module'
diff --git a/libs/formly/tab-group/tab-group.component.html b/libs/formly/tab-group/tab-group.component.html
deleted file mode 100644
index 1ca6432f5..000000000
--- a/libs/formly/tab-group/tab-group.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<mat-tab-group #tabGroup mat-stretch-tabs [disableRipple]="to?.disableRipple" class="w-full">
-  <mat-tab *ngFor="let tab of field.fieldGroup; let i = index; let last = last">
-    <ng-template mat-tab-label>
-      <mat-icon *ngIf="tab.templateOptions?.['icon']" fontSet="material-icons-outlined">{{tab.templateOptions?.['icon']}}</mat-icon>
-      {{tab.templateOptions?.label}}
-    </ng-template>
-
-    <formly-field [field]="tab"></formly-field>
-  </mat-tab>
-</mat-tab-group>
diff --git a/libs/formly/tab-group/tab-group.component.scss b/libs/formly/tab-group/tab-group.component.scss
deleted file mode 100644
index 37cf84fe7..000000000
--- a/libs/formly/tab-group/tab-group.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-:host {
-  flex: 1;
-  max-width: 100%;
-}
-
-.mat-tab-group {
-  height: 100%;
-}
-
-:host::ng-deep {
-  .mat-tab-label-content {
-    .mat-icon {
-      margin-right: 1rem;
-    }
-  }
-
-  // .mat-tab-body-content {
-  //   padding: 1rem;
-  // }
-}
diff --git a/libs/formly/tab-group/tab-group.component.ts b/libs/formly/tab-group/tab-group.component.ts
deleted file mode 100644
index 4ae2a2684..000000000
--- a/libs/formly/tab-group/tab-group.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core'
-import { MatTabGroup } from '@angular/material/tabs'
-import { FieldType, FormlyFieldConfig } from '@ngx-formly/core'
-
-@Component({
-  selector: 'pac-formly-tab-group',
-  templateUrl: './tab-group.component.html',
-  styleUrls: ['./tab-group.component.scss'],
-  host: {
-    class: 'pac-formly-tab-group'
-  }
-})
-export class PACFormlyTabGroupComponent extends FieldType implements AfterViewInit {
-  @ViewChild('tabGroup') tabGroup: MatTabGroup
-
-  ngAfterViewInit(): void {
-    // setTimeout(() => {
-    //   this.tabGroup.realignInkBar()
-    // }, 1000);
-  }
-
-  isValid(field: FormlyFieldConfig) {
-    if (field.key) {
-      return field.formControl?.valid
-    }
-
-    return field.fieldGroup?.every((f) => this.isValid(f))
-  }
-}
diff --git a/libs/formly/tab-group/tab-group.module.ts b/libs/formly/tab-group/tab-group.module.ts
deleted file mode 100644
index 78c2f1554..000000000
--- a/libs/formly/tab-group/tab-group.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { MatIconModule } from '@angular/material/icon'
-import { MatTabsModule } from '@angular/material/tabs'
-import { FormlyModule } from '@ngx-formly/core'
-import { PACFormlyTabGroupComponent } from './tab-group.component'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatTabsModule,
-    MatIconModule,
-    FormlyModule.forChild({
-      types: [
-        {
-          name: 'tabs',
-          component: PACFormlyTabGroupComponent
-        }
-      ]
-    })
-  ],
-  exports: [PACFormlyTabGroupComponent],
-  declarations: [PACFormlyTabGroupComponent],
-  providers: []
-})
-export class PACFormlyMatTabGroupModule {}
diff --git a/libs/story-angular/core/story.service.ts b/libs/story-angular/core/story.service.ts
index 185625c2d..acf7e4a89 100644
--- a/libs/story-angular/core/story.service.ts
+++ b/libs/story-angular/core/story.service.ts
@@ -24,6 +24,7 @@ import {
   isEntityType,
   DataSourceSettings,
   assignDeepOmitBlank,
+  assign,
 } from '@metad/ocap-core'
 import { TranslateService } from '@ngx-translate/core'
 import { cloneDeep, findKey, includes, isEmpty, isEqual, isNil, merge, omit, some, sortBy } from 'lodash-es'
@@ -603,32 +604,6 @@ export class NxStoryService extends ComponentStore<StoryState> {
     }
   })
 
-  /**
-   * 将 Widget 更新到 story 上
-   *
-   * @param story
-   * @param point
-   * @param widget
-   * @returns
-   */
-  _updateStoryWidget(story, point: StoryPoint, widget: StoryWidget) {
-    // points 还是以 id 为查找主键
-    const i = story.points?.findIndex((item) => item.id === point.id)
-    if (i < 0) {
-      throw new Error(`Can't index story point '${point.id}'`)
-    }
-
-    // widgets 以 id 为主键
-    const j = story.points[i].widgets?.findIndex((item) => item.id === widget.id)
-    if (j < 0) {
-      throw new Error(`Can't found story widget '${widget.id}'`)
-    }
-
-    story.points[i].widgets[j] = { ...story.points[i].widgets[j], ...widget }
-
-    return story
-  }
-
   /**
    * Delete story point by key
    */
@@ -686,6 +661,16 @@ export class NxStoryService extends ComponentStore<StoryState> {
     state.currentWidget = widget
   })
 
+  /**
+   * Udpate story widget by pageKey and widgetId
+   */
+  readonly updateWidget = this.updater((state, {pageKey, widgetKey, widget}: {pageKey: string; widgetKey: string; widget: StoryWidget}) => {
+    const _widget = state.points.find((item) => item.key === pageKey).widgets.find((item) => item.key === widgetKey)
+    if (_widget) {
+      assign(_widget, widget)
+    }
+  })
+
   async createStoryWidget(event: Partial<StoryWidget>) {
     const currentPageKey = await firstValueFrom(this.currentPageKey$)
 
diff --git a/libs/story-angular/designer/designer-form/designer-form.component.html b/libs/story-angular/designer/designer-form/designer-form.component.html
new file mode 100644
index 000000000..5626c0807
--- /dev/null
+++ b/libs/story-angular/designer/designer-form/designer-form.component.html
@@ -0,0 +1,7 @@
+<formly-form class="w-full"
+    [form]="formGroup"
+    [fields]="fields()"
+    [model]="model"
+    (modelChange)="onModelChange($event)"
+    [options]="options"
+></formly-form>
\ No newline at end of file
diff --git a/libs/story-angular/designer/designer-form/designer-form.component.scss b/libs/story-angular/designer/designer-form/designer-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/story-angular/designer/designer-form/designer-form.component.ts b/libs/story-angular/designer/designer-form/designer-form.component.ts
new file mode 100644
index 000000000..64eaa86c9
--- /dev/null
+++ b/libs/story-angular/designer/designer-form/designer-form.component.ts
@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common'
+import { Component, forwardRef, inject } from '@angular/core'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
+import { ControlValueAccessor, FormGroup, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { cloneDeep } from '@metad/ocap-core'
+import { FormlyModule } from '@ngx-formly/core'
+import { DesignerSchema, STORY_DESIGNER_SCHEMA } from '../types'
+
+@Component({
+  standalone: true,
+  selector: 'ngm-designer-form',
+  templateUrl: 'designer-form.component.html',
+  styleUrls: ['designer-form.component.scss'],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmDesignerFormComponent)
+    }
+  ]
+})
+export class NgmDesignerFormComponent implements ControlValueAccessor {
+  private schema: DesignerSchema = inject(STORY_DESIGNER_SCHEMA)
+
+  formGroup = new FormGroup({})
+  model = {}
+  options = {}
+
+  public readonly fields = toSignal(this.schema.getSchema())
+
+  private valueSub = this.formGroup.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+    this.schema.model = value
+    this.onChange?.(value)
+  })
+
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formGroup.patchValue(obj)
+      this.model = cloneDeep(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable()
+  }
+
+  onModelChange(event) {
+    // console.log(event)
+  }
+}
diff --git a/libs/story-angular/designer/public-api.ts b/libs/story-angular/designer/public-api.ts
index fdb943c08..651c66f63 100644
--- a/libs/story-angular/designer/public-api.ts
+++ b/libs/story-angular/designer/public-api.ts
@@ -1,7 +1,8 @@
 export * from './component-form/formly-form.component'
+export * from './designer-form/designer-form.component'
 export * from './designer.module'
+export * from './panel/panel.component'
+export * from './schemas'
 export * from './settings-panel/settings-panel.component'
 export * from './settings-panel/settings-panel.service'
 export * from './types'
-export * from './schemas'
-export * from './panel/panel.component'
\ No newline at end of file
diff --git a/libs/story-angular/designer/schemas/designer-schema.ts b/libs/story-angular/designer/schemas/designer-schema.ts
index 384e94443..809b62179 100644
--- a/libs/story-angular/designer/schemas/designer-schema.ts
+++ b/libs/story-angular/designer/schemas/designer-schema.ts
@@ -2,17 +2,17 @@ import { NxStoryService } from '@metad/story/core'
 import { map } from 'rxjs/operators'
 import { BackgroundProperties, Borders, BoxShadow, FORMLY_ROW, FontCss, Layout, Size } from './types'
 
-export function StylingWidgetSchema(className: string, DESIGNER) {
-  return {
-    key: 'widget',
-    wrappers: ['expansion'],
-    templateOptions: {
-      label: DESIGNER?.Common?.Widget ?? 'Widget',
-      expanded: true
-    },
-    fieldGroup: StylingCssSchema(className, DESIGNER)
-  }
-}
+// export function StylingWidgetSchema(className: string, DESIGNER) {
+//   return {
+//     key: 'widget',
+//     wrappers: ['expansion'],
+//     templateOptions: {
+//       label: DESIGNER?.Common?.Widget ?? 'Widget',
+//       expanded: true
+//     },
+//     fieldGroup: StylingCssSchema(className, DESIGNER)
+//   }
+// }
 
 export function StylingCssSchema(className: string, DESIGNER) {
   return [
diff --git a/libs/story-angular/designer/schemas/types.ts b/libs/story-angular/designer/schemas/types.ts
index 46f902dd7..b87574d2f 100644
--- a/libs/story-angular/designer/schemas/types.ts
+++ b/libs/story-angular/designer/schemas/types.ts
@@ -1,7 +1,7 @@
+import { NxCoreService, TIME_GRANULARITY_SEQUENCES, TypeAheadType } from '@metad/core'
 import { DisplayDensity, ISelectOption } from '@metad/ocap-angular/core'
 import { DataSource, FilterSelectionType, isNil } from '@metad/ocap-core'
 import { FormlyFieldConfig } from '@ngx-formly/core'
-import { NxCoreService, TIME_GRANULARITY_SEQUENCES, TypeAheadType } from '@metad/core'
 import { Observable, combineLatest, throwError } from 'rxjs'
 import { catchError, map, switchMap, tap } from 'rxjs/operators'
 
@@ -13,6 +13,8 @@ export const FORMLY_W_2_3 = 'ngm-formly__col ngm-formly__col-8'
 export const FORMLY_W_1_2 = 'ngm-formly__col ngm-formly__col-6'
 export const FORMLY_W_NONE = 'ngm-formly__col_none'
 export const FORMLY_ROW = 'ngm-formly__row'
+export const FORMLY_MY_2 = 'ngm-formly__my-2'
+export const FORMLY_GAP_2 = 'ngm-formly__gap-2'
 
 export function AccordionWrappers(
   expansions: {
@@ -22,9 +24,11 @@ export function AccordionWrappers(
     showKey?: string
     expanded?: boolean
     toggleable?: boolean
-  }[]
+  }[],
+  options?: {
+    expandedMulti?: boolean
+  }
 ) {
-
   return [
     ...expansions.map(({ key, showKey }) => ({
       key: showKey ?? `__show${key}__`,
@@ -32,22 +36,15 @@ export function AccordionWrappers(
     })),
     {
       wrappers: ['accordion'],
-      templateOptions: {
-        elevationZ: true
-      },
       props: {
-        elevationZ: true
+        elevationZ: true,
+        expandedMulti: options?.expandedMulti ?? false
       },
       fieldGroup: [
         ...expansions.map(({ key, label, showKey, fieldGroup, expanded, toggleable }) => {
           showKey = showKey ?? `__show${key}__`
           const expansion = {
             key,
-            templateOptions: {
-              label,
-              keyShow: showKey,
-              expanded
-            },
             props: {
               label,
               keyShow: showKey,
@@ -67,6 +64,15 @@ export function AccordionWrappers(
   ]
 }
 
+/**
+ * Provide formly schema for data settings
+ *
+ * @param BUILDER i18n
+ * @param dataSources$
+ * @param dataSource$
+ * @param fieldGroups
+ * @returns
+ */
 export function DataSettingsSchema(
   BUILDER,
   dataSources$: Observable<ISelectOption[]>,
@@ -74,79 +80,88 @@ export function DataSettingsSchema(
   ...fieldGroups
 ) {
   return {
-    key: 'dataSettings',
-    wrappers: ['expansion'],
+    wrappers: ['accordion'],
     props: {
-      label: BUILDER?.DATA_SETTINGS ?? 'Data Settings',
-      required: true,
-      expanded: true
+      elevationZ: true,
     },
     fieldGroup: [
       {
-        fieldGroupClassName: 'ngm-formly__row',
+        key: 'dataSettings',
+        props: {
+          label: BUILDER?.DATA_SETTINGS ?? 'Data Settings',
+          required: true,
+          expanded: true
+        },
         fieldGroup: [
           {
-            key: 'dataSource',
-            type: 'semantic-model',
-            className: CLASS_NAME_COL6,
-            props: {
-              label: BUILDER?.SemanticModel ?? 'Semantic Model',
-              required: true,
-              options: dataSources$
-            }
-          },
-          {
-            key: 'entitySet',
-            type: 'ngm-select',
-            className: CLASS_NAME_COL6,
-            props: {
-              label: BUILDER?.Entity ?? 'Entity',
-              searchable: true,
-              required: true,
-            },
-            expressions: {
-              hide: `!model || !model.dataSource`
-            },
-            hooks: {
-              onInit: (field: FormlyFieldConfig) => {
-                if (!(field.className && field.className.indexOf('formly-loader') > -1)) {
-                  field.className = `${field.className} formly-loader`
+            fieldGroupClassName: FORMLY_ROW,
+            fieldGroup: [
+              {
+                key: 'dataSource',
+                type: 'semantic-model',
+                className: CLASS_NAME_COL6,
+                props: {
+                  label: BUILDER?.SemanticModel ?? 'Semantic Model',
+                  required: true,
+                  options: dataSources$
+                }
+              },
+              {
+                key: 'entitySet',
+                type: 'ngm-select',
+                className: CLASS_NAME_COL6,
+                props: {
+                  label: BUILDER?.Entity ?? 'Entity',
+                  searchable: true,
+                  required: true
+                },
+                expressions: {
+                  hide: `!model || !model.dataSource`
+                },
+                hooks: {
+                  onInit: (field: FormlyFieldConfig) => {
+                    if (!(field.className && field.className.indexOf('formly-loader') > -1)) {
+                      field.className = `${field.className} formly-loader`
+                    }
+                    field.props.options = dataSource$.pipe(
+                      tap(() => {
+                        field.className = field.className.includes('formly-loader')
+                          ? field.className
+                          : `${field.className} formly-loader`
+                      }),
+                      switchMap((dataSource: DataSource) =>
+                        combineLatest([
+                          dataSource.discoverMDCubes(), //.pipe(tap((options) => console.warn(options))),
+                          dataSource.selectSchema() //.pipe(tap((options) => console.warn(options)))
+                        ])
+                      ),
+                      map(([cubes, schema]) => {
+                        return cubes.map((cube: any) => ({
+                          value: cube.name,
+                          label: cube.caption,
+                          // @todo
+                          icon: schema?.cubes?.find((item) => item.name === cube.name)
+                            ? 'star_outline'
+                            : cube.cubeType === 'VIRTUAL CUBE'
+                            ? 'dataset_linked'
+                            : null,
+                          fontSet: 'material-icons-outlined'
+                        }))
+                      }),
+                      catchError((err) => {
+                        field.className = field.className.split('formly-loader').join('')
+                        return throwError(() => err)
+                      }),
+                      tap(() => (field.className = field.className.split('formly-loader').join('')))
+                    )
+                  }
                 }
-                field.props.options = dataSource$.pipe(
-                  tap(() => {
-                    field.className = field.className.includes('formly-loader') ? field.className : `${field.className} formly-loader`
-                  }),
-                  switchMap((dataSource: DataSource) =>
-                    combineLatest([
-                      dataSource.discoverMDCubes(), //.pipe(tap((options) => console.warn(options))),
-                      dataSource.selectSchema() //.pipe(tap((options) => console.warn(options)))
-                    ])
-                  ),
-                  map(([cubes, schema]) => {
-                    return cubes.map((cube: any) => ({
-                      value: cube.name,
-                      label: cube.caption,
-                      // @todo
-                      icon: schema?.cubes?.find((item) => item.name === cube.name)
-                        ? 'star_outline'
-                        : cube.cubeType === 'VIRTUAL CUBE'
-                        ? 'dataset_linked'
-                        : null,
-                      fontSet: 'material-icons-outlined'
-                    }))
-                  }),
-                  catchError((err) => {
-                    field.className = field.className.split('formly-loader').join('')
-                    return throwError(() => err)
-                  }),
-                  tap(() => (field.className = field.className.split('formly-loader').join('')))
-                )
               }
-            }
-          }
+            ]
+          },
+          ...fieldGroups
         ]
-      },
-      ...fieldGroups
+      }
     ]
   }
 }
@@ -174,9 +189,9 @@ export function filterAttributes(className: string, COMMON) {
 
 /**
  * Attributes schema for hierarchy
- * 
- * @param COMMON 
- * @returns 
+ *
+ * @param COMMON
+ * @returns
  */
 export function hierarchyAttributes(COMMON?) {
   return [
@@ -188,7 +203,7 @@ export function hierarchyAttributes(COMMON?) {
         label: COMMON?.initialHierarchyLevel ?? 'Initial Hierarchy Level',
         type: 'number',
         max: 10,
-        thumbLabel: true,
+        thumbLabel: true
       }
     },
     {
@@ -196,7 +211,7 @@ export function hierarchyAttributes(COMMON?) {
       key: 'showAllMember',
       type: 'checkbox',
       props: {
-        label: COMMON?.ShowAllMember ?? 'Show All Member',
+        label: COMMON?.ShowAllMember ?? 'Show All Member'
       }
     }
   ]
@@ -204,7 +219,7 @@ export function hierarchyAttributes(COMMON?) {
 
 export function typeAhead(COMMON) {
   return {
-    fieldGroupClassName: 'ngm-formly__row',
+    fieldGroupClassName: FORMLY_ROW,
     key: 'typeAhead',
     wrappers: ['panel'],
     props: { label: '自动补全' },
@@ -265,7 +280,7 @@ export function SelectionType(className: string, I18N) {
 export function filterOption(className: string, DESIGNER) {
   return [
     {
-      fieldGroupClassName: 'ngm-formly__row',
+      fieldGroupClassName: FORMLY_ROW,
       fieldGroup: [
         SelectionType(className, DESIGNER),
         {
@@ -498,7 +513,7 @@ export function BackgroundProperties(className?: string, TRANSLATE?) {
           {
             value: 'scroll, local',
             label: 'Scroll, Local'
-          },
+          }
         ]
       }
     },
@@ -787,7 +802,7 @@ export function displayDensity(COMMON) {
 export function Appearance(className: string, COMMON) {
   return {
     key: 'appearance',
-    wrappers: ['expansion'],
+    wrappers: ['accordion'],
     props: {
       label: COMMON?.Appearance ?? 'Appearance',
       expanded: true
@@ -799,7 +814,7 @@ export function Appearance(className: string, COMMON) {
 
 export function Appearances(className: string, COMMON) {
   return [
-    displayDensity(COMMON),
+    displayDensity(COMMON)
     // {
     //   className,
     //   key: 'appearance',
@@ -919,4 +934,4 @@ export function ColorOptions(I18N) {
     { value: 'accent', label: I18N?.Common?.Color_Accent ?? 'Accent' },
     { value: 'warn', label: I18N?.Common?.Color_Warn ?? 'Warn' }
   ]
-}
\ No newline at end of file
+}
diff --git a/libs/story-angular/i18n/zhHans.ts b/libs/story-angular/i18n/zhHans.ts
index 0f7e677e0..be8074200 100644
--- a/libs/story-angular/i18n/zhHans.ts
+++ b/libs/story-angular/i18n/zhHans.ts
@@ -50,7 +50,9 @@ export const ZhHans = {
       Public: '公开',
       ReUpload: '重新上传',
       Widget: '部件',
-      ConfirmDeleteInfo: '在实际保存之前不会从服务器上删除'
+      ConfirmDeleteInfo: '在实际保存之前不会从服务器上删除',
+      Back: '返回',
+      Confirm: '确认'
     },
     Shares: {
       VisibilityChanged: '可见性已更改',
@@ -72,7 +74,7 @@ export const ZhHans = {
       GenerateLinkToPreview: '生成链接以预览',
       InitialPage: '初始页面',
       Default: '默认',
-      SemanticModelPublicFirst: '请先将语义模型可见性更改为公开！',
+      SemanticModelPublicFirst: '请先将语义模型可见性更改为公开！'
     },
     Designer: {
       LookingEmpty: '这个故事看起来有些空洞',
@@ -126,7 +128,7 @@ export const ZhHans = {
       ThumbnailUrl: '缩略图链接',
       Models: '模型',
       AddSemanticModels: '添加语义模型',
-      PreviewExceedsMaximum: '文件大小超过限制',
+      PreviewExceedsMaximum: '文件大小超过限制'
     },
     Preferences: {
       Title: '首选项',
@@ -296,7 +298,8 @@ export const ZhHans = {
       Navigate: '导航',
       PinHome: '固定到首页',
       Share: '分享',
-      Download: '下载'
+      Download: '下载',
+      Explore: '探索'
     },
     LinkedAnalysis: {
       Title: '联动分析',
@@ -415,7 +418,7 @@ export const ZhHans = {
         Color_Primary: '主色',
         Color_Accent: '强调色',
         Color_Warn: '警告色',
-        Preview: '预览',
+        Preview: '预览'
       },
       FilterBar: {
         Title: '过滤器栏',
@@ -495,7 +498,7 @@ export const ZhHans = {
         Unit: '度量单位',
         CurrencyCode: '货币码',
         Bar: '栏',
-        IsBar: '条型状',
+        IsBar: '条型状'
       },
       InputControl: {
         Title: '输入控制器',
@@ -559,7 +562,7 @@ export const ZhHans = {
         DisablePagination: '禁用分页',
         Disabled: '禁用',
         Details: '详情',
-        StretchTabs: '拉伸',
+        StretchTabs: '拉伸'
       },
       WIDGET: {
         ANALYTICAL_CARD: '分析卡片',
@@ -657,6 +660,47 @@ export const ZhHans = {
       },
       Video: {
         VideoUrl: '视频链接'
+      },
+      CHART: {
+        DIMENSIONS: '维度',
+        MEASURES: '度量',
+        RealTimeLinkedAnalysis: '实时联动分析',
+        DisableContextMenu: '禁用上下文菜单',
+        ShowDataButton: '显示数据按钮',
+        HideHeader: '隐藏标题栏',
+        HideDataDownload: '隐藏数据下载',
+        HideScreenshot: '隐藏截图',
+        MaximumLimit: '最大数据量限制',
+        DigitInfo: '数字格式',
+        TrellisHorizontal: '格子横向个数',
+        UniversalTransition: '全局过渡动画',
+        CustomLogic: '自定义逻辑',
+        Color: '颜色',
+        Enabled: '启用',
+        ShowDecal: '显示贴花',
+        Decals: '贴花图案',
+        Options: '选项',
+        ChartSettings: '图形配置',
+        ChartVariants: '图形变型',
+        Stacked: '堆叠',
+        ReferenceLine: {
+          Title: '创建参考线',
+          ReferenceLine: '参考线',
+          removeLabel: '删除',
+          Label: '名称',
+          Type: '展示类型',
+          MarkLine: '标记线',
+          MarkPoint: '标记点',
+          ValueType: '值类型',
+          Fixed: '固定',
+          Dynamic: '动态',
+          Value: '值',
+          Aggregation: '聚合类型',
+          Min: '最小值',
+          Max: '最大值',
+          Average: '平均值',
+          Median: '中位数'
+        }
       }
     },
     Explain: {
@@ -681,10 +725,99 @@ export const ZhHans = {
       Theme: '主题',
       ConfirmApply: '应用模板将覆盖故事中的所有页面。你想继续吗？',
       Tags: '标签',
-      PreviewExceedsMaximum: '文件大小超过限制',
+      PreviewExceedsMaximum: '文件大小超过限制'
     },
     Explorer: {
       AddDimensions: '添加维度',
+      Data: '数据',
+      Display: '显示',
+      Visual: '可视化',
+      Options: '选项',
+      Table: '表格',
+      Chart: '图形',
+      ShowDimensions: '显示维度',
+      BringMoreDimensions: '从您的数据集中引入更多维度并开始探索',
+      ChartOptions: '图形配置',
+      Dimensions: '维度',
+      Measures: '度量',
+      And: '和',
+      By: '按'
+    },
+    Chart: {
+      ChartType: '图形类型',
+      CustomCode: '自定义代码',
+      AutomaticallyGenerateCode: '根据注释自动生成代码',
+      None: '无',
+      Horizontal: '横向',
+      Vertical: '纵向',
+      Doughnut: '环形图',
+      Doughnut2: '细环形图',
+      Nightingale: '南丁格尔',
+      Nightingale2: '南丁格尔2',
+      Polar: '极坐标',
+      Comparison: '比较',
+      Pie: '饼图',
+      Bar: '柱图',
+      Waterfall: '瀑布图',
+      Map: '地理',
+      Histogram: '直方图',
+      Trend: '趋势',
+      Line: '线图',
+      Line2: '纵向线图',
+      Area: '面积图',
+      AreaStacked: '堆积面积图',
+      'Theme River': '河流图',
+      ThemeRiver: '河流图',
+      Correlation: '相关',
+      Scatterplot: '散点图',
+      Scatter: '散点图',
+      Bubble: '气泡图',
+      'Cluster Bubble': '集群气泡图',
+      'Packed Bubble': '包气泡图',
+      'Radial Scatter': '雷达散点图',
+      Distribution: '分布',
+      'Heat Map': '热点图',
+      Heatmap: '热点图',
+      'Box plot': '盒须图',
+      Boxplot: '盒须图',
+      Tree: '树图',
+      'Tree Map': '矩阵树图',
+      Treemap: '矩阵树图',
+      Sunburst: '旭日图',
+      Sankey: '桑基图',
+      Radar: '雷达图',
+      Reverse: '反向',
+      Funnel: '漏斗图',
+      Calendar: '日历',
+      Radial: '雷达',
+      '3D': '三维',
+      Geo: '地理',
+      Custom: '自定义',
+      GeoMap: '地理图',
+      MapName: '地图名称',
+      MapUrl: '地理文件链接',
+      MapProjection: '地图投影',
+      IsTopoJSON: '是 TopoJSON 格式',
+      FeatureObjectNames: 'Feature 对象名称',
+      'Bar 3D': '三维柱形',
+      Bar3D: '三维柱形',
+      'Line 3D': '三维线图',
+      Line3D: '三维线图',
+      'Scatter 3D': '三维散点',
+      Scatter3D: '三维散点',
+      Column: '柱条形图',
+      ColumnStacked: '堆积柱图',
+      ColumnPolar: '极坐标柱图',
+      BarStacked: '堆积条形图',
+      BarPolar: '极坐标条形图',
+      BarPolarBackground: '极坐标背景柱图',
+      Combination: '组合图',
+      BarTrellis: '柱形图矩阵',
+      Ask: '提问',
+      ChartName: '图形名称',
+      Stacked: '堆叠',
+      Variant: '变型',
+      Orient: '方向'
     },
     STYLING: {
       CSS: {
@@ -797,8 +930,10 @@ export const ZhHans = {
           UniversalTransition: '全局过渡动画',
           Label: '标签',
           Position: '位置',
-          Left: '左侧',
-          Right: '右侧',
+          Left: '左',
+          Right: '右',
+          Top: '上',
+          Bottom: '下',
           Silent: '静默',
           Cursor: '光标',
           Cursor_Auto: '自动',
@@ -816,6 +951,7 @@ export const ZhHans = {
           SelectedMode_None: '无',
           SelectedMode_Single: '单选',
           SelectedMode_Multiple: '多选',
+          SelectedMode_False: '禁用',
           SelectedMode_Series: '系列',
           Formatter: '格式化',
           Rotate: '旋转',
@@ -833,14 +969,23 @@ export const ZhHans = {
           SymbolSize: '符号大小',
           SymbolRotate: '符号旋转',
           SymbolOffset: '符号位移',
-          Stack: '堆积',
+          Stack: '堆叠',
           TextAlign: {
             Title: '文本对齐',
             Auto: '自动',
             Left: '靠左',
             Right: '靠右',
             Center: '居中'
-          }
+          },
+          Name: '名称',
+          LegendHoverLink: '图例联动高亮',
+          Position_Auto: '自动',
+          Position_Left: '靠左',
+          Position_Right: '靠右',
+          Position_Top: '靠上',
+          Position_Bottom: '靠下',
+          Position_Middle: '居中',
+          Position_Center: '居中'
         },
         Global: {
           Title: '全局',
@@ -886,7 +1031,26 @@ export const ZhHans = {
           Max: '最大值'
         },
         Axis: {
-          Title: '轴'
+          Title: '轴',
+          Name: '名称',
+          NameLocation: '名称位置',
+          NameGap: '名称间隙',
+          NameRotate: '名称旋转',
+          MinorSplitLine: '次分割线',
+          AxisTick: {
+            Title: '轴刻度',
+            Show: '显示',
+            AlignWithLabel: '与标签对齐',
+            Interval: '间隔',
+            Inside: '在内侧',
+            Length: '长度'
+          },
+          MinorTick: {
+            Title: '次刻度',
+            Show: '显示',
+            SplitNumber: '分格数',
+            Length: '长度'
+          }
         },
         SingleAxis: {
           Title: '单轴'
@@ -942,10 +1106,21 @@ export const ZhHans = {
           Overflow_Break: '间断',
           Overflow_BreakAll: '间断所有'
         },
+        AxisPointer: {
+          Title: '轴指针',
+          Show: '显示',
+          Type: '类型',
+          Snap: '对齐',
+          Handle: {
+            Title: '手柄',
+            Show: '显示',
+            Type: '类型'
+          }
+        },
         GRID: {
           GRID: '网格',
           SHOW: '是否显示',
-          CONTAIN_LABEL: '是否包含刻度标签',
+          CONTAIN_LABEL: '包含刻度标签',
           BACKGROUND_COLOR: '背景颜色',
           BORDER_COLOR: '边框颜色',
           BORDER_WIDTH: '边框粗细'
@@ -960,10 +1135,18 @@ export const ZhHans = {
           LEGEND_RIGHT: '右侧的距离',
           LEGEND_BOTTOM: '下侧的距离',
           LEGEND_ORIENT: '布局朝向',
-          LEGEND_ALIGN: '对齐',
+          Align: '对齐',
+          Align_Auto: '自动',
+          Align_Left: '左对齐',
+          Align_Right: '右对齐',
           ItemGap: '元素间距',
           ItemWidth: '元素宽度',
-          ItemHeight: '元素高度'
+          ItemHeight: '元素高度',
+          InactiveColor: '非激活颜色',
+          InactiveBorderColor: '非激活边框颜色',
+          InactiveBorderWidth: '非激活边框宽度',
+          IconSymbol: '图标符号',
+          TextStyle: '文字样式'
         },
         TOOLTIP: {
           TITLE: '提示框',
@@ -977,7 +1160,23 @@ export const ZhHans = {
           AxisPointer: '轴指针',
           Type: '类型',
           Axis: '轴',
-          Snap: '快照'
+          Snap: '快照',
+          AlwaysShowContent: '永远显示',
+          TriggerOn: '触发条件',
+          ShowDelay: '延迟显示',
+          HideDelay: '延迟隐藏',
+          Enterable: '鼠标进入',
+          Confine: '限制在图表的区域内',
+          ClassName: 'CSS 类',
+          TransitionDuration: '移动动画时间',
+          Position: '位置',
+          BackgroundColor: '背景颜色',
+          BorderColor: '边框颜色',
+          BorderWidth: '边框宽度',
+          Padding: '内边距',
+          Order: '排列顺序',
+          TextStyle: '文本样式',
+          ExtraCssText: '附加样式'
         },
         TEXT: {
           TEXTSTYLE: '全局的字体样式',
@@ -987,6 +1186,7 @@ export const ZhHans = {
           TEXTSTYLE_FONTSIZE: '文字的字体大小'
         },
         DATAZOOM_STYLE: {
+          None: '无',
           DATAZOOM: '数据缩放',
           ORIENT: '布局方式',
           ORIENT_HORIZONTAL: '水平',
@@ -1000,7 +1200,24 @@ export const ZhHans = {
           YAXIS_INDEX: '控制的 Y 轴',
           MIN_SPAN: '窗口最小值',
           MAX_SPAN: '窗口最大值',
-          ZOOM_LOCK: '锁定窗口大小'
+          ZOOM_LOCK: '锁定窗口大小',
+          Type_none: '无',
+          Type_inside: '内置',
+          Type_slider: '滑动条',
+          Type_sliderInside: '内置+滑动条',
+          RangeMode: '范围模式',
+          MinValueSpan: '最小实际值',
+          MaxValueSpan: '最大实际值',
+          Throttle: '刷新频率',
+          PreventDefaultMouseMove: '阻止默认的鼠标移动',
+          MouseMode_true: '不按功能键',
+          MouseMode_false: '不触发',
+          MouseMode_shift: '按住 SHIFT 触发',
+          MouseMode_ctrl: '按住 CTRL 触发',
+          MouseMode_alt: '按住 ALT 触发',
+          zoomOnMouseWheel: '鼠标滚动缩放',
+          moveOnMouseMove: '鼠标移动移动',
+          moveOnMouseWheel: '鼠标滚动移动'
         },
         SERIE_STYLE: {
           TITLE: '系列统一属性',
@@ -1072,7 +1289,9 @@ export const ZhHans = {
           Focus_None: '无',
           Focus_Self: '自己',
           Focus_Series: '系列',
-          Scale: '缩放'
+          Focus_Adjacency: '相邻',
+          Scale: '缩放',
+          ScaleSize: '缩放大小'
         },
         ITEM_STYLE: {
           TITLE: '单个体样式',
@@ -1091,16 +1310,36 @@ export const ZhHans = {
         SeriesStyle: {
           Title: '系列属性',
           HasAll: '有 All 成员',
-          FunnelAlign: '漏斗对齐'
+          FunnelAlign: '漏斗对齐',
+          BoundaryGap: '边界间隙'
         },
         DDD: {
           GridTitle: '3D网格',
-          BoxWidth: '柱形宽度',
-          BoxHeight: '柱形高度',
-          BoxDepth: '柱形深度',
+          BoxWidth: '宽度',
+          BoxHeight: '高度',
+          BoxDepth: '深度',
           Light: '光线',
           BarSeriesTitle: '系列属性',
-          Shading: '明暗法'
+          Shading: '明暗法',
+          Environment: '环境贴图',
+          PostEffect: '后处理特效',
+          TemporalSuperSampling: '分帧超采样',
+          Enable: '启用',
+          ViewControl: '视角控制',
+          BevelSize: '倒角尺寸',
+          BevelSmoothness: '倒角圆润度',
+          Stack: '堆叠',
+          StackStrategy: '堆叠策略',
+          MinHeight: '最小高度',
+          Silent: '不响应',
+          Label: '标签',
+          ItemStyle: '元素样式',
+          Show: '显示',
+          Distance: '距离',
+          Formatter: '格式',
+          TextStyle: '文本样式',
+          Emphasis: '高亮',
+          BlendMode: '混合模式'
         },
         Select: {
           Title: '选中样式'
@@ -1123,12 +1362,17 @@ export const ZhHans = {
           OutofRange: '范围外的',
           Text: '描述',
           SymbolSize: '符号大小',
+          ColorLightness: '颜色亮度',
           Inverse: '倒转',
           Min: '最小值',
           Max: '最大值',
           Range: '预选中范围',
           SplitNumber: '分割数量',
-          Precision: '数字精度'
+          Precision: '数字精度',
+          Pieces: '分段',
+          ShowLabel: '显示标签',
+          ItemSymbol: '元素符号',
+          ItemGap: '元素间距'
         },
         Calendar: {
           Title: '日历',
@@ -1138,7 +1382,14 @@ export const ZhHans = {
         SplitLine: {
           Title: '分割线',
           Show: '显示',
-          LineStyle: '线样式'
+          LineStyle: '线样式',
+          Interval: '间隔'
+        },
+        SplitArea: {
+          Title: '分割区域',
+          Show: '显示',
+          AreaStyle: '区域样式',
+          Interval: '间隔'
         },
         LineStyle: {
           Title: '线样式',
@@ -1163,10 +1414,42 @@ export const ZhHans = {
           TextShadowOffsetX: '文本阴影偏移X',
           TextShadowOffsetY: '文本阴影偏移Y',
           Overflow: '溢出',
-          Ellipsis: '省略'
+          Overflow_Null: '无',
+          Overflow_Truncate: '截断',
+          Overflow_Break: '间断',
+          Overflow_BreakAll: '间断所有',
+          Ellipsis: '省略',
+          Align: '对齐',
+          Align_Auto: '自动',
+          Align_Left: '左',
+          Align_Center: '中',
+          Align_Right: '右',
+          Color: '文本颜色',
+          FontStyle: '文本样式',
+          FontStyle_Auto: '自动',
+          FontStyle_Normal: '正常',
+          FontStyle_Italic: '倾斜 Italic',
+          FontStyle_Oblique: '倾斜 Oblique',
+          FontWeight: '字重',
+          FontFamily: '字体',
+          FontSize: '字体大小',
+          LineHeight: '行高',
+          VerticalAlign: '垂直对齐',
+          VerticalAlign_Auto: '自动',
+          VerticalAlign_Top: '顶部',
+          VerticalAlign_Middle: '居中',
+          VerticalAlign_Bottom: '底部',
+          RichText: '富文本'
         },
         Geo: {
-          Title: '地理组件'
+          Title: '地理组件',
+          Center: '中心',
+          Aggregator: '聚合函数',
+          AspectScale: '长宽比',
+          BoundingCoords: '地图范围',
+          NameProperty: 'GeoJSON 属性名称',
+          ShowLegendSymbol: '显示图例标识',
+          Zoom: '缩放比例'
         },
         Title: {
           Title: '标题',
@@ -1195,7 +1478,7 @@ export const ZhHans = {
           ShowSymbol: '显示符号',
           ShowAllSymbol: '显示所有符号',
           Smooth: '平滑',
-          Stack: '堆积',
+          Stack: '堆叠',
           Step: '分步',
           AreaStyle: '面积样式',
           Origin: '源'
@@ -1228,7 +1511,10 @@ export const ZhHans = {
           AlignTo_edge: '文字对齐',
           EdgeDistance: '文字边距',
           BleedMargin: '出血线大小',
-          DistanceToLabelLine: '文字与线间距'
+          DistanceToLabelLine: '文字与线间距',
+          PercentPrecision: '百分比精度',
+          StillShowZeroSum: '零数据仍显示扇区',
+          AvoidLabelOverlap: '防止标签重叠'
         },
         Sankey: {
           HasAll: '有 All 成员',
@@ -1255,7 +1541,13 @@ export const ZhHans = {
           VisualMin: '最小可视',
           VisualMax: '最大可视',
           LevelsOptions: '层级属性',
-          GapWidth: '间隙宽度'
+          GapWidth: '间隙宽度',
+          DragRoam: '拖拽漫游',
+          DragRoam_default: '默认',
+          DragRoam_false: '关闭',
+          DragRoam_scale: '缩放',
+          DragRoam_move: '平移',
+          DragRoam_all: '缩放和平移'
         },
         Sunburst: {
           Label: '标签',
@@ -1270,6 +1562,25 @@ export const ZhHans = {
         Heatmap: {
           DateFormatter: '日期格式'
         },
+        Label: {
+          Title: '标签'
+        },
+        LabelLine: {
+          ShowAbove: '图形上方',
+          Smooth: '平滑',
+          FirstLength: '第一段的长度',
+          SecondLength: '第二段的长度',
+          MinTurnAngle: '最小转弯角度',
+          MaxSurfaceAngle: '最大表面角度'
+        },
+        LabelLayout: {
+          Title: '标签布局',
+          HideOverlap: '隐藏重叠',
+          MoveOverlap: '挪动防止重叠',
+          MoveOverlap_none: '无',
+          MoveOverlap_shiftX: '水平依次位移',
+          MoveOverlap_shiftY: '垂直依次位移'
+        },
         Waterfall: {
           Accumulate: '累计'
         }
diff --git a/libs/story-angular/src/lib/_index.scss b/libs/story-angular/src/lib/_index.scss
new file mode 100644
index 000000000..f9a5040d2
--- /dev/null
+++ b/libs/story-angular/src/lib/_index.scss
@@ -0,0 +1 @@
+@import './explorer/_explorer.component';
diff --git a/libs/story-angular/src/lib/explorer/_explorer.component.scss b/libs/story-angular/src/lib/explorer/_explorer.component.scss
new file mode 100644
index 000000000..b64334ac8
--- /dev/null
+++ b/libs/story-angular/src/lib/explorer/_explorer.component.scss
@@ -0,0 +1,9 @@
+.ngm-story-explorer {
+  .mat-mdc-tab-group .mat-mdc-tab-header {
+    --mdc-secondary-navigation-tab-container-height: 38px;
+  }
+
+  .mat-mdc-header-cell.mat-mdc-table-sticky {
+    @apply bg-slate-50;
+  }
+}
\ No newline at end of file
diff --git a/libs/story-angular/src/lib/explorer/explorer.component.html b/libs/story-angular/src/lib/explorer/explorer.component.html
index b1f12dcb6..9a70f2364 100644
--- a/libs/story-angular/src/lib/explorer/explorer.component.html
+++ b/libs/story-angular/src/lib/explorer/explorer.component.html
@@ -1,55 +1,47 @@
 <div class="relative w-full h-64 shrink-0 flex justify-start items-stretch p-1" ngmResizer [resizerHeight]="230">
     <div class="flex flex-col justify-start">
-        <button mat-button (click)="back()">{{ 'PAC.KEY_WORDS.Back' | translate: {Default: 'Back'} }}</button>
+        <button mat-stroked-button color="primary" (click)="back()">{{ 'Story.Common.Back' | translate: {Default: 'Back'} }}</button>
     </div>
 
     <div class="flex-1 h-full flex justify-start items-stretch gap-2 p-1 overflow-auto">
 
         <div class="shrink-0 w-64 h-full flex flex-col justify-start items-stretch bg-white rounded-xl overflow-hidden">
             <div class="shrink-0 px-1 flex flex-wrap items-center">
-                {{ 'PAC.KEY_WORDS.Measures' | translate: {Default: 'Measures'} }}
+                {{ 'Story.Common.Measures' | translate: {Default: 'Measures'} }}
             </div>
 
             <div class="flex-1 overflow-auto" displayDensity="compact">
-                <mat-selection-list id="ngm-story-explorer__drop-list-measures" class="w-full"
-                    [ngModel]="measures()"
-                    (ngModelChange)="onMeasuresChange($event)"
+                <ngm-search [formControl]="measureSearch"></ngm-search>
+                <mat-list id="ngm-story-explorer__drop-list-measures" role="list" class="w-full"
                     cdkDropList
                     [cdkDropListData]="[]">
-                    <mat-list-option *ngFor="let item of measureList()" [value]="item"
+                    <mat-list-item role="listitem" *ngFor="let item of measureList()" class="hover:bg-slate-50"
                         cdkDrag
-                        [cdkDragData]="item"
-                    >
-                      {{item.caption}}
-                    </mat-list-option>
-                </mat-selection-list>
+                        [cdkDragData]="item">
+                        <ngm-entity-property [property]="item" [highlight]="measureSearch.value"></ngm-entity-property>
+                    </mat-list-item>
+                </mat-list>
             </div>
         </div>
 
-        <div class="h-full flex gap-2" id="ngm-story-explorer__drop-list-dimensions-container"
+        <div class="h-full flex gap-2" id="ngm-story-explorer__drop-list-dimensions"
             cdkDropList cdkDropListOrientation="horizontal"
             [cdkDropListData]="dimensions()"
             (cdkDropListDropped)="moveDimension($event)">
-            <div *ngFor="let dim of dimensions(); trackBy: trackByDim" class="shrink-0 w-64 h-full flex flex-col justify-start items-stretch bg-white rounded-xl overflow-hidden"
+            <div *ngFor="let dim of dimensions(); trackBy: trackByDim" class="shrink-0 w-64 h-full flex flex-col justify-start items-stretch rounded-xl overflow-hidden
+                bg-white"
                 cdkDrag
                 [cdkDragData]="dim"
             >
-                <div class="shrink-0 px-1 flex flex-wrap items-center"
-                    id="ngm-story-explorer__drop-list-dimensions"
-                    cdkDropList
-                    [cdkDropListData]="[]"
-                >
-                <div *ngFor="let item of dim.hierarchies" class="tag text-sm block font-bold leading-sm px-2 py-1 rounded-lg cursor-pointer
-                    overflow-hidden text-ellipsis whitespace-nowrap"
-                    [class.selected]="item.hierarchy === dim.dimension.hierarchy"
-                    (click)="toggleHierarchy(item.hierarchy, dim)"
-                    cdkDrag
-                    [cdkDragData]="item"
-                    >
-                    <span>
-                        {{item.caption}}
-                    </span>
-                </div>
+                <div class="shrink-0 p-1 flex flex-wrap items-center gap-1">
+                    <div *ngFor="let item of dim.hierarchies" class="tag text-sm block font-bold leading-sm px-2 py-1 rounded-lg cursor-pointer
+                        overflow-hidden text-ellipsis whitespace-nowrap"
+                        [class.selected]="item.hierarchy === (dim.dimension.hierarchy ?? dim.dimension.dimension)"
+                        [class.slicered]="slicers()[item.dimension]?.members?.length"
+                        (click)="toggleHierarchy(dim.dimension.dimension, item.hierarchy === dim.dimension.hierarchy ? null : item.hierarchy)"
+                        >
+                        <span>{{item.caption}}</span>
+                    </div>
                 </div>
                 <ngm-member-tree class="flex-1 overflow-auto" displayDensity="compact"
                     [dataSettings]="data.dataSettings"
@@ -59,7 +51,7 @@
                         multiple: true,
                         selectionType: FilterSelectionType.Multiple
                     }"
-                    [ngModel]="slicers[dim.dimension.dimension]"
+                    [ngModel]="slicers()[dim.dimension.dimension]"
                     (ngModelChange)="onSlicersChange($event, dim.dimension.dimension)"
                 ></ngm-member-tree>
             </div>
@@ -74,8 +66,8 @@
                 </svg>
             </div>
             <div class="flex flex-col justify-center items-start">
-                <div>Show Dimensions</div>
-                <div>Bring in more dimensions from your dataset and start exploring.</div>
+                <div>{{'Story.Explorer.ShowDimensions' | translate: {Default: 'Show Dimensions'} }}</div>
+                <div class="text-sm">{{'Story.Explorer.BringMoreDimensions' | translate: {Default: 'Bring in more dimensions from your dataset and start exploring'} }}.</div>
             </div>
         </div>
     </div>
@@ -86,76 +78,95 @@
     ></div>
 </div>
 
-<div class="w-full flex-1 flex justify-start items-stretch gap-2 overflow-hidden">
-    <div ngmResizer [resizerWidth]="280" class="w-80 relative">
-        <div ngmResizerBar resizerBarPosition="right"
+<div class="w-full flex-1 p-2 flex justify-start items-stretch gap-2 overflow-hidden">
+    <div ngmResizer [resizerWidth]="360" class="relative">
+        <div ngmResizerBar resizerBarPosition="right" class="z-10"
             cdkDrag
             cdkDragLockAxis="x"
         ></div>
     
         <div *ngIf="visualPanel === 'options'" class="h-full bg-white rounded-xl flex flex-col justify-start items-stretch overflow-hidden" >
-            <div class="font-bold px-2 py-1">{{ 'PAC.KEY_WORDS.Dimensions' | translate: {Default: 'Dimensions'} }}</div>
-            <div class="pac-cdk-drop__list min-h-28 w-full flex flex-col justify-start items-stretch overflow-auto gap-1 p-2"
-                id="ngm-story-explorer__drop-list-rows"
-                cdkDropList
-                [cdkDropListData]="rows()"
-                (cdkDropListDropped)="dropRow($event)"
-                [cdkDropListEnterPredicate]="dropRowPredicate">
-                <ngm-property-select *ngFor="let row of rows(); index as i; trackBy: trackByIndex" class="w-full" editable displayDensity="compact"
-                    showAttributes
-                    [dataSettings]="dataSettings()"
-                    [entityType]="entityType()"
-                    [ngModel]="row"
-                    [capacities]="[
-                        PropertyCapacity.Dimension
-                    ]"
-                    cdkDrag
-                    [cdkDragData]="row"
-                    (ngModelChange)="onRowChange($event, i)"
-                    >
-                    <button displayDensity="compact" ngmAppearance="danger" mat-icon-button color="warn"
-                        (click)="$event.stopPropagation();$event.preventDefault();removeRow(i)">
-                        <mat-icon>clear</mat-icon>
-                    </button>
-                </ngm-property-select>
-            </div>
+            <mat-tab-group class="overflow-hidden" fitInkBarToContent preserveContent>
+                <mat-tab [label]="'Story.Explorer.Data' | translate: {Default: 'Data'} ">
+                    <div class="font-bold px-2 py-1 mt-2">{{ 'Story.Explorer.Dimensions' | translate: {Default: 'Dimensions'} }}</div>
+                    <div class="pac-cdk-drop__list min-h-28 w-full flex flex-col justify-start items-stretch overflow-auto gap-1 p-2"
+                        id="ngm-story-explorer__drop-list-rows"
+                        cdkDropList
+                        [cdkDropListData]="rows()"
+                        (cdkDropListDropped)="dropRow($event)"
+                        [cdkDropListEnterPredicate]="dropRowPredicate">
 
-            <div class="font-bold px-2 py-1">{{ 'PAC.KEY_WORDS.Measures' | translate: {Default: 'Measures'} }}</div>
-            <div class="pac-cdk-drop__list min-h-28 w-full flex flex-col justify-start items-stretch overflow-auto gap-1 p-2"
-                id="ngm-story-explorer__drop-list-columns"
-                cdkDropList
-                [cdkDropListData]="columns()"
-                (cdkDropListDropped)="dropColumn($event)"
-                [cdkDropListEnterPredicate]="dropColumnPredicate">
-                <ngm-property-select *ngFor="let item of columns(); index as i; trackBy: trackByIndex" class="w-full" editable displayDensity="compact"
-                    showAttributes
-                    [dataSettings]="dataSettings()"
-                    [entityType]="entityType()"
-                    [ngModel]="item"
-                    [capacities]="[
-                        PropertyCapacity.Measure
-                    ]"
-                    cdkDrag
-                    [cdkDragData]="item"
-                    (ngModelChange)="onColumnChange($event, i)"
-                    >
-                    <button displayDensity="compact" ngmAppearance="danger" mat-icon-button color="warn"
-                        (click)="$event.stopPropagation();$event.preventDefault();removeColumn(i)">
-                        <mat-icon>clear</mat-icon>
-                    </button>
-                </ngm-property-select>
-            </div>
+                        <ngm-chart-property *ngFor="let row of rows(); index as i; trackBy: trackByIndex" class="w-full"
+                            removable
+                            [capacities]="dimensionCapacities()"
+                            [dataSettings]="dataSettings()"
+                            [entityType]="entityType()"
+                            [ngModel]="row"
+                            (ngModelChange)="onRowChange($event, i)"
+
+                            cdkDrag
+                            [cdkDragData]="row"
+                        >
+                            <button ngmSuffix displayDensity="compact" ngmAppearance="danger" mat-icon-button color="warn"
+                                (click)="$event.stopPropagation();$event.preventDefault();removeRow(i)">
+                                <mat-icon>clear</mat-icon>
+                            </button>
+                        </ngm-chart-property>
+                    </div>
+
+                    <div class="font-bold px-2 py-1 mt-2">{{ 'Story.Explorer.Measures' | translate: {Default: 'Measures'} }}</div>
+                    <div class="pac-cdk-drop__list min-h-28 w-full flex flex-col justify-start items-stretch overflow-auto gap-1 p-2"
+                        id="ngm-story-explorer__drop-list-columns"
+                        cdkDropList
+                        [cdkDropListData]="columns()"
+                        (cdkDropListDropped)="dropColumn($event)"
+                        [cdkDropListEnterPredicate]="dropColumnPredicate">
+
+                        <ngm-chart-property *ngFor="let item of columns(); index as i; trackBy: trackByIndex" class="w-full"
+                            removable
+                            [capacities]="measureCapacities()"
+                            [dataSettings]="dataSettings()"
+                            [entityType]="entityType()"
+                            [chartType]="chartType()"
+                            [ngModel]="item"
+                            (ngModelChange)="onColumnChange($event, i)"
+
+                            cdkDrag
+                            [cdkDragData]="item"
+                        >
+                            <button ngmSuffix displayDensity="compact" ngmAppearance="danger" mat-icon-button color="warn"
+                                (click)="$event.stopPropagation();$event.preventDefault();removeColumn(i)">
+                                <mat-icon>clear</mat-icon>
+                            </button>
+                        </ngm-chart-property>
+                    </div>
+
+                    <ng-container *ngIf="component().component === ComponentType.AnalyticalCard">
+                        <div class="font-bold px-2 py-1 mt-2">{{ 'Story.Explorer.ChartOptions' | translate: {Default: 'Chart Options'} }}</div>
+                        <ngm-chart-type-form class="text-sm" displayDensity="compact" [(ngModel)]="chartTypeChartOptions" [chartType]="chartType()"></ngm-chart-type-form>
+                    </ng-container>
+                </mat-tab>
+                <mat-tab [label]="'Story.Explorer.Display' | translate: {Default: 'Display'} ">
+                    <ngm-chart-settings *ngIf="component().component === ComponentType.AnalyticalCard" class="w-full text-sm" displayDensity="compact"
+                        [(ngModel)]="chartSettings"
+                        [chartType]="chartType()"
+                    ></ngm-chart-settings>
+                    <ngm-grid-settings *ngIf="component().component === ComponentType.AnalyticalGrid" class="w-full text-sm" displayDensity="compact"
+                        [(ngModel)]="gridSettings"
+                    ></ngm-grid-settings>
+                </mat-tab>
+            </mat-tab-group>
         </div>
 
         <div *ngIf="visualPanel === 'visual'" class="h-full bg-white rounded-xl flex flex-col justify-start items-stretch overflow-auto">
             <div *ngFor="let group of charts" >
                 <div class="text-sm p-2">
-                    {{'FORMLY.CHART.' + group.label | translate: {Default: group.label} }}
+                    {{'Story.Chart.' + group.label | translate: {Default: group.label} }}
                 </div>
-                <div class="grid grid-cols-3 gap-2">
+                <div class="grid grid-cols-4 gap-2">
                     <button *ngFor="let chart of group.charts" class="ngm-story-explorer__chart m-2 flex flex-col justify-center items-center rounded-lg overflow-hidden
                         ring-offset-2 ring-2 ring-transparent hover:ring-violet-300 focus:ring-violet-500"
-                        [matTooltip]="'FORMLY.CHART.' + chart.label | translate: {Default: chart.label}"
+                        [matTooltip]="'Story.Chart.' + chart.label | translate: {Default: chart.label}"
                         matTooltipPosition="above"
                         draggable="true"
                         [class.selected]="component().label === chart.label"
@@ -172,7 +183,7 @@
                                 transform: chart.rotate ? 'rotate(90deg)' : 'none'
                             }"
                         >
-                        <div class="text-xs">{{ 'FORMLY.CHART.' + chart.label | translate: {Default: chart.label} }}</div>
+                        <div class="text-xs">{{ 'Story.Chart.' + chart.label | translate: {Default: chart.label} }}</div>
                     </button>
                 </div>
             </div>
@@ -181,57 +192,61 @@
     <div class="flex-1 bg-white rounded-xl flex flex-col justify-center items-center overflow-hidden">
         <div class="flex-1 w-full overflow-hidden">
             <ngm-analytical-card *ngIf="view === 'chart'" class="w-full h-full group"
-                [title]="'Data chart for dimensions and measure'"
+                [title]="chartTitle()"
                 [dataSettings]="dataSettingsChart()"
-                [slicers]="_slicers()"
-                [chartOptions]="chartOptions()"
+                [chartOptions]="chartSettings.chartOptions"
+                [chartSettings]="chartSettings.chartSettings"
+                (explain)="setExplains($event)"
                 >
             </ngm-analytical-card>
 
             <ngm-analytical-grid *ngIf="view === 'table'" class="w-full h-full group overflow-auto"
-                [title]="'Data grid for dimensions and measure'"
+                [title]="chartTitle()"
                 [dataSettings]="dataSettingsGrid()"
-                [slicers]="_slicers()"
                 [appearance]="{
                     displayDensity: DisplayDensity.compact
                 }"
-                [options]="{
-                    showToolbar: true,
-                    paging: true,
-                    pageSize: 20,
-                    sticky: true,
-                    sortable: true
-                }"
+                [options]="gridSettings.options"
+                (explain)="setExplains($event)"
             ></ngm-analytical-grid>
         </div>
         <mat-divider class="w-full"></mat-divider>
         <div class="w-full flex justify-between items-center px-2">
-            <mat-button-toggle-group class="ngm-button-group" displayDensity="cosy" ngmAppearance="color" color="accent"
+            <mat-button-toggle-group displayDensity="cosy" ngmAppearance="hero" color="accent"
                 [(ngModel)]="visualPanel"
             >
-                <mat-button-toggle value="visual">Visual</mat-button-toggle>
-                <mat-button-toggle value="options">Options</mat-button-toggle>
+                <mat-button-toggle *ngIf="component().component === ComponentType.AnalyticalCard" value="visual">
+                    {{ 'Story.Explorer.Visual' | translate: {Default: 'Visual'} }}
+                </mat-button-toggle>
+                <mat-button-toggle value="options">
+                    <mat-icon fontSet="material-icons-outlined" displayDensity="compact">settings</mat-icon>
+                </mat-button-toggle>
             </mat-button-toggle-group>
 
-            <mat-button-toggle-group class="ngm-button-group" displayDensity="cosy" ngmAppearance="color" color="accent"
+            <mat-button-toggle-group displayDensity="cosy" ngmAppearance="hero" color="accent"
                 [(ngModel)]="view"
             >
-                <mat-button-toggle value="table">Table</mat-button-toggle>
-                <mat-button-toggle value="chart">Chart</mat-button-toggle>
+                <mat-button-toggle value="table">
+                    {{ 'Story.Explorer.Table' | translate: {Default: 'Table'} }}
+                </mat-button-toggle>
+                <mat-button-toggle *ngIf="component().component === ComponentType.AnalyticalCard" value="chart">
+                    {{ 'Story.Explorer.Chart' | translate: {Default: 'Chart'} }}
+                </mat-button-toggle>
             </mat-button-toggle-group>
 
-            <div ngmButtonGroup >
-                <button mat-raised-button color="primary">确定</button>
+            <div ngmButtonGroup>
+                <button mat-button (click)="openExplain()">
+                    <mat-icon fontSet="material-icons-round">code</mat-icon>
+                    {{ 'Story.Widget.Explain' | translate: {Default: "Explain"} }}
+                </button>
+                <button mat-raised-button color="primary" (click)="close()">
+                    {{ 'Story.Common.Confirm' | translate: {Default: 'Confirm'} }}
+                </button>
             </div>
         </div>
     </div>
 </div>
 
-<!-- <div class="flex-1 flex justify-center items-center p-2 gap-2 overflow-hidden">
-    <div class="h-full flex-1 flex flex-col justify-start items-stretch gap-2 overflow-hidden">
-    </div>
-</div> -->
-
 <ng-template #addDimensionsTempl>
     <div class="flex flex-col">
       <header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
diff --git a/libs/story-angular/src/lib/explorer/explorer.component.scss b/libs/story-angular/src/lib/explorer/explorer.component.scss
index 8b39d2842..9cb395d66 100644
--- a/libs/story-angular/src/lib/explorer/explorer.component.scss
+++ b/libs/story-angular/src/lib/explorer/explorer.component.scss
@@ -2,9 +2,16 @@
   @apply flex flex-col justify-start items-stretch bg-slate-100;
 }
 
+.tag:not(.selected) {
+  @apply bg-slate-50;
+}
 .tag.selected {
+  @apply bg-slate-200;
+}
+.tag.selected.slicered {
   @apply text-amber-500 bg-amber-100;
 }
+
 .ngm-story-explorer__chart.selected {
   @apply ring-violet-500;
 }
diff --git a/libs/story-angular/src/lib/explorer/explorer.component.ts b/libs/story-angular/src/lib/explorer/explorer.component.ts
index bae93769c..c6ce0b040 100644
--- a/libs/story-angular/src/lib/explorer/explorer.component.ts
+++ b/libs/story-angular/src/lib/explorer/explorer.component.ts
@@ -1,23 +1,41 @@
 import { CdkDrag, CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop'
 import { CommonModule } from '@angular/common'
-import { Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, computed, effect, inject, signal } from '@angular/core'
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+  computed,
+  effect,
+  inject,
+  signal
+} from '@angular/core'
 import { toObservable, toSignal } from '@angular/core/rxjs-interop'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatButtonToggleModule } from '@angular/material/button-toggle'
 import { MatChipsModule } from '@angular/material/chips'
 import { MatDividerModule } from '@angular/material/divider'
 import { MatListModule } from '@angular/material/list'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { MatTabsModule } from '@angular/material/tabs'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
 import { NgmPrismHighlightComponent } from '@metad/components/prism'
 import { PropertyCapacity, PropertyModule } from '@metad/components/property'
 import { NxTableModule } from '@metad/components/table'
-import { NxChartType } from '@metad/core'
+import { NxChartType, nonBlank } from '@metad/core'
 import { AnalyticalCardModule } from '@metad/ocap-angular/analytical-card'
 import { AnalyticalGridModule } from '@metad/ocap-angular/analytical-grid'
 import { NgmMemberTreeComponent } from '@metad/ocap-angular/controls'
 import { DisplayDensity, NgmDSCoreService, OcapCoreModule } from '@metad/ocap-angular/core'
-import { EntityCapacity, NgmEntitySchemaComponent } from '@metad/ocap-angular/entity'
+import { EntityCapacity, NgmEntityPropertyComponent, NgmEntitySchemaComponent } from '@metad/ocap-angular/entity'
+import { NgmChartPropertyComponent, NgmChartSettingsComponent, NgmFormlyChartTypeComponent } from '@metad/story/widgets/analytical-card'
+import { NgmGridSettingsComponent } from '@metad/story/widgets/analytical-grid'
 import {
   C_MEASURES,
   ChartAnnotation,
@@ -27,21 +45,28 @@ import {
   DisplayBehaviour,
   FilterSelectionType,
   ISlicer,
+  Measure,
   assignDeepOmitBlank,
   cloneDeep,
-  compact,
   getEntityDimensions,
+  getEntityLevel,
   getEntityMeasures,
+  getEntityProperty,
+  isString,
   nonNullable,
-  pick
+  omit,
+  pick,
+  uniqBy
 } from '@metad/ocap-core'
 import { WidgetComponentType } from '@metad/story/core'
-import { TranslateModule } from '@ngx-translate/core'
-import { filter, map, switchMap } from 'rxjs/operators'
-import { CHARTS, getChartType } from './types'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { combineLatestWith, filter, map, startWith, switchMap } from 'rxjs/operators'
 import { MatIconModule } from '@angular/material/icon'
-import { ResizerModule } from '@metad/ocap-angular/common'
-import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
+import { NgmSearchComponent, ResizerModule } from '@metad/ocap-angular/common'
+import { CHARTS, getChartType } from './types'
+import { firstValueFrom } from 'rxjs'
+import { ExplainComponent } from '@metad/story/story'
+
 
 @Component({
   standalone: true,
@@ -58,6 +83,8 @@ import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dial
     MatTooltipModule,
     MatIconModule,
     MatDialogModule,
+    MatTabsModule,
+    MatRadioModule,
     DragDropModule,
     NxTableModule,
     NgmPrismHighlightComponent,
@@ -67,11 +94,17 @@ import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dial
     AnalyticalCardModule,
     AnalyticalGridModule,
     PropertyModule,
-    ResizerModule
+    ResizerModule,
+    NgmEntityPropertyComponent,
+    NgmSearchComponent,
+    NgmChartSettingsComponent,
+    NgmChartPropertyComponent,
+    NgmFormlyChartTypeComponent,
+    NgmGridSettingsComponent
   ],
   selector: 'ngm-story-explorer',
   templateUrl: 'explorer.component.html',
-  styleUrls: ['explorer.component.scss']
+  styleUrls: ['explorer.component.scss'],
 })
 export class StoryExplorerComponent {
   EntityCapacity = EntityCapacity
@@ -80,8 +113,11 @@ export class StoryExplorerComponent {
   ComponentType = WidgetComponentType
   FilterSelectionType = FilterSelectionType
 
+  @HostBinding('class.ngm-story-explorer') isStoryExplorerComponent = true
+
   private readonly dsCoreService = inject(NgmDSCoreService)
   private readonly _dialog = inject(MatDialog)
+  private readonly translateService = inject(TranslateService)
 
   @Input()
   get data() {
@@ -91,6 +127,7 @@ export class StoryExplorerComponent {
     this._data.set(value)
     if (value) {
       const chartAnnotation = value?.dataSettings?.chartAnnotation
+      const analytics = value?.dataSettings?.analytics
       if (chartAnnotation) {
         this.component.set({
           component: WidgetComponentType.AnalyticalCard,
@@ -99,27 +136,74 @@ export class StoryExplorerComponent {
         })
         this.rows.set(chartAnnotation.dimensions)
         this.columns.set(chartAnnotation.measures)
-        this._dimensions.set(chartAnnotation.dimensions?.map((d) => d.dimension) ?? [])
+        this._dimensions.set(chartAnnotation.dimensions?.map((d) => pick(d, 'dimension', 'hierarchy')) ?? [])
+        this._chartSettings.set({
+          chartOptions: value.chartOptions,
+          chartSettings: value.chartSettings
+        })
+        this.visualPanel = 'visual'
+        this.view = 'chart'
+      } else if (analytics) {
+        this.component.set({
+          label: null,
+          component: WidgetComponentType.AnalyticalGrid,
+          dataSettings: value.dataSettings
+        })
+
+        this.rows.set(analytics.rows)
+        this.columns.set(analytics.columns)
+        this._dimensions.set(
+          [...analytics.rows, ...analytics.columns].filter((d) => d.dimension !== C_MEASURES).map((d) => pick(d, 'dimension', 'hierarchy'))
+        )
+        this.gridSettings = {
+          options: value.options
+        }
+        this.visualPanel = 'options'
+        this.view = 'table'
       }
-    }
 
+      const dimensions = [...this._dimensions()]
+      if (value?.dataSettings?.selectionVariant?.selectOptions?.length) {
+        // Set slicers from selectionVariant
+        this.slicers.set(
+          (value.dataSettings.selectionVariant.selectOptions).reduce((acc, curr) => {
+            if (!curr.dimension) {
+              return acc
+            }
+            acc[curr.dimension.dimension] = curr
+            return acc
+          }, {})
+        )
+        // Udpate dimensions
+        dimensions.push(...value.dataSettings.selectionVariant.selectOptions
+          .filter((slicer) => !!slicer.dimension)
+          .map((slicer) => pick(slicer.dimension, 'dimension', 'hierarchy'))
+          .filter((d) => d.dimension))
+      }
+      this._dimensions.set(uniqBy(dimensions, 'dimension'))
+    }
   }
   private readonly _data = signal<{ dataSettings: DataSettings; chartAnnotation: ChartAnnotation }>(null)
 
-  @Output() closed = new EventEmitter<void>()
+  @Output() closed = new EventEmitter<any>()
 
   @ViewChild('addDimensionsTempl') addDimensionsTempl: TemplateRef<ElementRef>
 
   private dialogRef: MatDialogRef<ElementRef<any>, any>
-  
+
+  measureSearch = new FormControl('')
+
+  readonly i18n = toSignal(this.translateService.stream('Story.Explorer'))
   readonly _dimensionsCache = signal<string[]>([])
-  private _dimensions = signal<string[]>([])
+  private _dimensions = signal<Dimension[]>([])
   dimensions = signal<{ dimension: Dimension; caption: string; hierarchies: Dimension[] }[]>([])
 
   readonly entityType = toSignal(
     toObservable(this._data).pipe(
       filter(nonNullable),
-      switchMap(({ dataSettings }) =>
+      map(({ dataSettings }) => dataSettings),
+      filter((dataSettings) => !!(dataSettings?.dataSource && dataSettings?.entitySet)),
+      switchMap((dataSettings) =>
         this.dsCoreService
           .selectEntitySet(dataSettings.dataSource, dataSettings.entitySet)
           .pipe(map(({ entityType }) => entityType))
@@ -129,40 +213,41 @@ export class StoryExplorerComponent {
   readonly dimensionList = computed(() => {
     return getEntityDimensions(this.entityType())
   })
-  readonly measureList = computed(() => {
-    return getEntityMeasures(this.entityType()).map((property) => ({
-      dimension: C_MEASURES,
-      measure: property.name,
-      caption: property.caption
-    }))
-  })
+  readonly measureList = toSignal(
+    toObservable(this.entityType).pipe(
+      map(getEntityMeasures),
+      combineLatestWith(this.measureSearch.valueChanges.pipe(startWith(''))),
+      map(([measures, search]) => {
+        return search
+          ? measures.filter(
+              (measure) =>
+                measure.name.toLowerCase().includes(search.toLowerCase()) ||
+                measure.caption.toLowerCase().includes(search.toLowerCase())
+            )
+          : measures
+      })
+    )
+  )
+
   readonly dataSettings = computed<DataSettings>(() => {
     return pick(this.data?.dataSettings, 'dataSource', 'entitySet') as DataSettings
   })
   readonly dataSettingsChart = computed(() => {
     const chartAnnotation = assignDeepOmitBlank(
       {
-        ...cloneDeep(this.component()?.dataSettings?.chartAnnotation ?? this.data?.chartAnnotation ?? {})
+        ...cloneDeep(
+          omit(
+            this.component()?.dataSettings?.chartAnnotation ?? this.data?.chartAnnotation ?? {},
+            'dimensions',
+            'measures'
+          )
+        )
       },
       {
         dimensions: this.rows().map((row) => ({
-          ...row,
-          chartOptions: {
-            dataZoom: {
-              type: 'inside'
-            }
-          }
+          ...row
         })),
-        measures: [
-          ...this.columns(),
-          ...this.measures().map((measure) => ({
-            dimension: C_MEASURES,
-            measure,
-            formatting: {
-              shortNumber: true
-            }
-          }))
-        ]
+        measures: [...this.columns()]
       },
       5
     )
@@ -172,7 +257,12 @@ export class StoryExplorerComponent {
 
     return {
       ...(this.data?.dataSettings ?? {}),
-      chartAnnotation
+      chartAnnotation,
+      selectionVariant: {
+        selectOptions: Object.values(this.slicers())
+          .map((slicer) => slicer)
+          .filter((slicer) => slicer?.members?.length)
+      }
     }
   })
   readonly chartOptions = signal({
@@ -180,35 +270,47 @@ export class StoryExplorerComponent {
       show: true
     }
   })
+  readonly chartTitle = computed(() => {
+    let title = ''
+    title += this.columns().map((column) => {
+      const property = getEntityProperty(this.entityType(), column)
+      return property?.caption
+    }).filter(nonBlank).join(` ${this.i18n()?.And ?? 'and'} `)
+    
+    const by = this.rows().map((row) => {
+      const property = getEntityLevel(this.entityType(), row)
+      return property?.caption
+    }).filter(nonBlank).join(` ${this.i18n()?.And ?? 'and'} `)
+
+    if (by) {
+      title += ` ${this.i18n()?.By ?? 'by'} (${by})`
+    }
+    return title
+  })
+  
   readonly dataSettingsGrid = computed(() => {
     const analytics = {
       ...(this.data?.analytics ?? {}),
       rows: this.rows(),
-      columns: [
-        ...this.columns(),
-        ...this.measures().map((measure) => ({
-          dimension: C_MEASURES,
-          measure,
-          formatting: {
-            shortNumber: true
-          }
-        }))
-      ]
+      columns: [...this.columns()]
     }
-    console.log('analytics:', analytics)
+
+    console.log(`Explorer analytics:`, analytics)
+
     return {
       ...(this.data?.dataSettings ?? {}),
-      analytics
-    }
-  })
-
-  readonly _slicers = computed(() => {
-    return Object.values(this.slicers()).map((slicer) => slicer)
+      analytics,
+      selectionVariant: {
+        selectOptions: Object.values(this.slicers())
+          .map((slicer) => slicer)
+          .filter(nonNullable)
+          .filter((slicer) => slicer?.members?.length)
+      }
+    } as DataSettings
   })
 
   readonly rows = signal<Dimension[]>([])
-  readonly columns = signal<Dimension[]>([])
-  readonly measures = signal<string[]>([])
+  readonly columns = signal<(Dimension | Measure)[]>([])
   readonly slicers = signal<{ [name: string]: ISlicer }>({})
   readonly component = signal({
     label: NxChartType.Bar,
@@ -222,31 +324,118 @@ export class StoryExplorerComponent {
         dimensions: [{}],
         measures: [{}]
       }
-    }
+    } as DataSettings
+  })
+  readonly chartType = computed(() => {
+    return this.component()?.dataSettings?.chartAnnotation?.chartType
   })
 
+  get chartTypeChartOptions() {
+    return this.component()?.dataSettings?.chartAnnotation?.chartType?.chartOptions
+  }
+  set chartTypeChartOptions(value) {
+    this.component.set({
+      ...this.component(),
+      dataSettings: {
+        ...this.component().dataSettings,
+        chartAnnotation: {
+          ...this.component().dataSettings.chartAnnotation,
+          chartType: {
+            ...this.component().dataSettings.chartAnnotation.chartType,
+            chartOptions: value
+          }
+        }
+      }
+    })
+  }
+
   view: 'table' | 'chart' = 'table'
   visualPanel: 'visual' | 'options' = 'visual'
   charts = CHARTS.map((item) => cloneDeep(item) as any)
 
+  get chartSettings() {
+    return this._chartSettings()
+  }
+  set chartSettings(value) {
+    this._chartSettings.set(value)
+  }
+  private _chartSettings = signal<{ chartSettings?: any; chartOptions?: any }>({})
+
+  get gridSettings() {
+    return this._gridSettings()
+  }
+  set gridSettings(value) {
+    this._gridSettings.set(value)
+  }
+  private _gridSettings = signal<{ options?: any }>({options: {
+    showToolbar: true,
+    paging: true,
+    pageSize: 20,
+    sticky: true,
+    sortable: true
+  }})
+
+  readonly dimensionCapacities = computed(() => {
+    if (this.component().component === WidgetComponentType.AnalyticalCard) {
+      return [
+        PropertyCapacity.Dimension,
+        PropertyCapacity.Order,
+        PropertyCapacity.DimensionChart
+      ]
+    } else {
+      return [
+        PropertyCapacity.Dimension,
+        PropertyCapacity.Order,
+      ]
+    }
+  })
+  readonly measureCapacities = computed(() => {
+    if (this.component().component === WidgetComponentType.AnalyticalCard) {
+      return [
+        PropertyCapacity.Measure,
+        PropertyCapacity.Order,
+        PropertyCapacity.MeasureAttributes,
+        PropertyCapacity.MeasureStyle,
+        PropertyCapacity.MeasureStyleRole,
+        PropertyCapacity.MeasureStyleShape,
+        PropertyCapacity.MeasureStylePalette,
+        PropertyCapacity.MeasureStylePalettePattern,
+        PropertyCapacity.MeasureStyleReferenceLine,
+        PropertyCapacity.MeasureStyleChartOptions
+      ]
+    } else {
+      return [
+        PropertyCapacity.Measure,
+        PropertyCapacity.Order,
+        PropertyCapacity.MeasureAttributes,
+        PropertyCapacity.MeasureStylePalette,
+        PropertyCapacity.MeasureStyleGridBar
+      ]
+    }
+  })
+
+  explains = signal<any[]>([])
+
   constructor() {
     effect(
       () => {
         if (this.entityType()) {
-          this.dimensions.set(
-            getEntityDimensions(this.entityType()).filter(({name}) => this._dimensions().includes(name)) .map(({ name, caption, hierarchies }) => ({
+          this.dimensions.set(this._dimensions().map((d) => {
+            const property = getEntityProperty(this.entityType(), d)
+            return {
               dimension: {
-                dimension: name,
+                dimension: d.dimension,
+                hierarchy: d.hierarchy,
                 displayBehaviour: DisplayBehaviour.descriptionOnly
               },
-              caption,
-              hierarchies: hierarchies.map((hierarchy) => ({
-                dimension: name,
+              caption: property.caption,
+              hierarchies: property.hierarchies.map((hierarchy) => ({
+                dimension: d.dimension,
                 hierarchy: hierarchy.name,
                 caption: hierarchy.caption
               }))
-            }))
-          )
+            }
+          }))
         }
       },
       { allowSignalWrites: true }
@@ -260,27 +449,37 @@ export class StoryExplorerComponent {
   trackByDim(index, item) {
     return item?.dimension?.dimension
   }
+
   trackByIndex(index, item) {
     return index
   }
 
-  toggleHierarchy(hierarchy: string, { dimension }) {
-    const index = this.dimensions().findIndex((d) => d.dimension.dimension === dimension.dimension)
-    this.dimensions.set([
-      ...this.dimensions().slice(0, index),
-      {
-        ...this.dimensions()[index],
-        dimension: {
-          ...this.dimensions()[index].dimension,
-          hierarchy: hierarchy
-        }
-      },
-      ...this.dimensions().slice(index + 1)
-    ])
+  setHierarchy(dimension: string, hierarchy: string | null) {
+    const dimensions = [...this.dimensions()]
+    const index = dimensions.findIndex((d) => d.dimension.dimension === dimension)
+    dimensions[index] = {
+      ...dimensions[index],
+      dimension: {
+        ...dimensions[index].dimension,
+        hierarchy
+      }
+    }
+    // Update dimensions
+    this.dimensions.set(dimensions)
+  }
+
+  toggleHierarchy(dimension: string, hierarchy: string | null) {
+    // Clear slicers for the dimension
+    this.slicers.set({
+      ...this.slicers(),
+      [dimension]: {}
+    })
+
+    this.setHierarchy(dimension, hierarchy)
   }
 
   dropRowPredicate(item: CdkDrag<Dimension>) {
-    return item.dropContainer.id === 'ngm-story-explorer__drop-list-dimensions-container'
+    return item.dropContainer.id === 'ngm-story-explorer__drop-list-dimensions'
   }
 
   dropRow(event: CdkDragDrop<Dimension[]>) {
@@ -288,7 +487,11 @@ export class StoryExplorerComponent {
     if (event.previousContainer === event.container) {
       moveItemInArray(items, event.previousIndex, event.currentIndex)
     } else {
-      items.splice(event.currentIndex, 0, { ...event.item.data.dimension })
+      items.splice(
+        event.currentIndex,
+        0,
+        isString(event.item.data.dimension) ? { ...event.item.data } : { ...event.item.data.dimension }
+      )
     }
     this.rows.set(items)
   }
@@ -303,12 +506,16 @@ export class StoryExplorerComponent {
     return item.dropContainer.id === 'ngm-story-explorer__drop-list-measures'
   }
 
-  dropColumn(event: CdkDragDrop<Dimension[]>) {
+  dropColumn(event: CdkDragDrop<(Dimension | Measure)[]>) {
     const items = [...this.columns()]
     if (event.previousContainer === event.container) {
       moveItemInArray(items, event.previousIndex, event.currentIndex)
     } else {
-      items.splice(event.currentIndex, 0, { ...event.item.data })
+      items.splice(event.currentIndex, 0, {
+        dimension: C_MEASURES,
+        measure: event.item.data.name,
+        caption: event.item.data.caption
+      })
     }
     this.columns.set(items)
   }
@@ -327,11 +534,8 @@ export class StoryExplorerComponent {
     this.columns.set([...this.columns().slice(0, i), row, ...this.columns().slice(i + 1)])
   }
 
-  onMeasuresChange(measures: string[]) {
-    this.measures.set(measures)
-  }
-
   onSlicersChange(slicer: ISlicer, dimension: string) {
+    // Set slicer for the dimension
     this.slicers.set({
       ...this.slicers(),
       [dimension]: slicer
@@ -339,8 +543,10 @@ export class StoryExplorerComponent {
   }
 
   createWidget(widget: any) {
-    console.log(widget)
     this.component.set(widget)
+    if (this.component().component === WidgetComponentType.AnalyticalCard) {
+      this.view = 'chart'
+    }
   }
 
   addDimensionToCache(event) {
@@ -348,12 +554,32 @@ export class StoryExplorerComponent {
   }
 
   openDimensions() {
-    this._dimensionsCache.set([...this._dimensions()])
+    this._dimensionsCache.set(this._dimensions().map((d) => d.dimension))
     this.dialogRef = this._dialog.open(this.addDimensionsTempl)
   }
 
   addDimensions() {
-    this._dimensions.set([...this._dimensionsCache()])
+    // Add new dimensions
+    this._dimensionsCache().forEach((dimension) => {
+      const index = this._dimensions().findIndex((d) => d.dimension === dimension)
+      if (index === -1) {
+        this._dimensions.set([
+          ...this._dimensions(),
+          {
+            dimension,
+            hierarchy: null
+          }
+        ])
+      }
+    })
+    // Remove dimensions
+    this._dimensions().forEach((dimension) => {
+      const index = this._dimensionsCache().findIndex((d) => d === dimension.dimension)
+      if (index === -1) {
+        this._dimensions.set(this._dimensions().filter((d) => d.dimension !== dimension.dimension))
+        this.slicers.set(omit(this.slicers(), dimension.dimension))
+      }
+    })
     this.dialogRef.close()
   }
 
@@ -362,6 +588,31 @@ export class StoryExplorerComponent {
     if (event.previousContainer === event.container) {
       moveItemInArray(items, event.previousIndex, event.currentIndex)
       this.dimensions.set(items)
-    } 
+    }
+  }
+
+  setExplains(explains) {
+    this.explains.set(explains)
+  }
+
+  async openExplain() {
+    await firstValueFrom(this._dialog.open(ExplainComponent, {
+      data: [...(this.explains() ?? []), {slicers: this.slicers()}]}
+    ).afterClosed())
+  }
+
+  close() {
+    if (this.component().component === WidgetComponentType.AnalyticalCard) {
+      this.closed.emit({
+        dataSettings: this.dataSettingsChart(),
+        chartSettings: this.chartSettings?.chartSettings,
+        chartOptions: this.chartSettings?.chartOptions,
+      })
+    } else {
+      this.closed.emit({
+        dataSettings:this.dataSettingsGrid(),
+        options: this.gridSettings?.options,
+      })
+    }
   }
 }
diff --git a/libs/story-angular/src/lib/explorer/types.ts b/libs/story-angular/src/lib/explorer/types.ts
index f2ffedc2d..123870192 100644
--- a/libs/story-angular/src/lib/explorer/types.ts
+++ b/libs/story-angular/src/lib/explorer/types.ts
@@ -39,7 +39,8 @@ export const CHARTS: ChartGroup[] = [
         value: {
           chartType: {
             type: NxChartType.Bar,
-            orient: ChartOrient.vertical
+            orient: ChartOrient.vertical,
+            variant: 'stacked'
           },
           dimensions: [
             {},
@@ -56,7 +57,8 @@ export const CHARTS: ChartGroup[] = [
         value: {
           chartType: {
             type: NxChartType.Bar,
-            orient: ChartOrient.horizontal
+            orient: ChartOrient.horizontal,
+            variant: 'stacked'
           },
           dimensions: [
             {},
@@ -109,6 +111,25 @@ export const CHARTS: ChartGroup[] = [
         },
         icon: 'bar-polar-bg.svg'
       },
+      {
+        label: NxChartType.ColumnPolar,
+        value: {
+          chartType: {
+            type: NxChartType.Bar,
+            orient: ChartOrient.vertical,
+            variant: 'polar',
+            chartOptions: {
+              seriesStyle: {
+                colorBy: 'data',
+                roundCap: true
+              }
+            }
+          },
+          dimensions: [{}],
+          measures: [{}]
+        },
+        icon: 'column-polar-stacked.jpg'
+      },
       {
         label: NxChartType.Histogram,
         value: {
@@ -511,6 +532,20 @@ export const CHARTS: ChartGroup[] = [
           dimensions: [],
           measures: [{}, {}, {}]
         }
+      },
+      {
+        label: NxChartType.Radar,
+        icon: 'radar.jpg',
+        value: {
+          chartType: {
+            type: NxChartType.Radar,
+            chartOptions: {
+              seriesStyle: {}
+            }
+          },
+          dimensions: [{}],
+          measures: [{}]
+        }
       }
     ]
   },
@@ -606,12 +641,22 @@ export const CHARTS: ChartGroup[] = [
   }
 ]
 
+/**
+ * Find Chart Type by type/variant/orient
+ * @param chartType 
+ * @returns 
+ */
 export function getChartType(chartType: ChartType) {
   for(const group of CHARTS) {
     for(const chart of group.charts) {
-      if(chart.value.chartType.type === chartType?.type) {
+      if(chart.value.chartType.type === chartType?.type &&
+        (chartType?.variant ? chart.value.chartType.variant === chartType?.variant : true) &&
+        (chartType?.orient ? chart.value.chartType.orient === chartType?.orient : true)
+        ) {
         return chart
       }
     }
   }
-}
\ No newline at end of file
+
+  throw new Error(`Chart Type ${chartType?.type}/${chartType?.orient}/${chartType?.variant} not found`)
+}
diff --git a/libs/story-angular/src/lib/settings/preferences/schema.ts b/libs/story-angular/src/lib/settings/preferences/schema.ts
index be731cff1..34a63ccbd 100644
--- a/libs/story-angular/src/lib/settings/preferences/schema.ts
+++ b/libs/story-angular/src/lib/settings/preferences/schema.ts
@@ -19,30 +19,26 @@ export function PreferencesSchema(Story: any) {
 
   return [
     {
-      wrappers: ['expansion'],
+      wrappers: ['accordion'],
       props: {
-        label: Story?.Widgets?.Common?.StoryStyling ?? 'Story Styling',
-        expanded: false
+        elevationZ: true
       },
       fieldGroup: [
         {
           key: 'storyStyling',
           type: 'styling',
-          props: {}
-        }
-      ]
-    },
-    {
-      wrappers: ['expansion'],
-      props: {
-        label: Story?.Preferences?.PageStyles ?? 'Page Styles',
-        expanded: false
-      },
-      fieldGroup: [
+          props: {
+            label: Story?.Widgets?.Common?.StoryStyling ?? 'Story Styling',
+            expanded: false
+          }
+        },
         {
           key: 'pageStyling',
           type: 'styling',
-          props: {}
+          props: {
+            label: Story?.Preferences?.PageStyles ?? 'Page Styles',
+            expanded: false
+          }
         }
       ]
     },
diff --git a/libs/story-angular/src/lib/settings/schemas/flex-layout.schema.ts b/libs/story-angular/src/lib/settings/schemas/flex-layout.schema.ts
index 2fe4530e1..bb375f41b 100644
--- a/libs/story-angular/src/lib/settings/schemas/flex-layout.schema.ts
+++ b/libs/story-angular/src/lib/settings/schemas/flex-layout.schema.ts
@@ -8,7 +8,7 @@ export class FlexLayoutSchemaService extends BaseDesignerSchemaService<BaseSchem
   getSchema() {
     return of([
       {
-        wrappers: ['expansion'],
+        wrappers: ['accordion'],
         templateOptions: {
           label: '响应页面',
           expanded: true
diff --git a/libs/story-angular/src/lib/settings/schemas/story-point-builder.schema.ts b/libs/story-angular/src/lib/settings/schemas/story-point-builder.schema.ts
index e4f149ab3..b5048fdc6 100644
--- a/libs/story-angular/src/lib/settings/schemas/story-point-builder.schema.ts
+++ b/libs/story-angular/src/lib/settings/schemas/story-point-builder.schema.ts
@@ -1,6 +1,6 @@
 import { Injectable, Injector } from '@angular/core'
 import { StoryPoint } from '@metad/story/core'
-import { BaseDesignerSchemaService, SchemaState } from '@metad/story/designer'
+import { BaseDesignerSchemaService, FORMLY_ROW, FORMLY_W_1_2, SchemaState } from '@metad/story/designer'
 import { map } from 'rxjs/operators'
 import { gridsterOptions } from './types'
 
@@ -25,17 +25,21 @@ export class StoryPointBuilderSchema extends BaseDesignerSchemaService<StoryPoin
   }
 
   getGridOptions(I18NGridOptions) {
-    const className = 'ngm-formly__col ngm-formly__col-6'
+    const className = FORMLY_W_1_2
     return {
-      key: 'gridOptions',
-      wrappers: ['expansion'],
+      wrappers: ['accordion'],
       props: {
-        label: I18NGridOptions?.TITLE ?? 'Grid Layout',
-        expanded: true
+        expandedMulti: true,
+        elevationZ: true,
       },
       fieldGroup: [
         {
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
+          key: 'gridOptions',
+          props: {
+            label: I18NGridOptions?.TITLE ?? 'Grid Layout',
+            expanded: true
+          },
           fieldGroup: gridsterOptions(className, I18NGridOptions)
         }
       ]
diff --git a/libs/story-angular/src/lib/settings/schemas/story-point-style.schema.ts b/libs/story-angular/src/lib/settings/schemas/story-point-style.schema.ts
index 7eab3e319..121824711 100644
--- a/libs/story-angular/src/lib/settings/schemas/story-point-style.schema.ts
+++ b/libs/story-angular/src/lib/settings/schemas/story-point-style.schema.ts
@@ -11,7 +11,7 @@ export class StoryPointStylingSchema extends BaseDesignerSchemaService<BaseSchem
         return [
           {
             key: 'canvas',
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
               label: DESIGNER?.STYLING?.CANVAS?.TITLE ?? 'Canvas'
             },
@@ -19,7 +19,7 @@ export class StoryPointStylingSchema extends BaseDesignerSchemaService<BaseSchem
             fieldGroup: StylingCssSchema(FORMLY_W_1_2, DESIGNER)
           },
           {
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
               label: DESIGNER?.STYLING?.STORY_PAGE?.DefaultBackground ?? 'Default Background'
             },
@@ -35,7 +35,7 @@ export class StoryPointStylingSchema extends BaseDesignerSchemaService<BaseSchem
           },
           {
             key: 'pageSize',
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
               label: DESIGNER?.STYLING?.STORY_PAGE?.PAGE_SIZE ?? 'Page Size'
             },
diff --git a/libs/story-angular/src/lib/settings/schemas/widget-styling.schema.ts b/libs/story-angular/src/lib/settings/schemas/widget-styling.schema.ts
index cda80de29..2f90c585a 100644
--- a/libs/story-angular/src/lib/settings/schemas/widget-styling.schema.ts
+++ b/libs/story-angular/src/lib/settings/schemas/widget-styling.schema.ts
@@ -1,6 +1,12 @@
 import { Injectable } from '@angular/core'
 import { StoryWidget } from '@metad/story/core'
-import { Appearance, BaseDesignerSchemaService, BaseSchemaState, FORMLY_W_FULL } from '@metad/story/designer'
+import {
+  Appearances,
+  BaseDesignerSchemaService,
+  BaseSchemaState,
+  FORMLY_ROW,
+  FORMLY_W_1_2
+} from '@metad/story/designer'
 import { map } from 'rxjs/operators'
 
 @Injectable()
@@ -10,22 +16,32 @@ export class WidgetStylingSchema extends BaseDesignerSchemaService<BaseSchemaSta
       map((DESIGNER) => {
         return [
           {
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
-              label: DESIGNER?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
-              expanded: true
+              expandedMulti: true,
+              elevationZ: true,
             },
             fieldGroup: [
               {
                 key: 'component',
                 type: 'styling',
                 props: {
+                  label: DESIGNER?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
+                  expanded: true,
                 }
+              },
+
+              {
+                key: 'appearance',
+                props: {
+                  label: DESIGNER?.Widgets?.Common?.Appearance ?? 'Appearance',
+                  expanded: true,
+                },
+                fieldGroupClassName: FORMLY_ROW,
+                fieldGroup: Appearances(FORMLY_W_1_2, DESIGNER?.Widgets?.Common)
               }
             ]
-          },
-          Appearance(FORMLY_W_FULL, DESIGNER?.Widgets?.Common)
-          // StylingWidgetSchema(FORMLY_W_1_2, DESIGNER)
+          }
         ]
       })
     )
diff --git a/libs/story-angular/story/public-api.ts b/libs/story-angular/story/public-api.ts
index 541a7d917..4a8f35d0b 100644
--- a/libs/story-angular/story/public-api.ts
+++ b/libs/story-angular/story/public-api.ts
@@ -6,4 +6,5 @@ export * from './story/story.component'
 export * from './shares/shares.component'
 export * from './placeholder/add/add.component'
 export * from './story-point/story-point.component'
-export * from './story-widget/story-widget.component'
\ No newline at end of file
+export * from './story-widget/story-widget.component'
+export * from './explain/explain.component'
\ No newline at end of file
diff --git a/libs/story-angular/story/story-widget/story-widget.component.html b/libs/story-angular/story/story-widget/story-widget.component.html
index ad4eeebc3..3be360610 100644
--- a/libs/story-angular/story/story-widget/story-widget.component.html
+++ b/libs/story-angular/story/story-widget/story-widget.component.html
@@ -102,7 +102,7 @@
       {{ 'Story.Widget.Refresh' | translate: {Default: "Refresh"} }}
     </button>
     <button cdkMenuItem (click)="explore()">
-      <mat-icon fontSet="material-icons-round">explore</mat-icon>
+      <mat-icon fontSet="material-icons-outlined">explore</mat-icon>
       {{ 'Story.Widget.Explore' | translate: {Default: "Explore"} }}
     </button>
 
diff --git a/libs/story-angular/story/story-widget/story-widget.component.ts b/libs/story-angular/story/story-widget/story-widget.component.ts
index eff3ad1d7..d819b5459 100644
--- a/libs/story-angular/story/story-widget/story-widget.component.ts
+++ b/libs/story-angular/story/story-widget/story-widget.component.ts
@@ -205,6 +205,10 @@ export class NxStoryWidgetComponent extends ComponentStore<StoryWidgetState> imp
     filter(Boolean),
     map((type) => this._widgetComponents.find((component) => component.type === type))
   )
+  readonly componentProvider = toSignal(this.component$.pipe(
+    filter(Boolean),
+    map((type) => this._widgetComponents.find((component) => component.type === type))
+  ))
   readonly componentCategory$ = this.componentProvider$.pipe(map((componentProvider) => componentProvider?.category))
   readonly componentClasses$ = this.componentCategory$.pipe(
     map((category) => ({
@@ -809,12 +813,15 @@ export class NxStoryWidgetComponent extends ComponentStore<StoryWidgetState> imp
   }
 
   async explore() {
-    const dataSettings = await firstValueFrom(this.dataSettings$)
-    const queryParams: Params = { explore: btoa(JSON.stringify({
-      dataSettings: dataSettings,
-      chartAnnotation: dataSettings.chartAnnotation,
-      analytics: dataSettings.analytics,
-    })) }
+    // const dataSettings = await firstValueFrom(this.dataSettings$)
+    const fields = this.componentProvider().mapping.filter((field) => field !== 'styling')
+
+    const queryParams: Params = {
+      widgetKey: this.key,
+      explore: btoa(unescape(encodeURIComponent(JSON.stringify({
+        ...pick(this.widget(), ...fields)
+      }))))
+    }
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: queryParams,
diff --git a/libs/story-angular/widgets/analytical-card/analytical-card.schema.ts b/libs/story-angular/widgets/analytical-card/analytical-card.schema.ts
index 9a8a18d22..f89f67b72 100644
--- a/libs/story-angular/widgets/analytical-card/analytical-card.schema.ts
+++ b/libs/story-angular/widgets/analytical-card/analytical-card.schema.ts
@@ -1,29 +1,32 @@
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
+import { PropertyCapacity as FormlyPropertyCapacity, PropertyCapacity } from '@metad/components/property'
+import { ColorPalettes } from '@metad/core'
 import {
   ChartAnnotation,
-  ChartDimensionRoleType,
   ChartOptions,
   ChartSettings,
   ChartType,
   getEntityProperty,
   isIndicatorMeasureProperty,
   isMeasure,
+  omit,
   SelectionPresentationVariant
 } from '@metad/ocap-core'
-import { PropertyCapacity } from '@metad/components/property'
-import { PropertyCapacity as FormlyPropertyCapacity } from '@metad/components/property'
 import {
   AccordionWrappers,
-  BaseDesignerSchemaService,
-  BaseSchemaState,
   DataSettingsSchemaService,
+  DesignerSchema,
+  FORMLY_GAP_2,
+  FORMLY_MY_2,
   FORMLY_ROW,
   FORMLY_W_1_2,
   PresentationVariantExpansion,
   SchemaState,
   SelectionVariantExpansion
 } from '@metad/story/designer'
+import { TranslateService } from '@ngx-translate/core'
 import { isEmpty, isEqual } from 'lodash-es'
+import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs'
 import { distinctUntilChanged, map, withLatestFrom } from 'rxjs/operators'
 import {
   AllCapacity,
@@ -37,8 +40,6 @@ import {
   TooltipCapacity,
   VisualMapCapacity
 } from './schemas'
-import { ColorPalettes } from '@metad/core'
-
 
 export interface AnalyticalCardSchemaState extends SchemaState {
   model: {
@@ -89,34 +90,29 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
 
   getSchema() {
     return this.chartType$.pipe(
-      withLatestFrom(this.translate.stream('STORY_DESIGNER')),
-      map(([type, STORY_DESIGNER]) => {
-        this.STORY_DESIGNER = STORY_DESIGNER
+      withLatestFrom(this.translate.stream('Story')),
+      map(([type, i18nStory]) => {
+        this.STORY_DESIGNER = i18nStory
         const chartType = this.get((state) => state.model?.dataSettings?.chartAnnotation?.chartType)
-        return this.getBuilderSchema(chartType, STORY_DESIGNER)
+        return this.getBuilderSchema(chartType, i18nStory)
       })
     )
   }
 
-  getBuilderSchema(chartType: ChartType, STORY_DESIGNER?) {
-    
-    const BUILDER = STORY_DESIGNER?.BUILDER
+  getBuilderSchema(chartType: ChartType, i18nStory?) {
+    const BUILDER = i18nStory?.Widgets?.Common
 
-    const dataSettings = this.generateDataSettingsSchema(BUILDER)
-    dataSettings.wrappers = ['expansion']
-
-    dataSettings.fieldGroup.splice(
-      2,
-      0,
+    const dataSettings = this.generateDataSettingsSchema(
+      BUILDER,
       {
         key: 'chartAnnotation',
         props: {
           label: 'Chart Annotation',
           required: true,
-          type: 'expansion',
           icon: 'analytics'
         },
-        fieldGroup: this.getChartAnnotationFieldGroup(chartType, BUILDER?.CHART)
+        fieldGroupClassName: FORMLY_GAP_2 + ' ' + FORMLY_MY_2,
+        fieldGroup: this.getChartAnnotationFieldGroup(i18nStory?.Widgets?.CHART)
       } as unknown,
       ...SelectionVariantExpansion(BUILDER, this.dataSettings$),
       ...PresentationVariantExpansion(BUILDER, this.dataSettings$, this.entityType$, this.properties$)
@@ -133,72 +129,23 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
             key: 'title',
             type: 'input',
             props: {
-              label: BUILDER?.COMMON?.Title ?? 'Title',
+              label: BUILDER?.Title ?? 'Title',
               required: true
             }
           }
         ]
       },
-      dataSettings,
-      {
-        key: 'options',
-        wrappers: ['expansion'],
-        props: {
-          label: BUILDER?.CHART?.Options ?? 'Options'
-        },
-        fieldGroup: [
-          {
-            fieldGroupClassName: FORMLY_ROW,
-            fieldGroup: [
-              {
-                className: FORMLY_W_1_2,
-                key: 'hideHeader',
-                type: 'checkbox',
-                props: {
-                  label: BUILDER?.CHART?.HideHeader ?? 'Hide Header'
-                }
-              },
-              {
-                className: FORMLY_W_1_2,
-                key: 'hideDataDownload',
-                type: 'checkbox',
-                props: {
-                  label: BUILDER?.CHART?.HideDataDownload ?? 'Hide Data Download'
-                }
-              },
-              {
-                className: FORMLY_W_1_2,
-                key: 'hideScreenshot',
-                type: 'checkbox',
-                props: {
-                  label: BUILDER?.CHART?.HideScreenshot ?? 'Hide Screenshot'
-                }
-              },
-              {
-                className: FORMLY_W_1_2,
-                key: 'realtimeLinked',
-                type: 'checkbox',
-                props: {
-                  label: BUILDER?.CHART?.RealTimeLinkedAnalysis ?? 'Real Time Linked Analysis'
-                }
-              },
-              {
-                className: FORMLY_W_1_2,
-                key: 'disableContextMenu',
-                type: 'checkbox',
-                props: {
-                  label: BUILDER?.CHART?.DisableContextMenu ?? 'Disable Context Menu'
-                }
-              },
-              
-            ]
-          }
-        ]
-      },
       ...AccordionWrappers([
         {
-          key: 'chartSettings',
-          label: BUILDER?.CHART?.ChartSettings ?? 'Chart Settings',
+          key: 'dataSettings',
+          label: i18nStory?.Widgets?.Common?.DATA_SETTINGS ?? 'Data Settings',
+          toggleable: false,
+          expanded: true,
+          fieldGroup: dataSettings.fieldGroup[0].fieldGroup
+        },
+        {
+          key: 'options',
+          label: i18nStory?.Widgets?.CHART?.Options ?? 'Options',
           toggleable: false,
           fieldGroup: [
             {
@@ -206,92 +153,66 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
               fieldGroup: [
                 {
                   className: FORMLY_W_1_2,
-                  key: 'maximumLimit',
-                  type: 'input',
+                  key: 'hideHeader',
+                  type: 'checkbox',
+                  props: {
+                    label: i18nStory?.Widgets?.CHART?.HideHeader ?? 'Hide Header'
+                  }
+                },
+                {
+                  className: FORMLY_W_1_2,
+                  key: 'hideDataDownload',
+                  type: 'checkbox',
                   props: {
-                    label: BUILDER?.CHART?.MaximumLimit ?? 'Maximum Limit',
-                    type: 'number'
+                    label: i18nStory?.Widgets?.CHART?.HideDataDownload ?? 'Hide Data Download'
                   }
                 },
                 {
                   className: FORMLY_W_1_2,
-                  key: 'digitInfo',
-                  type: 'input',
+                  key: 'hideScreenshot',
+                  type: 'checkbox',
                   props: {
-                    label: BUILDER?.CHART?.DigitInfo ?? 'Digit Info'
+                    label: i18nStory?.Widgets?.CHART?.HideScreenshot ?? 'Hide Screenshot'
                   }
                 },
                 {
                   className: FORMLY_W_1_2,
-                  key: 'trellisHorizontal',
-                  type: 'slider',
+                  key: 'realtimeLinked',
+                  type: 'checkbox',
                   props: {
-                    label: BUILDER?.CHART?.TrellisHorizontal ?? 'Trellis Horizontal',
-                    type: 'number',
-                    thumbLabel: true,
-                    autoScale: true,
-                    min: 1,
-                    max: 10
+                    label: i18nStory?.Widgets?.CHART?.RealTimeLinkedAnalysis ?? 'Real Time Linked Analysis'
                   }
                 },
                 {
                   className: FORMLY_W_1_2,
-                  key: 'universalTransition',
+                  key: 'disableContextMenu',
                   type: 'checkbox',
                   props: {
-                    label: BUILDER?.CHART?.UniversalTransition ?? 'Universal Transition'
+                    label: i18nStory?.Widgets?.CHART?.DisableContextMenu ?? 'Disable Context Menu'
                   }
                 }
               ]
-            },
-            {
-              key: 'chartTypes',
-              type: 'array',
-              props: {
-                label: BUILDER?.CHART?.ChartVariants ?? 'Chart Variants',
-                hideDelete: true,
-                sortable: true
-              },
-              fieldArray: {
-                type: 'chart-type',
-                props: {
-                  removable: true
-                }
-              }
-            },
-
-            // {
-            //   key: 'customLogic',
-            //   type: 'code-editor',
-            //   props: {
-            //     label: BUILDER?.CHART?.CustomLogic ?? 'Custom Logic',
-            //     language: 'javascript'
-            //   },
-            //   expressions: {
-            //     hide: (field: FormlyFieldConfig) => {
-            //       return (
-            //         field.parent.parent.model?.dataSettings?.chartAnnotation?.chartType?.type !== NxChartType.Custom
-            //       )
-            //     }
-            //   }
-            // }
+            }
           ]
+        },
+        {
+          key: 'chartSettings',
+          label: i18nStory?.Widgets?.CHART?.ChartSettings ?? 'Chart Settings',
+          toggleable: false,
+          fieldGroup: chartSettingsFieldGroup(i18nStory?.Widgets)
         }
       ]),
 
-      getChartOptionsSchema(chartType, STORY_DESIGNER?.STYLING?.ECHARTS)
+      getChartOptionsSchema(chartType, i18nStory?.STYLING?.ECHARTS)
     ]
   }
 
-  getChartAnnotationFieldGroup(chartType, CHART?) {
-    const results = [
+  getChartAnnotationFieldGroup(CHART?) {
+    return [
       {
         key: 'chartType',
         type: 'chart-type'
-      }
-    ] as any
-
-    results.push(
+      },
       {
         key: 'measures',
         type: 'array',
@@ -301,7 +222,7 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
           sortable: true
         },
         fieldArray: {
-          type: 'property-select',
+          type: 'chart-property',
           props: {
             required: true,
             removable: true,
@@ -322,9 +243,7 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
               FormlyPropertyCapacity.MeasureStyleReferenceLine,
               FormlyPropertyCapacity.MeasureStyleChartOptions
             ],
-            colors: [
-              ...ColorPalettes
-            ]
+            colors: [...ColorPalettes]
           }
         }
       },
@@ -336,7 +255,7 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
           hideDelete: true
         },
         fieldArray: {
-          type: 'property-select',
+          type: 'chart-property',
           props: {
             required: true,
             removable: true,
@@ -344,34 +263,42 @@ export class AnalyticalCardSchemaService extends DataSettingsSchemaService<Analy
             dataSettings: this.dataSettings$,
             entityType: this.entityType$,
             restrictedDimensions: this.restrictedDimensions$,
-            capacities: [
-              PropertyCapacity.Dimension,
-              PropertyCapacity.Order,
-              FormlyPropertyCapacity.DimensionChart
-            ]
+            capacities: [PropertyCapacity.Dimension, PropertyCapacity.Order, FormlyPropertyCapacity.DimensionChart]
           }
         }
       }
-    )
-
-    return results
+    ]
   }
-
 }
 
 @Injectable()
-export class MeasureChartOptionsSchemaService extends BaseDesignerSchemaService<BaseSchemaState> {
-  public readonly storyDesigner$ = this.translate.stream('STORY_DESIGNER')
+export class MeasureChartOptionsSchemaService implements DesignerSchema<ChartOptions> {
+  protected translate = inject(TranslateService)
+  get model() {
+    return this.model$.value
+  }
+  set model(value) {
+    this.model$.next(value)
+  }
+  private readonly model$ = new BehaviorSubject<ChartOptions>(null)
+
+  get chartType() {
+    return this.chartType$.value
+  }
+  set chartType(value) {
+    this.chartType$.next(value)
+  }
+  private readonly chartType$ = new BehaviorSubject<ChartType>(null)
 
-  public readonly chartType$ = this.model$.pipe(map((model) => model.chartType))
+  public readonly storyDesigner$ = this.translate.stream('Story')
+
+  getTitle(): Observable<string> {
+    return of(`Chart measure options`)
+  }
 
   getSchema() {
-    return this.storyDesigner$.pipe(
-      map((STORY_DESIGNER) => STORY_DESIGNER?.STYLING?.ECHARTS),
-      map((ECHARTS) => {
-        const chartType = this.get((state) => state.model.chartType)
-        return [{ key: 'chartType', type: 'empty' }, this.getChartOptions(chartType, ECHARTS)]
-      })
+    return combineLatest([this.storyDesigner$.pipe(map((i18n) => i18n?.STYLING?.ECHARTS)), this.chartType$]).pipe(
+      map(([ECHARTS, chartType]) => this.getChartOptions(chartType, ECHARTS).fieldGroup)
     )
   }
 
@@ -414,107 +341,203 @@ export class MeasureChartOptionsSchemaService extends BaseDesignerSchemaService<
 }
 
 @Injectable()
-export class DimensionChartOptionsSchemaService extends BaseDesignerSchemaService<BaseSchemaState> {
-  public readonly storyDesigner$ = this.translate.stream('STORY_DESIGNER')
+export class DimensionChartOptionsSchemaService implements DesignerSchema<ChartOptions> {
+  protected translate = inject(TranslateService)
+  get model() {
+    return this.model$.value
+  }
+  set model(value) {
+    this.model$.next(value)
+  }
+  private readonly model$ = new BehaviorSubject<ChartOptions>(null)
+
+  getTitle(): Observable<string> {
+    return of(`Chart dimension options`)
+  }
 
   public readonly role$ = this.model$.pipe(map((model) => model.role))
+  public readonly storyDesigner$ = this.translate.stream('Story')
 
   getSchema() {
     return this.storyDesigner$.pipe(
       map((STORY_DESIGNER) => STORY_DESIGNER?.STYLING?.ECHARTS),
-      map((ECHARTS) => {
-        const role = this.get((state) => state.model.role)
-        return [{ key: 'role', type: 'empty' }, this.getChartOptions(role, ECHARTS)]
+      map((I18N) => {
+        const className = FORMLY_W_1_2
+        const role = this.model?.role
+        return [
+          ...AccordionWrappers([
+            {
+              key: 'axis',
+              label: I18N?.CATEGORY_AXIS?.TITLE ?? 'Axis',
+              fieldGroup: CategoryAxis(className, I18N)
+            },
+            {
+              key: 'dataZoom',
+              label: I18N?.DATAZOOM_STYLE?.DATAZOOM ?? 'Data Zoom',
+              fieldGroup: [
+                {
+                  fieldGroupClassName: FORMLY_ROW,
+                  fieldGroup: DataZoomAttributes(className, I18N)
+                }
+              ]
+            }
+          ])
+        ]
       })
     )
   }
+}
 
-  getChartOptions(role: ChartDimensionRoleType, I18N) {
-    const className = FORMLY_W_1_2
-    const chartOptions: any = {
-      key: 'chartOptions',
-      props: {},
-      fieldGroup: []
-    }
-    chartOptions.fieldGroup = [
-      ...AccordionWrappers([
-        {
-          key: 'axis',
-          label: I18N?.CATEGORY_AXIS?.TITLE ?? 'Axis',
-          fieldGroup: CategoryAxis(className, I18N)
-        },
-        {
-          key: 'dataZoom',
-          label: I18N?.DATAZOOM_STYLE?.DATAZOOM ?? 'Data Zoom',
-          fieldGroup: [
-            {
-              fieldGroupClassName: FORMLY_ROW,
-              fieldGroup: DataZoomAttributes(className, I18N)
-            }
-          ]
-        }
-      ]),
-    ]
+@Injectable()
+export class ChartOptionsSchemaService implements DesignerSchema<ChartOptions> {
+  protected translate = inject(TranslateService)
 
-    return chartOptions
+  get model() {
+    return this.model$.value
   }
-}
+  set model(value) {
+    this.model$.next(value)
+  }
+  private readonly model$ = new BehaviorSubject<ChartOptions>(null)
 
-@Injectable()
-export class ChartOptionsSchemaService extends BaseDesignerSchemaService<BaseSchemaState> {
+  get chartType() {
+    return this.chartType$.value
+  }
+  set chartType(value) {
+    this.chartType$.next(value)
+  }
+  private readonly chartType$ = new BehaviorSubject<ChartType>(null)
 
-  public readonly storyDesigner$ = this.translate.stream('STORY_DESIGNER')
+  public readonly storyDesigner$ = this.translate.stream('Story')
 
-  getSchema() {
-    return this.storyDesigner$.pipe(
-      map((STORY_DESIGNER) => STORY_DESIGNER?.STYLING?.ECHARTS),
-      map((ECHARTS) => {
-        const chartType = this.get((state) => state.model)
+  getTitle(): Observable<string> {
+    return of(`Chart options`)
+  }
 
-        return [
-          getChartOptionsSchema(chartType, ECHARTS)
-        ] as any
-      })
+  getSchema() {
+    return combineLatest([this.storyDesigner$.pipe(map((i18n) => i18n?.STYLING?.ECHARTS)),
+      this.chartType$.pipe(map((chartType) => omit(chartType, 'chartOptions')), distinctUntilChanged(isEqual))
+    ]).pipe(
+      map(([ECHARTS, chartType]) => getChartOptionsSchema(chartType, ECHARTS).fieldGroup)
     )
   }
 }
 
 export function getChartOptionsSchema(chartType: ChartType, I18N) {
-    const className = FORMLY_W_1_2
-    const chartOptions: any = {
-      key: 'chartOptions',
-      fieldGroup: [...GlobalCapacity(className, I18N)]
-    }
+  const className = FORMLY_W_1_2
+  const chartOptions: any = {
+    key: 'chartOptions',
+    fieldGroup: [...GlobalCapacity(className, I18N)]
+  }
 
-    if (!chartType) {
-      return chartOptions
-    }
+  if (!chartType) {
+    return chartOptions
+  }
 
-    let capacityMatrix
-    const capacityName = chartType.type + (chartType.variant ?? '')
-    if (CapacityMatrix[capacityName]) {
-      capacityMatrix = CapacityMatrix[capacityName]
-    } else if (CapacityMatrix[chartType.type]) {
-      capacityMatrix = CapacityMatrix[chartType.type]
+  let capacityMatrix
+  const capacityName = chartType.type + (chartType.variant ?? '')
+  if (CapacityMatrix[capacityName]) {
+    capacityMatrix = CapacityMatrix[capacityName]
+  } else if (CapacityMatrix[chartType.type]) {
+    capacityMatrix = CapacityMatrix[chartType.type]
+  }
+
+  capacityMatrix?.forEach((capacity) => {
+    const fieldGroup = capacity(FORMLY_W_1_2, I18N)
+    if (Array.isArray(fieldGroup)) {
+      chartOptions.fieldGroup.push(...fieldGroup)
+    } else {
+      chartOptions.fieldGroup.push(fieldGroup)
     }
+  })
+
+  AllCapacity.forEach((capacity) => {
+    const fieldGroup = capacity(FORMLY_W_1_2, I18N)
+    if (Array.isArray(fieldGroup)) {
+      chartOptions.fieldGroup.push(...fieldGroup)
+    } else {
+      chartOptions.fieldGroup.push(fieldGroup)
+    }
+  })
 
-    capacityMatrix?.forEach((capacity) => {
-      const fieldGroup = capacity(FORMLY_W_1_2, I18N)
-      if (Array.isArray(fieldGroup)) {
-        chartOptions.fieldGroup.push(...fieldGroup)
-      } else {
-        chartOptions.fieldGroup.push(fieldGroup)
-      }
-    })
+  return chartOptions
+}
 
-    AllCapacity.forEach((capacity) => {
-      const fieldGroup = capacity(FORMLY_W_1_2, I18N)
-      if (Array.isArray(fieldGroup)) {
-        chartOptions.fieldGroup.push(...fieldGroup)
-      } else {
-        chartOptions.fieldGroup.push(fieldGroup)
+export function chartSettingsFieldGroup(i18n) {
+  return [
+    {
+      fieldGroupClassName: FORMLY_ROW,
+      fieldGroup: [
+        {
+          className: FORMLY_W_1_2,
+          key: 'maximumLimit',
+          type: 'input',
+          props: {
+            label: i18n?.CHART?.MaximumLimit ?? 'Maximum Limit',
+            type: 'number'
+          }
+        },
+        {
+          className: FORMLY_W_1_2,
+          key: 'digitInfo',
+          type: 'input',
+          props: {
+            label: i18n?.CHART?.DigitInfo ?? 'Digit Info'
+          }
+        },
+        {
+          className: FORMLY_W_1_2,
+          key: 'trellisHorizontal',
+          type: 'slider',
+          props: {
+            label: i18n?.CHART?.TrellisHorizontal ?? 'Trellis Horizontal',
+            type: 'number',
+            thumbLabel: true,
+            autoScale: true,
+            min: 1,
+            max: 10
+          }
+        },
+        {
+          className: FORMLY_W_1_2,
+          key: 'universalTransition',
+          type: 'checkbox',
+          props: {
+            label: i18n?.CHART?.UniversalTransition ?? 'Universal Transition'
+          }
+        }
+      ]
+    },
+    {
+      key: 'chartTypes',
+      type: 'array',
+      props: {
+        label: i18n?.CHART?.ChartVariants ?? 'Chart Variants',
+        hideDelete: true,
+        sortable: true
+      },
+      fieldArray: {
+        type: 'chart-type',
+        props: {
+          removable: true
+        }
       }
-    })
+    }
 
-    return chartOptions
-}
\ No newline at end of file
+    // {
+    //   key: 'customLogic',
+    //   type: 'code-editor',
+    //   props: {
+    //     label: i18nStory?.Widgets?.CHART?.CustomLogic ?? 'Custom Logic',
+    //     language: 'javascript'
+    //   },
+    //   expressions: {
+    //     hide: (field: FormlyFieldConfig) => {
+    //       return (
+    //         field.parent.parent.model?.dataSettings?.chartAnnotation?.chartType?.type !== NxChartType.Custom
+    //       )
+    //     }
+    //   }
+    // }
+  ]
+}
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/_chart-property.component.scss b/libs/story-angular/widgets/analytical-card/chart-property/_chart-property.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/chart-measure.component.ts b/libs/story-angular/widgets/analytical-card/chart-property/chart-measure.component.ts
new file mode 100644
index 000000000..2db9e6d01
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-property/chart-measure.component.ts
@@ -0,0 +1,79 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, forwardRef, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+import { ChartType } from '@metad/ocap-core'
+import { NgmDesignerFormComponent, NxDesignerModule, STORY_DESIGNER_SCHEMA } from '@metad/story/designer'
+import { TranslateModule } from '@ngx-translate/core'
+import { MeasureChartOptionsSchemaService } from '../analytical-card.schema'
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+
+    NxDesignerModule,
+    NgmDesignerFormComponent
+  ],
+  selector: 'ngm-chart-measure-form',
+  template: `<ngm-designer-form class="w-full" [formControl]="formControl"></ngm-designer-form>`,
+  styles: [
+    `
+      :host {
+        padding: 0;
+      }
+    `
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmChartMeasureComponent)
+    },
+    {
+      provide: STORY_DESIGNER_SCHEMA,
+      useClass: MeasureChartOptionsSchemaService
+    }
+  ]
+})
+export class NgmChartMeasureComponent implements ControlValueAccessor {
+  private readonly schema = inject<MeasureChartOptionsSchemaService>(STORY_DESIGNER_SCHEMA)
+
+  @Input() get chartType(): ChartType {
+    return this.schema.chartType
+  }
+  set chartType(value: ChartType) {
+    this.schema.chartType = value
+  }
+
+  formControl = new FormControl({})
+
+  private valueSub = this.formControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+    this.onChange?.(value)
+  })
+
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formControl.patchValue(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formControl.disable() : this.formControl.enable()
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.html b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.html
new file mode 100644
index 000000000..46a4a55c9
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.html
@@ -0,0 +1,168 @@
+<ngm-property-select class="max-w-full"
+  [formControl]="formControl"
+  [editable]="true"
+  [showAttributes]="true"
+  [dataSettings]="dataSettings"
+  [entityType]="entityType"
+  [restrictedDimensions]="restrictedDimensions$ | async"
+  [coreService]="coreService"
+  [dsCoreService]="dsCoreService"
+  [capacities]="capacities"
+  [syntax]="syntax()"
+  displayDensity="compact"
+  (calculationChange)="onCalculationChange($event)"
+>
+  <div ngmSuffix>
+    <ng-content select="[ngmSuffix]"></ng-content>
+  </div>
+
+  <div class="w-full flex flex-col items-stretch gap-1">
+    <ng-container *ngIf="showChartAttributes && isDimension()">
+      <div class="ngm-chart-property__card">
+        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">category</mat-icon>
+          <span>{{ 'FORMLY.PROPERTY_SELECT.Role' | translate: {Default: 'Role'} }}</span>
+        </label>
+        <mat-radio-group [(ngModel)]="role">
+          <mat-radio-button *ngFor="let role of DIMENSION_ROLES" [value]="role.value">
+            {{ 'FORMLY.PROPERTY_SELECT.' + role.label | translate: {Default: role.label} }}
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <div class="ngm-chart-property__card">
+        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">analytics</mat-icon>
+          <span>{{ 'FORMLY.PROPERTY_SELECT.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
+        </label>
+        <ngm-designer-form class="w-full text-sm" [(ngModel)]="chartOptions"></ngm-designer-form>
+      </div>
+    </ng-container>
+
+    <div *ngIf="showMeasureRole" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">category</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.Role' | translate: {Default: 'Role'} }}</span>
+      </label>
+      <mat-radio-group [(ngModel)]="role">
+        <mat-radio-button *ngFor="let role of MEASURE_ROLES" [value]="role.value">
+          {{ 'FORMLY.PROPERTY_SELECT.' + role.label | translate: {Default: role.label} }}
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div *ngIf="showMeasureShape" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">interests</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.Shape' | translate: {Default: 'Shape'} }}...</span>
+      </label>
+      <mat-radio-group [(ngModel)]="shapeType">
+        <mat-radio-button [value]="null">
+          {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
+        </mat-radio-button>
+        <mat-radio-button *ngFor="let shape of SHAPE_TYPES" [value]="shape.value">
+          {{ 'FORMLY.PROPERTY_SELECT.' + shape.label | translate: {Default: shape.label} }}
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div *ngIf="showMeasurePalettePattern" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">texture</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.Pattern' | translate: {Default: 'Pattern'} }}</span>
+      </label>
+      <mat-radio-group [(ngModel)]="pattern">
+        <mat-radio-button [value]="null">
+          {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
+        </mat-radio-button>
+        <mat-radio-button *ngFor="let item of PATTERNS" [value]="item.value">
+          {{item.label}}
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div *ngIf="showColorPalette" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">style</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.Style' | translate: {Default: 'Style'} }}</span>
+      </label>
+
+      <button mat-flat-button displayDensity="comfortable" class="ngm-chart-property__palette-trigger w-full" [matMenuTriggerFor]="paletteMenu">
+        <div class="w-full flex items-center">
+          <mat-icon fontSet="material-icons-outlined">palette</mat-icon>
+          <span>{{ 'FORMLY.PROPERTY_SELECT.Palette' | translate: {Default: 'Palette'} }}</span>
+          <span class="flex-1"></span>
+          
+          <mat-icon fontSet="material-icons-outlined">arrow_right</mat-icon>
+        </div>
+      </button>
+
+      <div class="flex justify-start items-center">
+        <ngm-colors class="flex-1" [label]=" 'FORMLY.PROPERTY_SELECT.Colors' | translate: {Default: 'Colors'} "
+          [options]="colorPalettes"
+          [(ngModel)]="colors"
+          (ngModelChange)="onColorsChange($event)"
+          (click)="$event.stopPropagation()">
+        </ngm-colors>
+      </div>
+    </div>
+
+    <!-- For analytical grid @todo move to analytical grid module -->
+    <div *ngIf="showMeasureGridBar" class="ngm-chart-property__card">
+      <mat-checkbox [(ngModel)]="bar">
+        <div class="flex-1 flex items-center">
+          <mat-icon class="shrink-0" fontSet="material-icons-outlined">sort</mat-icon>
+          <span>{{ 'FORMLY.PROPERTY_SELECT.BarChart' | translate: {Default: 'Bar Chart'} }}</span>
+        </div>
+      </mat-checkbox>
+    </div>
+    <!-- End -->
+
+    <div *ngIf="showMeasureReferenceLine" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">trending_flat</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.REFERENCE_LINE' | translate: {Default: 'Reference Line'} }}</span>
+      </label>
+
+      <ngm-reference-line class="w-full text-sm" [(ngModel)]="referenceLines"></ngm-reference-line>
+    </div>
+
+    <div *ngIf="showMeasureChartOptions" class="ngm-chart-property__card">
+      <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
+        <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">analytics</mat-icon>
+        <span>{{ 'FORMLY.PROPERTY_SELECT.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
+      </label>
+
+      <ngm-chart-measure-form class="w-full text-sm" [(ngModel)]="chartOptions"
+        [chartType]="chartType"
+      ></ngm-chart-measure-form>
+    </div>
+  </div>
+</ngm-property-select>
+
+
+<mat-radio-group [(ngModel)]="palette" displayDensity="cosy">
+  <mat-menu #paletteMenu="matMenu" class="ngm-formly ngm-density__compact">
+
+    <ng-template matMenuContent>
+      <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
+        <mat-radio-button class="ngm-radio-button__property" [value]="null">
+          {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
+        </mat-radio-button>
+      </button>
+  
+      <ng-container *ngFor="let group of interpolateGroups">
+        <button mat-menu-item disableRipple disabled>
+          {{group.groupName}}
+        </button>
+  
+        <button mat-menu-item disableRipple *ngFor="let interpolate of group.values"
+          (click)="$event.stopPropagation();">
+          <mat-radio-button [value]="interpolate.name" class="ngm-radio-button__property flex-1 w-full">
+            <ngm-chromatic-preview class="flex-1 w-full" [interpolate]="interpolate"></ngm-chromatic-preview>
+          </mat-radio-button>
+        </button>
+      </ng-container>
+    </ng-template>
+  </mat-menu>
+</mat-radio-group>
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.scss b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.scss
new file mode 100644
index 000000000..641100cae
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.scss
@@ -0,0 +1,34 @@
+:host {
+  --mat-expansion-header-text-size: 12px;
+  @apply flex-1 flex;
+
+  .ngm-property-select {
+    flex: 1;
+  }
+}
+
+.ngm-formly__remove {
+  visibility: hidden;
+}
+
+.ngm-property-select:hover {
+  .ngm-formly__remove {
+    visibility: visible;
+  }
+}
+
+.ngm-chart-property__card {
+  @apply p-2 flex flex-col bg-white rounded-lg;
+}
+.ngm-chart-property__card-title {
+  @apply text-sm font-semibold;
+}
+
+::ng-deep {
+  .ngm-chart-property__palette-trigger.mat-mdc-menu-trigger {
+    @apply my-2;
+    .mdc-button__label {
+      @apply w-full;
+    }
+  }
+}
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.ts b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.ts
new file mode 100644
index 000000000..dbd8dce7e
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-property/chart-property.component.ts
@@ -0,0 +1,364 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion'
+import { CommonModule } from '@angular/common'
+import { Component, Input, computed, forwardRef, inject, signal } from '@angular/core'
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop'
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule } from '@angular/material/menu'
+import { MatRadioModule } from '@angular/material/radio'
+import { NgmColorsComponent } from '@metad/components/form-field'
+import {
+  NgmChromaticInterpolateGroup,
+  NxChromaticPreviewComponent,
+  getScaleChromaticInterpolates
+} from '@metad/components/palette'
+import { PropertyCapacity, PropertyModule } from '@metad/components/property'
+import { ColorPalettes, NxCoreService } from '@metad/core'
+import { DensityDirective, NgmDSCoreService } from '@metad/ocap-angular/core'
+import {
+  AggregationRole,
+  CalculationProperty,
+  ChartDimensionRoleType,
+  ChartMeasureRoleType,
+  ChartPattern,
+  ChartType,
+  DataSettings,
+  EntityType,
+  getEntityProperty,
+  isEqual,
+  pick
+} from '@metad/ocap-core'
+import { NgmDesignerFormComponent, NxDesignerModule, NxSettingsPanelService, STORY_DESIGNER_SCHEMA } from '@metad/story/designer'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { BehaviorSubject, distinctUntilChanged, from, map } from 'rxjs'
+import { DimensionChartOptionsSchemaService } from '../analytical-card.schema'
+import { NgmReferenceLineComponent } from './reference-line.component'
+import { NgmChartMeasureComponent } from './chart-measure.component'
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    TranslateModule,
+
+    PropertyModule,
+    NxDesignerModule,
+    NxChromaticPreviewComponent,
+    DensityDirective,
+    NgmColorsComponent,
+    NgmDesignerFormComponent,
+    NgmReferenceLineComponent,
+    NgmChartMeasureComponent
+  ],
+  selector: 'ngm-chart-property',
+  templateUrl: 'chart-property.component.html',
+  styleUrls: ['chart-property.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmChartPropertyComponent)
+    },
+    {
+      provide: STORY_DESIGNER_SCHEMA,
+      useClass: DimensionChartOptionsSchemaService
+    },
+  ]
+})
+export class NgmChartPropertyComponent implements ControlValueAccessor {
+  public coreService = inject(NxCoreService)
+  public dsCoreService = inject(NgmDSCoreService)
+  public settingsService? = inject(NxSettingsPanelService, { optional: true })
+  public translateService = inject(TranslateService)
+
+  @Input() capacities: PropertyCapacity[]
+  @Input() get removable() {
+    return this._removable()
+  }
+  set removable(value: string | boolean) {
+    this._removable.set(coerceBooleanProperty(value))
+  }
+  private readonly _removable = signal(false)
+
+  @Input() get dataSettings(): DataSettings {
+    return this._dataSettings()
+  }
+  set dataSettings(value) {
+    this._dataSettings.set(value)
+  }
+  private readonly _dataSettings = signal<DataSettings>(null)
+
+  @Input() get entityType(): EntityType {
+    return this._entityType()
+  }
+  set entityType(value) {
+    this._entityType.set(value)
+  }
+  private readonly _entityType = signal<EntityType>(null)
+
+  @Input() chartType: ChartType
+
+
+  public interpolateGroups: NgmChromaticInterpolateGroup[]
+  public colorPalettes = ColorPalettes
+
+  DIMENSION_ROLES = [
+    { label: 'None', value: null },
+    { label: 'Category', value: ChartDimensionRoleType.Category },
+    { label: 'Category2', value: ChartDimensionRoleType.Category2 },
+    { label: 'Group', value: ChartDimensionRoleType.Group },
+    { label: 'Stacked', value: ChartDimensionRoleType.Stacked },
+    // { label: 'Color', value: ChartDimensionRoleType.Color }, 应该是还未支持
+    { label: 'Trellis', value: ChartDimensionRoleType.Trellis }
+  ]
+
+  MEASURE_ROLES = [
+    { label: 'None', value: null },
+    { label: 'Axis1', value: ChartMeasureRoleType.Axis1 },
+    { label: 'Axis2', value: ChartMeasureRoleType.Axis2 },
+    { label: 'Axis3', value: ChartMeasureRoleType.Axis3 },
+    { label: 'Size', value: ChartMeasureRoleType.Size },
+    { label: 'Lightness', value: ChartMeasureRoleType.Lightness },
+    { label: 'SizeLightness', value: ChartMeasureRoleType.SizeLightness },
+    { label: 'Tooltip', value: ChartMeasureRoleType.Tooltip }
+  ]
+
+  PATTERNS = [
+    { label: 'A', value: ChartPattern.a },
+    { label: 'B', value: ChartPattern.b },
+    { label: 'C', value: ChartPattern.c },
+    { label: 'D', value: ChartPattern.d },
+    { label: 'E', value: ChartPattern.e },
+    { label: 'F', value: ChartPattern.f },
+    { label: 'G', value: ChartPattern.g },
+    { label: 'H', value: ChartPattern.h }
+  ]
+
+  SHAPE_TYPES = [
+    { label: 'Bar', value: 'bar', icon: 'stacked_bar_chart' },
+    { label: 'Line', value: 'line', icon: 'show_chart' },
+    { label: 'Scatter', value: 'scatter', icon: 'scatter_plot' }
+  ]
+
+  private readonly model = signal(null)
+
+  /**
+   * 对接 ngm-property-select 的 FormControl, 与当前组件的 formControl 连接
+   */
+  formControl = new FormControl()
+
+  get showMeasureStyle() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyle)
+  }
+  get showColorPalette() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStylePalette)
+  }
+  get showMeasurePalettePattern() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStylePalettePattern)
+  }
+  get showChartAttributes() {
+    return this.capacities?.includes(PropertyCapacity.DimensionChart)
+  }
+  get showMeasureRole() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyleRole)
+  }
+  get showMeasureShape() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyleShape)
+  }
+  get showMeasureGridBar() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyleGridBar)
+  }
+  get showMeasureReferenceLine() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyleReferenceLine)
+  }
+  get showMeasureChartOptions() {
+    return this.capacities?.includes(PropertyCapacity.MeasureStyleChartOptions)
+  }
+
+  public readonly syntax = computed(() => this.entityType?.syntax)
+  public readonly restrictedDimensions$ = new BehaviorSubject<string[]>(null)
+
+  get role() {
+    return this.model()?.role
+  }
+  set role(value) {
+    this.patchValue({ role: value })
+  }
+
+  get palette() {
+    return this.model()?.palette?.name
+  }
+  set palette(value) {
+    let interpolate = null
+    this.interpolateGroups.find((group) =>
+      group.values.find((item) => {
+        if (item.name === value) {
+          interpolate = item
+        }
+        return item.name === value
+      })
+    )
+
+    this.patchValue({
+      palette: {
+        ...(this.model()?.palette || {}),
+        name: value,
+        colors: interpolate?.colors?.map(({ fill }) => fill)
+      }
+    })
+  }
+
+  get colors() {
+    return this.model()?.palette?.colors
+  }
+  set colors(value) {
+    this.patchValue({
+      palette: {
+        ...(this.model()?.palette || {}),
+        colors: value
+      }
+    })
+  }
+
+  get reverse() {
+    return this.model()?.palette?.reverse
+  }
+  set reverse(value) {
+    this.patchValue({
+      palette: {
+        ...(this.model()?.palette || {}),
+        reverse: value
+      }
+    })
+  }
+
+  get pattern() {
+    return this.model()?.palette?.pattern
+  }
+  set pattern(value) {
+    this.patchValue({
+      palette: {
+        ...(this.model()?.palette || {}),
+        pattern: value
+      }
+    })
+  }
+
+  get shapeType() {
+    return this.model()?.shapeType
+  }
+  set shapeType(value) {
+    this.patchValue({ shapeType: value })
+  }
+  get bar() {
+    return this.model()?.bar
+  }
+  set bar(value) {
+    this.patchValue({ bar: value })
+  }
+
+  get referenceLines() {
+    return this.model()?.referenceLines
+  }
+  set referenceLines(value) {
+    this.patchValue({ referenceLines: value })
+  }
+
+  get chartOptions() {
+    return this.model()?.chartOptions
+  }
+  set chartOptions(value) {
+    this.patchValue({ chartOptions: value })
+  }
+
+  public readonly dimension = toSignal(
+    this.formControl.valueChanges.pipe(
+      map((value) => pick(value, 'dimension', 'hierarchy', 'level', 'measure')),
+      distinctUntilChanged(isEqual)
+    )
+  )
+
+  public readonly property = computed(() => getEntityProperty(this.entityType, this.dimension()))
+
+  public readonly isDimension = computed(() => {
+    return this.property()?.role === AggregationRole.dimension
+  })
+  public readonly isMeasure = computed(() => {
+    return this.property()?.role === AggregationRole.measure
+  })
+
+  /**
+  |--------------------------------------------------------------------------
+  | Subscriptions (effect)
+  |--------------------------------------------------------------------------
+  */
+  private colorsSub = from(getScaleChromaticInterpolates())
+    .pipe(takeUntilDestroyed())
+    .subscribe((interpolateGroups) => {
+      this.interpolateGroups = interpolateGroups
+    })
+
+  private valueSub = toObservable(this.model)
+    .pipe(takeUntilDestroyed())
+    .subscribe((value) => {
+      this.onChange?.(value)
+    })
+  private formControSub = this.formControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+    this.model.set({
+      ...this.model(),
+      ...(value ?? {})
+    })
+  })
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formControl.patchValue(obj)
+      this.model.set(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formControl.disable() : this.formControl.enable()
+  }
+
+  patchValue(value) {
+    this.model.set({
+      ...this.model(),
+      ...(this.formControl.value ?? {}),
+      ...value
+    })
+  }
+
+  onCalculationChange(property: CalculationProperty) {
+    this.coreService.storyUpdateEvent$.next({
+      type: 'Calculation',
+      dataSettings: this.dataSettings,
+      property
+    })
+  }
+
+  onColorsChange(colors: string[]) {
+    this.patchValue({
+      palette: {
+        ...(this.model()?.palette ?? {}),
+        name: null
+      }
+    })
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/chart-property/reference-line.component.ts b/libs/story-angular/widgets/analytical-card/chart-property/reference-line.component.ts
new file mode 100644
index 000000000..63b01567c
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-property/reference-line.component.ts
@@ -0,0 +1,64 @@
+import { CommonModule } from "@angular/common";
+import { Component, forwardRef } from "@angular/core";
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { NgmDesignerFormComponent, NxDesignerModule, STORY_DESIGNER_SCHEMA } from "@metad/story/designer";
+import { TranslateModule } from "@ngx-translate/core";
+import { ReferenceLineSchemaService } from "../schemas";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+
+
+@Component({
+    standalone: true,
+    imports: [
+      CommonModule,
+      FormsModule,
+      ReactiveFormsModule,
+      MatButtonModule,
+      MatIconModule,
+      TranslateModule,
+  
+      NxDesignerModule,
+      NgmDesignerFormComponent
+    ],
+    selector: 'ngm-reference-line',
+    template: `<ngm-designer-form class="w-full" [formControl]="formControl"></ngm-designer-form>`,
+    styles: [`:host {padding: 0;}`],
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        multi: true,
+        useExisting: forwardRef(() => NgmReferenceLineComponent)
+      },
+      {
+        provide: STORY_DESIGNER_SCHEMA,
+        useClass: ReferenceLineSchemaService
+      },
+    ]
+  })
+  export class NgmReferenceLineComponent implements ControlValueAccessor {
+    formControl = new FormControl({referenceLines: []})
+
+    private valueSub = this.formControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+        this.onChange?.(value.referenceLines)
+    })
+
+    onChange: (input: any) => void
+    onTouched: () => void
+  
+    writeValue(obj: any): void {
+      if (obj) {
+        this.formControl.patchValue({referenceLines: obj})
+      }
+    }
+    registerOnChange(fn: any): void {
+      this.onChange = fn
+    }
+    registerOnTouched(fn: any): void {
+      this.onTouched = fn
+    }
+    setDisabledState?(isDisabled: boolean): void {
+      isDisabled ? this.formControl.disable() : this.formControl.enable()
+    }
+  }
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.html b/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.html
new file mode 100644
index 000000000..5626c0807
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.html
@@ -0,0 +1,7 @@
+<formly-form class="w-full"
+    [form]="formGroup"
+    [fields]="fields()"
+    [model]="model"
+    (modelChange)="onModelChange($event)"
+    [options]="options"
+></formly-form>
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.scss b/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.ts b/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.ts
new file mode 100644
index 000000000..b77e75850
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/chart-settings/chart-settings.component.ts
@@ -0,0 +1,88 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, forwardRef, inject } from '@angular/core'
+import { ControlValueAccessor, FormGroup, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { FormlyModule } from '@ngx-formly/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { chartSettingsFieldGroup, getChartOptionsSchema } from '../analytical-card.schema'
+import { ChartType, cloneDeep, isEqual } from '@metad/ocap-core'
+import { AccordionWrappers } from '@metad/story/designer'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { distinctUntilChanged, map } from 'rxjs/operators'
+import { BehaviorSubject, combineLatest } from 'rxjs'
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FormlyModule],
+  selector: 'ngm-chart-settings',
+  templateUrl: 'chart-settings.component.html',
+  styleUrls: ['chart-settings.component.scss'],
+  host: {
+    class: 'ngm-chart-settings'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmChartSettingsComponent)
+    }
+  ]
+})
+export class NgmChartSettingsComponent implements ControlValueAccessor {
+  private readonly translateService = inject(TranslateService)
+
+  @Input()
+  get chartType() {
+    return this.chartType$.value
+  }
+  set chartType(value) {
+    this.chartType$.next(value)
+  }
+  private chartType$ = new BehaviorSubject<ChartType>(null)
+  
+  formGroup = new FormGroup({})
+
+  fields = toSignal(combineLatest([
+    this.chartType$.pipe(distinctUntilChanged(isEqual)),
+    this.translateService.stream('Story')
+  ]).pipe(
+    map(([chartType, i18nStory]) => {
+      return [
+        ...AccordionWrappers([
+          {
+            key: 'chartSettings',
+            label: i18nStory?.Widgets?.CHART?.ChartSettings ?? 'Chart Settings',
+            toggleable: false,
+            fieldGroup: chartSettingsFieldGroup(i18nStory?.Widgets)
+          }
+        ]),
+    
+        getChartOptionsSchema(chartType, i18nStory?.STYLING?.ECHARTS)
+      ]
+    }))
+  )
+
+  model = {}
+  options = {}
+
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formGroup.patchValue(obj)
+      this.model = cloneDeep(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable()
+  }
+  onModelChange(event) {
+    this.onChange(event)
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.html b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.html
new file mode 100644
index 000000000..8de542b0a
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.html
@@ -0,0 +1,8 @@
+<ngm-chart-property class="w-full"
+  removable
+  [capacities]="capacities"
+  [dataSettings]="dataSettings$ | async"
+  [entityType]="entityType$ | async"
+  [chartType]="chartType$ | async"
+  [formControl]="formControl"
+></ngm-chart-property>
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.scss b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.scss
new file mode 100644
index 000000000..2d0267188
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.scss
@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  flex: 1;
+
+  .ngm-property-select {
+    flex: 1;
+  }
+}
+
+.ngm-formly__remove {
+  visibility: hidden;
+}
+
+.ngm-property-select:hover {
+  .ngm-formly__remove {
+    visibility: visible;
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.ts b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.ts
new file mode 100644
index 000000000..057b3466a
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.component.ts
@@ -0,0 +1,86 @@
+import { Component, DestroyRef, OnInit, Optional, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { FormControl, FormArray } from '@angular/forms'
+import { PropertyCapacity } from '@metad/components/property'
+import { MetadFormlyArrayComponent } from '@metad/formly-mat/array'
+import { ChartType, DataSettings, EntitySet, EntityType } from '@metad/ocap-core'
+import { FieldType, FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core'
+import { BehaviorSubject, Observable, map } from 'rxjs'
+
+
+@Component({
+  selector: 'ngm-formly-chart-property',
+  templateUrl: './chart-property.component.html',
+  styleUrls: ['./chart-property.component.scss']
+})
+export class NgmFormlyChartPropertyComponent extends FieldType<{
+  capacities: PropertyCapacity[];
+  chartType$: Observable<ChartType>;
+} & FormlyFieldConfig<FormlyFieldProps & { [additionalProperties: string]: any; }>> implements OnInit {
+  private readonly destroyRef = inject(DestroyRef)
+
+  get formControl() {
+    return super.formControl as FormControl
+  }
+  get capacities() {
+    return this.props.capacities
+  }
+  get chartType$() {
+    return this.props.chartType$
+  }
+  public readonly dataSettings$ = new BehaviorSubject<DataSettings>(null)
+  public readonly entitySet$ = new BehaviorSubject<EntitySet>(null)
+  public readonly entityType$ = new BehaviorSubject<EntityType>(null)
+  public readonly syntax$ = this.entityType$.pipe(map((entityType) => entityType?.syntax))
+  public readonly restrictedDimensions$ = new BehaviorSubject<string[]>(null)
+
+  constructor(
+    @Optional()
+    private formlyArray?: MetadFormlyArrayComponent
+  ) {
+    super()
+  }
+
+  ngOnInit(): void {
+    // 初始化完成后再发送数据
+    if (this.field?.props?.entityType instanceof Observable) {
+      this.field.props.entityType
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe((event) => this.entityType$.next(event))
+    } else if (this.field.props.entityType) {
+      this.entityType$.next(this.field.props.entityType)
+      // 注意: 这样的 of(event) 异步事件会紧跟着一个 complete 事件导致 this.entityType$ 被 Complete
+      // of(this.field.props.entityType).subscribe(this.entityType$)
+    }
+
+    if (this.field?.props?.dataSettings instanceof Observable) {
+      this.field.props.dataSettings
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe((event) => this.dataSettings$.next(event))
+    } else if (this.field?.props?.dataSettings) {
+      this.dataSettings$.next(this.field.props.dataSettings)
+    }
+
+    if (this.field?.props?.restrictedDimensions instanceof Observable) {
+      this.field.props.restrictedDimensions
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe((event) => this.restrictedDimensions$.next(event))
+    } else if (this.field?.props?.restrictedDimensions) {
+      this.restrictedDimensions$.next(this.field.props.restrictedDimensions)
+    }
+  }
+
+  killMyself() {
+    if (this.field.form instanceof FormArray) {
+      const index = this.field.parent.fieldGroup.indexOf(this.field)
+      this.formlyArray?.remove(index)
+    } else {
+      const index = this.field.parent.fieldGroup.findIndex((field) => field.key === this.field.key)
+      if (index > -1) {
+        this.field.parent.fieldGroup.splice(index, 1)
+        this.field.parent.model[this.field.key as string] = null
+      }
+      this.field.parent.formControl.setValue(this.field.parent.model)
+    }
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.module.ts b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.module.ts
new file mode 100644
index 000000000..d24056ef7
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/chart-property/chart-property.module.ts
@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule } from '@angular/material/menu'
+import { MatRadioModule } from '@angular/material/radio'
+import { NgmColorsComponent } from '@metad/components/form-field'
+import { DensityDirective } from '@metad/ocap-angular/core'
+import { FormlyModule } from '@ngx-formly/core'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgmFormlyChartPropertyComponent } from './chart-property.component'
+import { NgmChartPropertyComponent } from '../../chart-property/chart-property.component'
+
+@NgModule({
+  declarations: [NgmFormlyChartPropertyComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    TranslateModule,
+
+    DensityDirective,
+    NgmColorsComponent,
+    NgmChartPropertyComponent,
+
+    FormlyModule.forChild({
+      types: [
+        {
+          name: 'chart-property',
+          component: NgmFormlyChartPropertyComponent
+        }
+      ]
+    })
+  ],
+  exports: [NgmFormlyChartPropertyComponent]
+})
+export class NgmFormlyChartPropertModule {}
diff --git a/libs/story-angular/widgets/analytical-card/formly/chart-type/chart-type.component.ts b/libs/story-angular/widgets/analytical-card/formly/chart-type/chart-type.component.ts
new file mode 100644
index 000000000..472f8b512
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/chart-type/chart-type.component.ts
@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, forwardRef, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+import { ChartType, isEqual } from '@metad/ocap-core'
+import { NgmDesignerFormComponent, NxDesignerModule, STORY_DESIGNER_SCHEMA } from '@metad/story/designer'
+import { TranslateModule } from '@ngx-translate/core'
+import { ChartOptionsSchemaService } from '../../analytical-card.schema'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+
+    NxDesignerModule,
+    NgmDesignerFormComponent
+  ],
+  selector: 'ngm-chart-type-form',
+  template: `<ngm-designer-form class="w-full" [formControl]="formControl"></ngm-designer-form>`,
+  styles: [
+    `
+      :host {
+        padding: 0;
+      }
+    `
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmFormlyChartTypeComponent)
+    },
+    {
+      provide: STORY_DESIGNER_SCHEMA,
+      useClass: ChartOptionsSchemaService
+    }
+  ]
+})
+export class NgmFormlyChartTypeComponent implements ControlValueAccessor {
+  private readonly schema = inject<ChartOptionsSchemaService>(STORY_DESIGNER_SCHEMA)
+
+  @Input() get chartType(): ChartType {
+    return this.schema.chartType
+  }
+  set chartType(value: ChartType) {
+    this.schema.chartType = value
+  }
+
+  formControl = new FormControl({})
+
+  private valueSub = this.formControl.valueChanges.pipe(
+    debounceTime(100),
+    distinctUntilChanged(isEqual),
+    takeUntilDestroyed()
+  ).subscribe((value) => {
+    this.onChange?.(value)
+  })
+
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formControl.setValue(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formControl.disable() : this.formControl.enable()
+  }
+}
diff --git a/libs/story-angular/widgets/analytical-card/formly/index.ts b/libs/story-angular/widgets/analytical-card/formly/index.ts
new file mode 100644
index 000000000..c67fbe0de
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-card/formly/index.ts
@@ -0,0 +1,3 @@
+export * from './chart-property/chart-property.component'
+export * from './chart-property/chart-property.module'
+export * from './chart-type/chart-type.component'
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/index.ts b/libs/story-angular/widgets/analytical-card/index.ts
index d76a0fb57..fddffd7f1 100644
--- a/libs/story-angular/widgets/analytical-card/index.ts
+++ b/libs/story-angular/widgets/analytical-card/index.ts
@@ -1,4 +1,7 @@
 export * from './analytical-card.component'
 export * from './analytical-card.module'
 export * from './analytical-card.schema'
-export * from './schemas/reference-line.schema'
\ No newline at end of file
+export * from './schemas/reference-line.schema'
+export * from './chart-settings/chart-settings.component'
+export * from './chart-property/chart-property.component'
+export * from './formly/index'
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-card/schemas/aria.ts b/libs/story-angular/widgets/analytical-card/schemas/aria.ts
index 56ba27bd1..4df757550 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/aria.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/aria.ts
@@ -1,13 +1,13 @@
-import { AccordionWrappers, FORMLY_W_FULL } from "@metad/story/designer"
+import { AccordionWrappers, FORMLY_ROW, FORMLY_W_FULL } from "@metad/story/designer"
 
 export function AriaCapacity(className: string, I18N?) {
   return AccordionWrappers([{
     key: 'aria',
-    label: I18N.ARIA?.TITLE ?? 'Aria',
+    label: I18N?.ARIA?.TITLE ?? 'Aria',
     fieldGroup: [
       {
         key: 'decal',
-        fieldGroupClassName: 'ngm-formly__row',
+        fieldGroupClassName: FORMLY_ROW,
         fieldGroup: [
           {
             className,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/axis.ts b/libs/story-angular/widgets/analytical-card/schemas/axis.ts
index 300228b80..e94dad5c4 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/axis.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/axis.ts
@@ -98,7 +98,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'position',
           type: 'select',
           props: {
-            label: I18N.CATEGORY_AXIS?.Position ?? 'Position',
+            label: I18N?.CATEGORY_AXIS?.Position ?? 'Position',
             options: [
               { value: null, label: 'None' },
               { value: 'top', label: 'Top' },
@@ -111,7 +111,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'offset',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.Offset ?? 'Offset',
+            label: I18N?.CATEGORY_AXIS?.Offset ?? 'Offset',
             type: 'number'
           }
         },
@@ -121,7 +121,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'showName',
           type: 'toggle',
           props: {
-            label: I18N.CATEGORY_AXIS?.ShowName ?? 'Show Name'
+            label: I18N?.CATEGORY_AXIS?.ShowName ?? 'Show Name'
           }
         },
 
@@ -131,7 +131,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'name',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.Name ?? 'Name'
+            label: I18N?.CATEGORY_AXIS?.Name ?? 'Name'
           }
         },
         {
@@ -140,7 +140,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'nameLocation',
           type: 'select',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameLocation ?? 'Name Location',
+            label: I18N?.CATEGORY_AXIS?.NameLocation ?? 'Name Location',
             options: [
               { value: null, label: 'None' },
               { value: 'start', label: 'Start' },
@@ -155,7 +155,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'nameGap',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameGap ?? 'Name Gap',
+            label: I18N?.CATEGORY_AXIS?.NameGap ?? 'Name Gap',
             type: 'number'
           }
         },
@@ -165,7 +165,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'nameRotate',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameRotate ?? 'Name Rotate',
+            label: I18N?.CATEGORY_AXIS?.NameRotate ?? 'Name Rotate',
             type: 'number'
           }
         },
@@ -174,7 +174,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'inverse',
           type: 'checkbox',
           props: {
-            label: I18N.CATEGORY_AXIS?.Inverse ?? 'Inverse'
+            label: I18N?.CATEGORY_AXIS?.Inverse ?? 'Inverse'
           }
         },
         {
@@ -182,7 +182,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'boundaryGap',
           type: 'checkbox',
           props: {
-            label: I18N.CATEGORY_AXIS?.BoundaryGap ?? 'Boundary Gap'
+            label: I18N?.CATEGORY_AXIS?.BoundaryGap ?? 'Boundary Gap'
           }
         },
         {
@@ -190,7 +190,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'min',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.Min ?? 'Min'
+            label: I18N?.CATEGORY_AXIS?.Min ?? 'Min'
           }
         },
         {
@@ -198,7 +198,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'max',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.Max ?? 'Max'
+            label: I18N?.CATEGORY_AXIS?.Max ?? 'Max'
           }
         },
         {
@@ -206,7 +206,7 @@ export function CategoryAxis(className: string, I18N?) {
           key: 'silent',
           type: 'checkbox',
           props: {
-            label: I18N.CATEGORY_AXIS?.Silent ?? 'Silent'
+            label: I18N?.CATEGORY_AXIS?.Silent ?? 'Silent'
           }
         }
       ]
@@ -310,7 +310,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'show',
           type: 'checkbox',
           props: {
-            label: I18N.VALUE_AXIS?.SHOW ?? 'Show'
+            label: I18N?.VALUE_AXIS?.SHOW ?? 'Show'
           }
         },
         {
@@ -318,7 +318,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'showName',
           type: 'toggle',
           props: {
-            label: I18N.CATEGORY_AXIS?.ShowName ?? 'Show Name'
+            label: I18N?.CATEGORY_AXIS?.ShowName ?? 'Show Name'
           }
         },
 
@@ -328,7 +328,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'name',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.Name ?? 'Name'
+            label: I18N?.CATEGORY_AXIS?.Name ?? 'Name'
           }
         },
         {
@@ -337,7 +337,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'nameLocation',
           type: 'select',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameLocation ?? 'Name Location',
+            label: I18N?.CATEGORY_AXIS?.NameLocation ?? 'Name Location',
             options: [
               { value: null, label: 'None' },
               { value: 'start', label: 'Start' },
@@ -352,7 +352,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'nameGap',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameGap ?? 'Name Gap',
+            label: I18N?.CATEGORY_AXIS?.NameGap ?? 'Name Gap',
             type: 'number'
           }
         },
@@ -362,7 +362,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'nameRotate',
           type: 'input',
           props: {
-            label: I18N.CATEGORY_AXIS?.NameRotate ?? 'Name Rotate',
+            label: I18N?.CATEGORY_AXIS?.NameRotate ?? 'Name Rotate',
             type: 'number'
           }
         },
@@ -371,7 +371,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'splitNumber',
           type: 'slider',
           props: {
-            label: I18N.VALUE_AXIS?.SplitNumber ?? 'Split Number',
+            label: I18N?.VALUE_AXIS?.SplitNumber ?? 'Split Number',
             type: 'number',
             placeholder: 'splitNumber',
             thumbLabel: true,
@@ -385,17 +385,17 @@ export function ValueAxis(className: string, I18N?) {
           key: 'scale',
           type: 'checkbox',
           props: {
-            label: I18N.VALUE_AXIS?.ValueScale ?? 'Value Scale',
+            label: I18N?.VALUE_AXIS?.ValueScale ?? 'Value Scale',
             placeholder: 'scale'
           }
         },
         {
-          hideExpression: `!model || model.scale`,
+          hideExpression: `!!model && model.scale`,
           className,
           key: 'min',
           type: 'slider',
           props: {
-            label: I18N.VALUE_AXIS?.Min ?? 'Min',
+            label: I18N?.VALUE_AXIS?.Min ?? 'Min',
             type: 'number',
             placeholder: 'min',
             thumbLabel: true,
@@ -403,12 +403,12 @@ export function ValueAxis(className: string, I18N?) {
           }
         },
         {
-          hideExpression: `!model || model.scale`,
+          hideExpression: `!!model && model.scale`,
           className,
           key: 'max',
           type: 'slider',
           props: {
-            label: I18N.VALUE_AXIS?.Max ?? 'Max',
+            label: I18N?.VALUE_AXIS?.Max ?? 'Max',
             type: 'number',
             placeholder: 'max',
             thumbLabel: true,
@@ -420,7 +420,7 @@ export function ValueAxis(className: string, I18N?) {
           key: 'position',
           type: 'select',
           props: {
-            label: I18N.CATEGORY_AXIS?.Position ?? 'Position',
+            label: I18N?.CATEGORY_AXIS?.Position ?? 'Position',
             options: [
               { value: null, label: I18N?.Common?.None ?? 'None' },
               { value: 'left', label: I18N?.Common?.Left ?? 'Left' },
diff --git a/libs/story-angular/widgets/analytical-card/schemas/common.ts b/libs/story-angular/widgets/analytical-card/schemas/common.ts
index debb5fd24..d81019dbb 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/common.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/common.ts
@@ -1,4 +1,3 @@
-import { C_FORMLY_INITIAL_VALUE } from '@metad/formly-mat/expansion'
 import { AccordionWrappers, FORMLY_ROW, FORMLY_W_FULL } from '@metad/story/designer'
 import { LineStyle } from './axis'
 
@@ -11,7 +10,7 @@ export function ItemStyle(className: string, I18N) {
     },
     fieldGroup: [
       {
-        fieldGroupClassName: 'ngm-formly__row',
+        fieldGroupClassName: FORMLY_ROW,
         fieldGroup: [
           SingleColor(className, I18N),
           ...Borders(className, I18N),
@@ -66,77 +65,6 @@ export function ItemStyle(className: string, I18N) {
   }
 }
 
-// /**
-//  * @deprecated use ItemStyleAccordionWrappers
-//  */
-// export function ItemStyleExpansion(className: string, I18N, keyShow: string, extensions?) {
-//   return {
-//     key: 'itemStyle',
-//     hideExpression: `!field.form.value.` + keyShow,
-//     props: {
-//       label: I18N?.ItemStyle?.Title ?? 'Item Style',
-//       toggleable: true,
-//       keyShow: keyShow
-//     },
-//     fieldGroup: [
-//       {
-//         fieldGroupClassName: 'ngm-formly__row',
-//         fieldGroup: [
-//           SingleColor(className, I18N),
-//           ...Borders(className, I18N),
-
-//           // for CanvasRenderingContext2D
-//           {
-//             className,
-//             key: 'borderCap',
-//             type: 'select',
-//             props: {
-//               label: I18N?.Common?.BorderCap ?? 'Border Cap',
-//               placeholder: 'lineCap',
-//               options: [
-//                 { value: null, label: 'None' },
-//                 { value: 'butt', label: 'butt' },
-//                 { value: 'round', label: 'round' },
-//                 { value: 'square', label: 'square' }
-//               ]
-//             }
-//           },
-//           {
-//             className,
-//             key: 'borderJoin',
-//             type: 'select',
-//             props: {
-//               label: I18N?.Common?.BorderJoin ?? 'Border Join',
-//               placeholder: 'lineJoin',
-//               options: [
-//                 { value: null, label: 'None' },
-//                 { value: 'bevel', label: 'bevel' },
-//                 { value: 'round', label: 'round' },
-//                 { value: 'miter', label: 'miter' }
-//               ]
-//             }
-//           },
-//           {
-//             className,
-//             key: 'borderMiterLimit',
-//             type: 'input',
-//             props: {
-//               label: I18N?.Common?.BorderMiterLimit ?? 'Border Miter Limit',
-//               placeholder: 'Default is 10.0',
-//               type: 'number'
-//             }
-//           },
-
-//           ...Shadows(className, I18N),
-//           Opacity(className, I18N),
-
-//           ...(extensions ?? [])
-//         ]
-//       }
-//     ]
-//   }
-// }
-
 export function ItemStyleAccordionWrappers(className: string, I18N, extensions?) {
   return AccordionWrappers([
     {
@@ -144,7 +72,7 @@ export function ItemStyleAccordionWrappers(className: string, I18N, extensions?)
       label: I18N?.ItemStyle?.Title ?? 'Item Style',
       fieldGroup: [
         {
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [
             {
               className,
@@ -304,75 +232,56 @@ export function SelectedMode(className: string, I18N) {
   }
 }
 
-export function SelectExpansion(className: string, I18N, keyShow: string) {
-  return {
-    key: 'select',
-    hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-    props: {
+export function SelectAccordionWrappers(className: string, I18N) {
+  return AccordionWrappers([
+    {
+      key: 'select',
       label: I18N?.Select?.Title ?? 'Select',
-      toggleable: true,
-      keyShow: keyShow
-    },
-    fieldGroup: [
-      {
-        key: 'disabled',
-        type: 'toggle',
-        props: {
-          label: I18N?.Common?.Disabled ?? 'Disabled'
-        }
-      },
-      ItemStyle(className, I18N)
-    ]
-  }
-}
-
-export function MarkLineExpansion(className: string, I18N, keyShow: string) {
-  return {
-    key: 'markLine',
-    hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-    props: {
-      label: I18N?.MarkLine?.Title ?? 'Mark Line',
-      toggleable: true,
-      keyShow: keyShow
-    },
-    fieldGroup: MarkLine(className, I18N).fieldGroup
-  }
+      fieldGroup: [
+        {
+          key: 'disabled',
+          type: 'toggle',
+          props: {
+            label: I18N?.Common?.Disabled ?? 'Disabled'
+          }
+        },
+        ItemStyle(className, I18N)
+      ]
+    }
+  ])
 }
 
-export function MarkLine(className, I18N) {
-  return {
-    key: 'markLine',
-    defaultValue: C_FORMLY_INITIAL_VALUE,
-    wrappers: ['expansion'],
-    props: {
+export function MarkLineAccordionWrappers(className: string, I18N) {
+  return AccordionWrappers([
+    {
+      key: 'markLine',
       label: I18N?.MarkLine?.Title ?? 'Mark Line',
-      toggleable: true
-    },
-    fieldGroup: [
-      {
-        fieldGroupClassName: 'ngm-formly__row',
-        fieldGroup: [
-          {
-            className,
-            key: 'silent',
-            type: 'checkbox',
-            props: {
-              label: I18N?.Common?.Silent ?? 'Silent'
+      fieldGroup: [
+        {
+          fieldGroupClassName: FORMLY_ROW,
+          fieldGroup: [
+            {
+              className,
+              key: 'silent',
+              type: 'checkbox',
+              props: {
+                label: I18N?.Common?.Silent ?? 'Silent'
+              }
             }
-          }
-        ]
-      },
-      {
-        key: 'lineStyle',
-        wrappers: ['panel'],
-        fieldGroupClassName: 'ngm-formly__row',
-        props: {
-          label: I18N?.MarkLine?.LineStyle ?? 'Line Style'
+          ]
         },
-        fieldGroup: LineStyle(className, I18N)
-      }
-    ]
-  }
+        {
+          key: 'lineStyle',
+          wrappers: ['panel'],
+          fieldGroupClassName: FORMLY_ROW,
+          props: {
+            label: I18N?.MarkLine?.LineStyle ?? 'Line Style'
+          },
+          fieldGroup: LineStyle(className, I18N)
+        }
+      ]
+    }
+  ])
 }
 
 export function Shadows(className: string, I18N?) {
@@ -382,7 +291,7 @@ export function Shadows(className: string, I18N?) {
       key: 'shadowColor',
       type: 'color',
       props: {
-        label: I18N.SHADOW?.SHADOW_COLOR ?? 'Shadow Color',
+        label: I18N?.SHADOW?.SHADOW_COLOR ?? 'Shadow Color',
         placeholder: 'shadowColor'
       }
     },
@@ -391,7 +300,7 @@ export function Shadows(className: string, I18N?) {
       key: 'shadowBlur',
       type: 'input',
       props: {
-        label: I18N.SHADOW?.SHADOW_BLUR ?? 'Shadow Blur',
+        label: I18N?.SHADOW?.SHADOW_BLUR ?? 'Shadow Blur',
         placeholder: 'shadowBlur'
       }
     },
@@ -400,7 +309,7 @@ export function Shadows(className: string, I18N?) {
       key: 'shadowOffsetX',
       type: 'input',
       props: {
-        label: I18N.SHADOW?.SHADOW_OFFSETX ?? 'Shadow OffsetX',
+        label: I18N?.SHADOW?.SHADOW_OFFSETX ?? 'Shadow OffsetX',
         type: 'number',
         placeholder: 'shadowOffsetX'
       }
@@ -410,7 +319,7 @@ export function Shadows(className: string, I18N?) {
       key: 'shadowOffsetY',
       type: 'input',
       props: {
-        label: I18N.SHADOW?.SHADOW_OFFSETY ?? 'Shadow OffsetY',
+        label: I18N?.SHADOW?.SHADOW_OFFSETY ?? 'Shadow OffsetY',
         type: 'number',
         placeholder: 'shadowOffsetY'
       }
@@ -431,30 +340,9 @@ export function EmphasisAccordionWrappers(className: string, I18N, extensions?:
   ])
 }
 
-// /**
-//  * 
-//  * @deprecated use EmphasisAccordionWrappers
-//  */
-// export function EmphasisExpansion(className: string, I18N, keyShow: string) {
-//   return {
-//     key: 'emphasis',
-//     hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-//     props: {
-//       label: I18N?.EMPHASIS?.TITLE ?? 'Emphasis',
-//       toggleable: true,
-//       keyShow: keyShow
-//     },
-//     fieldGroupClassName: 'ngm-formly__row',
-//     fieldGroup: Emphasis(className, I18N).fieldGroup
-//   }
-// }
-
 export function Emphasis(className: string, I18N) {
   return {
     key: 'emphasis',
-    // wrappers: ['expansion'],
-    // defaultValue: C_FORMLY_INITIAL_VALUE,
-    // fieldGroupClassName: 'ngm-formly__row',
     props: {
       label: I18N?.EMPHASIS?.TITLE ?? 'Emphasis',
       icon: 'announcement',
@@ -507,7 +395,7 @@ export function Positions(className: string, I18N) {
       key: 'top',
       type: 'input-inline',
       props: {
-        label: I18N.Common?.TOP ?? 'Top',
+        label: I18N?.Common?.TOP ?? 'Top',
         placeholder: 'top',
         options: [
           {
@@ -558,7 +446,7 @@ export function Positions(className: string, I18N) {
       key: 'right',
       type: 'input-inline',
       props: {
-        label: I18N.Common?.RIGHT ?? 'Right',
+        label: I18N?.Common?.RIGHT ?? 'Right',
         placeholder: 'right',
         options: [
           {
@@ -609,7 +497,7 @@ export function Positions(className: string, I18N) {
       key: 'bottom',
       type: 'input-inline',
       props: {
-        label: I18N.Common?.BOTTOM ?? 'Bottom',
+        label: I18N?.Common?.BOTTOM ?? 'Bottom',
         placeholder: 'bottom',
         options: [
           {
@@ -660,7 +548,7 @@ export function Positions(className: string, I18N) {
       key: 'left',
       type: 'input-inline',
       props: {
-        label: I18N.Common?.LEFT ?? 'Left',
+        label: I18N?.Common?.LEFT ?? 'Left',
         placeholder: 'left',
         options: [
           {
@@ -1008,7 +896,7 @@ export function Symbols(className: string, I18N) {
       key: 'symbol',
       type: 'select',
       props: {
-        label: I18N.Common?.Symbol ?? 'Symbol',
+        label: I18N?.Common?.Symbol ?? 'Symbol',
         options: SymbolOptions(I18N)
       }
     },
@@ -1018,7 +906,7 @@ export function Symbols(className: string, I18N) {
       key: 'symbolSize',
       type: 'input',
       props: {
-        label: I18N.Common?.SymbolSize ?? 'Symbol Size',
+        label: I18N?.Common?.SymbolSize ?? 'Symbol Size',
         type: 'number'
       }
     },
@@ -1028,7 +916,7 @@ export function Symbols(className: string, I18N) {
       key: 'symbolRotate',
       type: 'input',
       props: {
-        label: I18N.Common?.SymbolRotate ?? 'Symbol Rotate',
+        label: I18N?.Common?.SymbolRotate ?? 'Symbol Rotate',
         type: 'number'
       }
     },
@@ -1038,7 +926,7 @@ export function Symbols(className: string, I18N) {
       key: 'symbolOffset',
       type: 'input',
       props: {
-        label: I18N.Common?.SymbolOffset ?? 'Symbol Offset',
+        label: I18N?.Common?.SymbolOffset ?? 'Symbol Offset',
         type: 'number'
       }
     },
@@ -1059,7 +947,7 @@ export function Stacks(className: string, I18N) {
       key: 'stack',
       type: 'input',
       props: {
-        label: I18N.Common?.Stack ?? 'Stack'
+        label: I18N?.Common?.Stack ?? 'Stack'
       }
     },
   ]
@@ -1330,3 +1218,19 @@ export function AreaStyles(className: string, I18N) {
     ...Shadows(className, I18N)
   ]
 }
+
+export function BackgroundStyleAccordionWrappers(className: string, I18N, extensions?: any[]) {
+  return AccordionWrappers([
+    {
+      key: 'backgroundStyle',
+      label: I18N?.Bar?.Background ?? 'Background',
+      fieldGroup: [
+        SingleColor(className, I18N),
+        ...Borders(className, I18N),
+        ...Shadows(className, I18N),
+        Opacity(className, I18N),
+        ...(extensions ?? [])
+      ]
+    }
+  ])
+}
diff --git a/libs/story-angular/widgets/analytical-card/schemas/data-zoom.ts b/libs/story-angular/widgets/analytical-card/schemas/data-zoom.ts
index 7e0fda21a..5e8b89c3f 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/data-zoom.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/data-zoom.ts
@@ -56,7 +56,7 @@ export function DataZoomAttributes(className: string, I18N) {
       key: 'filterMode',
       type: 'select-inline',
       props: {
-        label: dataZoomI18n?.FILTER_MODE,
+        label: dataZoomI18n?.FILTER_MODE ?? 'Filter Mode',
         options: [
           { value: null, label: I18N?.Common?.None ?? 'Default' },
           { value: 'filter', label: 'Filter' },
@@ -119,7 +119,7 @@ export function DataZoomAttributes(className: string, I18N) {
       key: 'startValue',
       type: 'input-inline',
       props: {
-        label: dataZoomI18n?.START_VALUE
+        label: dataZoomI18n?.START_VALUE ?? 'Start Value'
       },
       expressions: {
         hide: `!model || model.start !== null && model.start !== undefined`
@@ -130,7 +130,7 @@ export function DataZoomAttributes(className: string, I18N) {
       key: 'endValue',
       type: 'input-inline',
       props: {
-        label: dataZoomI18n?.END_VALUE
+        label: dataZoomI18n?.END_VALUE ?? 'End Value'
       },
       expressions: {
         hide: `!model || model.end !== null && model.end !== undefined`
@@ -141,7 +141,7 @@ export function DataZoomAttributes(className: string, I18N) {
       key: 'minSpan',
       type: 'slider',
       props: {
-        label: dataZoomI18n?.MIN_SPAN,
+        label: dataZoomI18n?.MIN_SPAN ?? 'Min Span',
         type: 'number',
         placeholder: '0 ~ 100',
         thumbLabel: true,
@@ -152,7 +152,7 @@ export function DataZoomAttributes(className: string, I18N) {
       key: 'maxSpan',
       type: 'slider',
       props: {
-        label: dataZoomI18n?.MAX_SPAN,
+        label: dataZoomI18n?.MAX_SPAN ?? 'Max Span',
         type: 'number',
         placeholder: '0 ~ 100',
         thumbLabel: true,
@@ -200,9 +200,9 @@ export function DataZoomAttributes(className: string, I18N) {
         label: dataZoomI18n?.PreventDefaultMouseMove ?? 'Prevent Default Mouse Move'
       }
     },
-    MouseMode('zoomOnMouseWheel', dataZoomI18n?.zoomOnMouseWheel ?? 'zoomOnMouseWheel', className, dataZoomI18n),
-    MouseMode('moveOnMouseMove', dataZoomI18n?.moveOnMouseMove ?? 'moveOnMouseMove', className, dataZoomI18n),
-    MouseMode('moveOnMouseWheel ', dataZoomI18n?.moveOnMouseWheel ?? 'moveOnMouseWheel ', className, dataZoomI18n)
+    MouseMode('zoomOnMouseWheel', dataZoomI18n?.zoomOnMouseWheel ?? 'Zoom On Mouse Wheel', className, dataZoomI18n),
+    MouseMode('moveOnMouseMove', dataZoomI18n?.moveOnMouseMove ?? 'Move on Mouse Move', className, dataZoomI18n),
+    MouseMode('moveOnMouseWheel ', dataZoomI18n?.moveOnMouseWheel ?? 'Move on Mouse Wheel ', className, dataZoomI18n)
   ]
 }
 
diff --git a/libs/story-angular/widgets/analytical-card/schemas/geo.ts b/libs/story-angular/widgets/analytical-card/schemas/geo.ts
index a482fcd56..939e8dc25 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/geo.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/geo.ts
@@ -1,3 +1,4 @@
+import { FORMLY_ROW } from '@metad/story/designer'
 import { ItemStyle } from './common'
 
 export function GeoCapacity(className: string, I18N) {
@@ -17,10 +18,10 @@ export function GeoCapacity(className: string, I18N) {
           key: 'geo',
           hideExpression: `!field.parent.model || !field.parent.model.` + showKey,
           templateOptions: {
-            label: I18N.Geo?.Title ?? 'Geo',
+            label: I18N?.Geo?.Title ?? 'Geo',
             keyShow: showKey
           },
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [ItemStyle(className, I18N)]
         }
       ]
diff --git a/libs/story-angular/widgets/analytical-card/schemas/global.ts b/libs/story-angular/widgets/analytical-card/schemas/global.ts
index 00dd9f608..7fe0bbc20 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/global.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/global.ts
@@ -1,3 +1,5 @@
+import { FORMLY_ROW } from "@metad/story/designer"
+
 export function GlobalCapacity(className: string, I18N?) {
   return [
     {
@@ -10,7 +12,7 @@ export function GlobalCapacity(className: string, I18N?) {
           props: {
             label: I18N?.Global?.Title ?? 'Global'
           },
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [
             {
               className,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/grid.ts b/libs/story-angular/widgets/analytical-card/schemas/grid.ts
index 2831c6c97..684864ae3 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/grid.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/grid.ts
@@ -1,14 +1,14 @@
-import { AccordionWrappers } from '@metad/story/designer'
+import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
 import { Positions, Shadows } from './common'
 
 export function GridCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'grid',
-      label: I18N.GRID?.GRID ?? 'Grid',
+      label: I18N?.GRID?.GRID ?? 'Grid',
       fieldGroup: [
         {
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: Grid(className, I18N)
         }
       ]
@@ -23,7 +23,7 @@ export function Grid(className?, I18N?) {
       key: 'show',
       type: 'checkbox',
       templateOptions: {
-        label: I18N.GRID?.SHOW ?? 'Show'
+        label: I18N?.GRID?.SHOW ?? 'Show'
       }
     },
     {
@@ -31,7 +31,7 @@ export function Grid(className?, I18N?) {
       key: 'containLabel',
       type: 'checkbox',
       templateOptions: {
-        label: I18N.GRID?.CONTAIN_LABEL ?? 'Contain Axis Label'
+        label: I18N?.GRID?.CONTAIN_LABEL ?? 'Contain Axis Label'
       }
     },
     ...Positions(className, I18N),
@@ -40,7 +40,7 @@ export function Grid(className?, I18N?) {
       key: 'backgroundColor',
       type: 'color',
       templateOptions: {
-        label: I18N.GRID?.BACKGROUND_COLOR ?? 'Background Color'
+        label: I18N?.GRID?.BACKGROUND_COLOR ?? 'Background Color'
       }
     },
     {
@@ -48,7 +48,7 @@ export function Grid(className?, I18N?) {
       key: 'borderColor',
       type: 'color',
       templateOptions: {
-        label: I18N.GRID?.BORDER_COLOR ?? 'Border Color'
+        label: I18N?.GRID?.BORDER_COLOR ?? 'Border Color'
       }
     },
     {
@@ -56,7 +56,7 @@ export function Grid(className?, I18N?) {
       key: 'borderWidth',
       type: 'input',
       templateOptions: {
-        label: I18N.GRID?.BORDER_WIDTH ?? 'Background Width',
+        label: I18N?.GRID?.BORDER_WIDTH ?? 'Background Width',
         type: 'number'
       }
     },
diff --git a/libs/story-angular/widgets/analytical-card/schemas/grid3D.ts b/libs/story-angular/widgets/analytical-card/schemas/grid3D.ts
index 56ac9ebb6..c73134088 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/grid3D.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/grid3D.ts
@@ -1,15 +1,21 @@
-import { AccordionWrappers } from "@metad/story/designer";
-import { AxisLabelAccordionWrappers, AxisLineAccordionWrappers, AxisPointerAccordionWrappers, AxisTickAccordionWrappers, SplitLineAccordionWrappers } from "./axis";
-import { Positions, WidthHeight } from "./common";
+import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
+import {
+  AxisLabelAccordionWrappers,
+  AxisLineAccordionWrappers,
+  AxisPointerAccordionWrappers,
+  AxisTickAccordionWrappers,
+  SplitLineAccordionWrappers
+} from './axis'
+import { Positions, WidthHeight } from './common'
 
 export function Grid3DCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'grid3D',
-      label: I18N.DDD?.GridTitle ?? 'Grid 3D',
+      label: I18N?.DDD?.GridTitle ?? 'Grid 3D',
       fieldGroup: [
         {
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [
             ...Positions(className, I18N),
             ...WidthHeight(className, I18N),
@@ -18,7 +24,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'boxWidth',
               type: 'input',
               props: {
-                label: I18N.DDD?.BoxWidth ?? 'Box Width',
+                label: I18N?.DDD?.BoxWidth ?? 'Box Width',
                 type: 'number'
               }
             },
@@ -27,7 +33,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'boxHeight',
               type: 'input',
               props: {
-                label: I18N.DDD?.BoxHeight ?? 'Box Height',
+                label: I18N?.DDD?.BoxHeight ?? 'Box Height',
                 type: 'number'
               }
             },
@@ -36,7 +42,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'boxDepth',
               type: 'input',
               props: {
-                label: I18N.DDD?.BoxDepth ?? 'Box Depth',
+                label: I18N?.DDD?.BoxDepth ?? 'Box Depth',
                 type: 'number'
               }
             },
@@ -45,9 +51,9 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'environment',
               type: 'json',
               props: {
-                label: I18N.DDD?.Environment ?? 'Environment',
+                label: I18N?.DDD?.Environment ?? 'Environment',
                 placeholder: 'json',
-                autosize: true,
+                autosize: true
               }
             },
             {
@@ -55,7 +61,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'light',
               type: 'json',
               props: {
-                label: I18N.DDD?.Light ?? 'Light',
+                label: I18N?.DDD?.Light ?? 'Light',
                 placeholder: 'json',
                 autosize: true,
                 autosizeMinRows: 2
@@ -66,7 +72,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'postEffect',
               type: 'json',
               props: {
-                label: I18N.DDD?.PostEffect ?? 'Post Effect',
+                label: I18N?.DDD?.PostEffect ?? 'Post Effect',
                 placeholder: 'json',
                 autosize: true,
                 autosizeMinRows: 2
@@ -77,19 +83,19 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'viewControl',
               type: 'json',
               props: {
-                label: I18N.DDD?.ViewControl ?? 'View Control',
+                label: I18N?.DDD?.ViewControl ?? 'View Control',
                 placeholder: 'json',
                 autosize: true,
                 autosizeMinRows: 2
               }
-            },
+            }
           ]
         },
         {
           key: 'temporalSuperSampling',
           wrappers: ['panel'],
           props: {
-            label: I18N.DDD?.TemporalSuperSampling ?? 'Temporal Super Sampling',
+            label: I18N?.DDD?.TemporalSuperSampling ?? 'Temporal Super Sampling'
           },
           fieldGroup: [
             {
@@ -97,7 +103,7 @@ export function Grid3DCapacity(className: string, I18N) {
               key: 'enable',
               type: 'toggle',
               props: {
-                label: I18N.DDD?.Enable ?? 'Enable',
+                label: I18N?.DDD?.Enable ?? 'Enable',
                 type: 'number'
               }
             }
diff --git a/libs/story-angular/widgets/analytical-card/schemas/legend.ts b/libs/story-angular/widgets/analytical-card/schemas/legend.ts
index d9e41b616..2dbea8703 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/legend.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/legend.ts
@@ -1,4 +1,4 @@
-import { AccordionWrappers } from '@metad/story/designer'
+import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
 import { LineStyle } from './axis'
 import { ItemStyleAccordionWrappers, Orient, PaddingJSON, SymbolOptions, TextStyles, WidthHeight } from './common'
 
@@ -6,7 +6,7 @@ export function LegendCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'legend',
-      label: I18N.LEGEND?.TITLE ?? 'Legend',
+      label: I18N?.LEGEND?.TITLE ?? 'Legend',
       fieldGroup: [
         ...Legend(className, I18N),
         ...ItemStyleAccordionWrappers(className, I18N),
@@ -21,7 +21,7 @@ export function LegendCapacity(className: string, I18N) {
             label: I18N?.LEGEND?.TextStyle ?? 'Text Style',
             fieldGroup: [
               {
-                fieldGroupClassName: 'ngm-formly__row',
+                fieldGroupClassName: FORMLY_ROW,
                 fieldGroup: TextStyles(className, I18N)
               }
             ]
@@ -35,7 +35,7 @@ export function LegendCapacity(className: string, I18N) {
 export function Legend(className: string, I18N) {
   return [
     {
-      fieldGroupClassName: 'ngm-formly__row',
+      fieldGroupClassName: FORMLY_ROW,
       fieldGroup: [
         {
           className,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/polar.ts b/libs/story-angular/widgets/analytical-card/schemas/polar.ts
index 62a6f6fc0..7aac158e6 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/polar.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/polar.ts
@@ -1,13 +1,13 @@
-import { AccordionWrappers } from "@metad/story/designer"
+import { AccordionWrappers, FORMLY_ROW } from "@metad/story/designer"
 
 export function PolarCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'polar',
-      label: I18N.Polar?.Title ?? 'Polar',
+      label: I18N?.Polar?.Title ?? 'Polar',
       fieldGroup: [
         {
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [
             {
               key: 'radius',
diff --git a/libs/story-angular/widgets/analytical-card/schemas/reference-line.schema.ts b/libs/story-angular/widgets/analytical-card/schemas/reference-line.schema.ts
index 673e01001..f63a58a09 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/reference-line.schema.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/reference-line.schema.ts
@@ -1,40 +1,44 @@
-import { Injectable, Injector } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { ReferenceLineAggregation, ReferenceLineType, ReferenceLineValueType } from '@metad/ocap-core'
-import { BaseDesignerSchemaService, BaseSchemaState } from '@metad/story/designer'
-import { map, Observable } from 'rxjs'
+import { DesignerSchema, FORMLY_ROW, FORMLY_W_1_2 } from '@metad/story/designer'
+import { TranslateService } from '@ngx-translate/core'
+import { BehaviorSubject, Observable, map } from 'rxjs'
 
 @Injectable()
-export class ReferenceLineSchemaService extends BaseDesignerSchemaService<BaseSchemaState> {
-  public readonly storyDesigner$ = this.translate.stream('STORY_DESIGNER')
-
-  constructor(public injector: Injector) {
-    super(injector)
+export class ReferenceLineSchemaService implements DesignerSchema<any> {
+  protected translate = inject(TranslateService)
+  get model() {
+    return this.model$.value
+  }
+  set model(value) {
+    this.model$.next(value)
   }
+  private readonly model$ = new BehaviorSubject<any>(null)
+
+  public readonly storyDesigner$ = this.translate.stream('Story.Widgets')
 
   getTitle(): Observable<string> {
     return this.storyDesigner$.pipe(
-      map((STORY_DESIGNER) => STORY_DESIGNER?.BUILDER?.CHART?.ReferenceLine?.Title ?? 'Create Reference Lines')
+      map((i18n) => i18n?.CHART?.ReferenceLine?.Title ?? 'Create Reference Lines')
     )
   }
 
   getSchema() {
     return this.storyDesigner$.pipe(
-      map((STORY_DESIGNER) => STORY_DESIGNER?.BUILDER?.CHART?.ReferenceLine),
+      map((i18n) => i18n?.CHART?.ReferenceLine),
       map((ReferenceLine) => {
-        const className = 'ngm-formly__col ngm-formly__col-6'
+        const className = FORMLY_W_1_2
         return [
           {
             key: 'referenceLines',
-            wrappers: ['panel'],
-            type: 'array-tabs',
-            templateOptions: {
-              label: ReferenceLine?.ReferenceLine ?? 'Reference Line',
+            type: 'array',
+            props: {
               padding: true,
               labelField: 'label',
               removeLabel: ReferenceLine?.removeLabel ?? 'Remove'
             },
             fieldArray: {
-              fieldGroupClassName: 'ngm-formly__row',
+              fieldGroupClassName: FORMLY_ROW,
               fieldGroup: [
                 {
                   className,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/bar.ts b/libs/story-angular/widgets/analytical-card/schemas/series/bar.ts
index 0ab7e0dd8..e96735822 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/bar.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/bar.ts
@@ -1,168 +1,128 @@
 import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
 import {
-  Borders,
+  BackgroundStyleAccordionWrappers,
   EmphasisAccordionWrappers,
   ItemStyleAccordionWrappers,
-  MarkLineExpansion,
-  Opacity,
-  SelectExpansion,
+  MarkLineAccordionWrappers,
+  SelectAccordionWrappers,
   SeriesCommon,
-  Shadows,
-  SingleColor,
   Stacks
 } from '../common'
 import { LabelAccordionWrappers, LabelLineAccordionWrappers } from './label'
 
 export function BarCapacity(className: string, I18N) {
-  return AccordionWrappers([{
-    key: 'seriesStyle',
-    label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
-    fieldGroup: [
-      {
-        fieldGroupClassName: FORMLY_ROW,
-        fieldGroup: [
-          {
-            className,
-            key: 'barWidth',
-            type: 'slider',
-            props: {
-              label: I18N?.Bar?.BarWidth ?? 'Bar Width',
-              type: 'number',
-              placeholder: 'barWidth',
-              thumbLabel: true,
-              autoScale: true
+  return AccordionWrappers([
+    {
+      key: 'seriesStyle',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
+      fieldGroup: [
+        {
+          fieldGroupClassName: FORMLY_ROW,
+          fieldGroup: [
+            {
+              className,
+              key: 'barWidth',
+              type: 'slider',
+              props: {
+                label: I18N?.Bar?.BarWidth ?? 'Bar Width',
+                type: 'number',
+                placeholder: 'barWidth',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            {
+              className,
+              key: 'barMaxWidth',
+              type: 'slider',
+              props: {
+                label: I18N?.Bar?.BarMaxWidth ?? 'Bar Max Width',
+                type: 'number',
+                placeholder: 'barMaxWidth',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            {
+              className,
+              key: 'barMinWidth',
+              type: 'slider',
+              props: {
+                label: I18N?.Bar?.BarMinWidth ?? 'Bar Min Width',
+                type: 'number',
+                placeholder: 'barMinWidth',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            {
+              className,
+              key: 'barMinHeight',
+              type: 'slider',
+              props: {
+                label: I18N?.Bar?.BarMinHeight ?? 'Bar Min Height',
+                type: 'number',
+                placeholder: 'barMinHeight',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            {
+              className,
+              key: 'barMinAngle',
+              type: 'slider',
+              props: {
+                label: I18N?.Bar?.BarMinAngle ?? 'Bar Min Angle',
+                type: 'number',
+                placeholder: 'barMinAngle',
+                thumbLabel: true,
+                min: 0,
+                max: 90
+              }
+            },
+            {
+              className,
+              key: 'barGap',
+              type: 'input',
+              props: {
+                label: I18N?.Bar?.BarGap ?? 'Bar Gap',
+                placeholder: 'barGap',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            {
+              className,
+              key: 'barCategoryGap',
+              type: 'input',
+              props: {
+                label: I18N?.Bar?.BarCategoryGap ?? 'Bar Category Gap',
+                placeholder: 'barCategoryGap',
+                thumbLabel: true,
+                autoScale: true
+              }
+            },
+            ...Stacks(className, I18N),
+            ...SeriesCommon(className, I18N).fieldGroup,
+            {
+              className,
+              key: 'roundCap',
+              type: 'checkbox',
+              props: {
+                label: I18N?.Bar?.RoundCap ?? 'Round Cap'
+              }
             }
-          },
-          {
-            className,
-            key: 'barMaxWidth',
-            type: 'slider',
-            props: {
-              label: I18N?.Bar?.BarMaxWidth ?? 'Bar Max Width',
-              type: 'number',
-              placeholder: 'barMaxWidth',
-              thumbLabel: true,
-              autoScale: true
-            }
-          },
-          {
-            className,
-            key: 'barMinWidth',
-            type: 'slider',
-            props: {
-              label: I18N?.Bar?.BarMinWidth ?? 'Bar Min Width',
-              type: 'number',
-              placeholder: 'barMinWidth',
-              thumbLabel: true,
-              autoScale: true
-            }
-          },
-          {
-            className,
-            key: 'barMinHeight',
-            type: 'slider',
-            props: {
-              label: I18N?.Bar?.BarMinHeight ?? 'Bar Min Height',
-              type: 'number',
-              placeholder: 'barMinHeight',
-              thumbLabel: true,
-              autoScale: true
-            }
-          },
-          {
-            className,
-            key: 'barMinAngle',
-            type: 'slider',
-            props: {
-              label: I18N?.Bar?.BarMinAngle ?? 'Bar Min Angle',
-              type: 'number',
-              placeholder: 'barMinAngle',
-              thumbLabel: true,
-              min: 0,
-              max: 90,
-            }
-          },
-          {
-            className,
-            key: 'barGap',
-            type: 'input',
-            props: {
-              label: I18N?.Bar?.BarGap ?? 'Bar Gap',
-              placeholder: 'barGap',
-              thumbLabel: true,
-              autoScale: true
-            }
-          },
-          {
-            className,
-            key: 'barCategoryGap',
-            type: 'input',
-            props: {
-              label: I18N?.Bar?.BarCategoryGap ?? 'Bar Category Gap',
-              placeholder: 'barCategoryGap',
-              thumbLabel: true,
-              autoScale: true
-            }
-          },
-          ...Stacks(className, I18N),
-          ...(SeriesCommon(className, I18N).fieldGroup),
-          {
-            className,
-            key: 'roundCap',
-            type: 'checkbox',
-            props: {
-              label: I18N?.Bar?.RoundCap ?? 'Round Cap',
-            }
-          },
-        ]
-      },
-
-      ...ItemStyleAccordionWrappers(className, I18N),
-      ...LabelAccordionWrappers(className, I18N),
-      ...LabelLineAccordionWrappers(className, I18N),
-      ...EmphasisAccordionWrappers(className, I18N),
-      {
-        key: '__showSelect__',
-        type: 'empty'
-      },
-      {
-        key: '__showMarkLine__',
-        type: 'empty'
-      },
-      {
-        key: 'showBackground',
-        type: 'empty'
-      },
-      {
-        wrappers: ['accordion'],
-        props: {
-          elevationZ: true
+          ]
         },
-        fieldGroup: [
-          SelectExpansion(className, I18N, '__showSelect__'),
-          MarkLineExpansion(className, I18N, '__showMarkLine__'),
-          BackgroundStyleExpansion(className, I18N, 'showBackground')
-        ]
-      }
-    ]
-  }])
-}
 
-function BackgroundStyleExpansion(className: string, I18N, keyShow: string) {
-  return {
-    key: 'backgroundStyle',
-    hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-    props: {
-      label: I18N?.Bar?.Background ?? 'Background',
-      toggleable: true,
-      keyShow: keyShow
-    },
-    fieldGroupClassName: FORMLY_ROW,
-    fieldGroup: [
-      SingleColor(className, I18N),
-      ...Borders(className, I18N),
-      ...Shadows(className, I18N),
-      Opacity(className, I18N)
-    ]
-  }
+        ...ItemStyleAccordionWrappers(className, I18N),
+        ...LabelAccordionWrappers(className, I18N),
+        ...LabelLineAccordionWrappers(className, I18N),
+        ...EmphasisAccordionWrappers(className, I18N),
+        ...BackgroundStyleAccordionWrappers(className, I18N),
+        ...SelectAccordionWrappers(className, I18N),
+        ...MarkLineAccordionWrappers(className, I18N)
+      ]
+    }
+  ])
 }
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/bar3D.ts b/libs/story-angular/widgets/analytical-card/schemas/series/bar3D.ts
index 3da1b0a4c..817f766fa 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/bar3D.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/bar3D.ts
@@ -5,7 +5,7 @@ export function Bar3DCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.DDD?.BarSeriesTitle ?? 'Series Attributes',
+      label: I18N?.DDD?.BarSeriesTitle ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
@@ -15,7 +15,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'bevelSize',
               type: 'number',
               props: {
-                label: I18N.DDD?.BevelSize ?? 'Bevel Size',
+                label: I18N?.DDD?.BevelSize ?? 'Bevel Size',
                 placeholder: '0 ~ 1'
               }
             },
@@ -24,7 +24,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'bevelSmoothness',
               type: 'number',
               props: {
-                label: I18N.DDD?.BevelSmoothness ?? 'Bevel Smoothness',
+                label: I18N?.DDD?.BevelSmoothness ?? 'Bevel Smoothness',
                 placeholder: '0 ~ 1'
               }
             },
@@ -33,7 +33,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'stack',
               type: 'input',
               props: {
-                label: I18N.DDD?.Stack ?? 'Stack'
+                label: I18N?.DDD?.Stack ?? 'Stack'
               }
             },
             // {
@@ -41,7 +41,7 @@ export function Bar3DCapacity(className: string, I18N) {
             //   key: 'stackStrategy',
             //   type: 'select',
             //   props: {
-            //     label: I18N.DDD?.StackStrategy ?? 'Stack Strategy',
+            //     label: I18N?.DDD?.StackStrategy ?? 'Stack Strategy',
             //     options: [
             //       { value: null, label: 'None' },
             //       { value: 'color', label: 'color' },
@@ -55,7 +55,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'minHeight',
               type: 'number',
               props: {
-                label: I18N.DDD?.MinHeight ?? 'MinHeight'
+                label: I18N?.DDD?.MinHeight ?? 'MinHeight'
               }
             },
             {
@@ -63,7 +63,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'silent',
               type: 'checkbox',
               props: {
-                label: I18N.DDD?.Silent ?? 'Silent'
+                label: I18N?.DDD?.Silent ?? 'Silent'
               }
             },
             {
@@ -71,7 +71,7 @@ export function Bar3DCapacity(className: string, I18N) {
               key: 'shading',
               type: 'select',
               props: {
-                label: I18N.DDD?.Shading ?? 'Shading',
+                label: I18N?.DDD?.Shading ?? 'Shading',
                 options: [
                   { value: null, label: 'None' },
                   { value: 'color', label: 'color' },
@@ -85,7 +85,7 @@ export function Bar3DCapacity(className: string, I18N) {
         ...AccordionWrappers([
           {
             key: 'itemStyle',
-            label: I18N.DDD?.ItemStyle ?? 'Item Style',
+            label: I18N?.DDD?.ItemStyle ?? 'Item Style',
             fieldGroup: [
               {
                 fieldGroupClassName: FORMLY_ROW,
@@ -110,7 +110,7 @@ function Label(className: string, I18N) {
           key: 'show',
           type: 'toggle',
           props: {
-            label: I18N.DDD?.Show ?? 'Show'
+            label: I18N?.DDD?.Show ?? 'Show'
           }
         },
         {
@@ -118,7 +118,7 @@ function Label(className: string, I18N) {
           key: 'distance',
           type: 'number',
           props: {
-            label: I18N.DDD?.Distance ?? 'Distance'
+            label: I18N?.DDD?.Distance ?? 'Distance'
           }
         },
         {
@@ -126,7 +126,7 @@ function Label(className: string, I18N) {
           key: 'formatter',
           type: 'input',
           props: {
-            label: I18N.DDD?.Formatter ?? 'Formatter'
+            label: I18N?.DDD?.Formatter ?? 'Formatter'
           }
         }
       ]
@@ -135,7 +135,7 @@ function Label(className: string, I18N) {
       key: 'textStyle',
       wrappers: ['panel'],
       props: {
-        label: I18N.DDD?.TextStyle ?? 'Text Style'
+        label: I18N?.DDD?.TextStyle ?? 'Text Style'
       },
       fieldGroup: [
         {
@@ -151,18 +151,18 @@ export function Common3D(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'label',
-      label: I18N.DDD?.Label ?? 'Label',
+      label: I18N?.DDD?.Label ?? 'Label',
       fieldGroup: Label(className, I18N)
     },
     {
       key: 'emphasis',
-      label: I18N.DDD?.Emphasis ?? 'Emphasis',
+      label: I18N?.DDD?.Emphasis ?? 'Emphasis',
       fieldGroup: [
         {
           key: 'itemStyle',
           wrappers: ['panel'],
           props: {
-            label: I18N.DDD?.ItemStyle ?? 'Item Style'
+            label: I18N?.DDD?.ItemStyle ?? 'Item Style'
           },
           fieldGroup: [
             {
@@ -176,7 +176,7 @@ export function Common3D(className: string, I18N) {
           key: 'label',
           wrappers: ['panel'],
           props: {
-            label: I18N.DDD?.Label ?? 'Label'
+            label: I18N?.DDD?.Label ?? 'Label'
           },
           fieldGroup: Label(className, I18N)
         }
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/boxplot.ts b/libs/story-angular/widgets/analytical-card/schemas/series/boxplot.ts
index 03d7706b4..956fd1b05 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/boxplot.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/boxplot.ts
@@ -5,7 +5,7 @@ export function BoxplotCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/funnel.ts b/libs/story-angular/widgets/analytical-card/schemas/series/funnel.ts
index 5393d1eac..573ec526a 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/funnel.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/funnel.ts
@@ -18,7 +18,7 @@ export function FunnelCapacity(className: string, I18N) {
           key: 'seriesStyle',
           hideExpression: `!field.parent.model.__showSeriesAttributes__`,
           templateOptions: {
-            label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+            label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
             keyShow: '__showSeriesAttributes__'
           },
           fieldGroup: [
@@ -30,7 +30,7 @@ export function FunnelCapacity(className: string, I18N) {
                   key: 'funnelAlign',
                   type: 'select',
                   templateOptions: {
-                    label: I18N.SeriesStyle?.FunnelAlign ?? 'Funnel Align',
+                    label: I18N?.SeriesStyle?.FunnelAlign ?? 'Funnel Align',
                     options: [
                       { value: null, label: 'None' },
                       { value: 'left', label: 'Left' },
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/line.ts b/libs/story-angular/widgets/analytical-card/schemas/series/line.ts
index 98f7a77a4..76eaf6296 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/line.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/line.ts
@@ -7,7 +7,7 @@ export function LineCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         SeriesCommon(className, I18N),
         {
@@ -18,7 +18,7 @@ export function LineCapacity(className: string, I18N) {
               key: 'showSymbol',
               type: 'checkbox',
               props: {
-                label: I18N.Line?.ShowSymbol ?? 'Show Symbol'
+                label: I18N?.Line?.ShowSymbol ?? 'Show Symbol'
               }
             },
             {
@@ -26,7 +26,7 @@ export function LineCapacity(className: string, I18N) {
               key: 'showAllSymbol',
               type: 'checkbox',
               props: {
-                label: I18N.Line?.ShowAllSymbol ?? 'Show All Symbol'
+                label: I18N?.Line?.ShowAllSymbol ?? 'Show All Symbol'
               }
             },
 
@@ -37,7 +37,7 @@ export function LineCapacity(className: string, I18N) {
               key: 'smooth',
               type: 'checkbox',
               props: {
-                label: I18N.Line?.Smooth ?? 'Smooth'
+                label: I18N?.Line?.Smooth ?? 'Smooth'
               }
             },
 
@@ -46,7 +46,7 @@ export function LineCapacity(className: string, I18N) {
               key: 'stack',
               type: 'input',
               props: {
-                label: I18N.Line?.Stack ?? 'Stack'
+                label: I18N?.Line?.Stack ?? 'Stack'
               }
             },
             {
@@ -54,7 +54,7 @@ export function LineCapacity(className: string, I18N) {
               key: 'step',
               type: 'select',
               props: {
-                label: I18N.Line?.Step ?? 'Step',
+                label: I18N?.Line?.Step ?? 'Step',
                 options: [
                   { value: true, label: 'True' },
                   { value: false, label: 'False' },
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/map.ts b/libs/story-angular/widgets/analytical-card/schemas/series/map.ts
index 6134b9047..08a8dffe1 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/map.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/map.ts
@@ -5,7 +5,7 @@ export function MapCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         SeriesCommon(className, I18N),
         {
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/pie.ts b/libs/story-angular/widgets/analytical-card/schemas/series/pie.ts
index 1a78fd265..d77cb847b 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/pie.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/pie.ts
@@ -14,7 +14,7 @@ export function PieCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/sankey.ts b/libs/story-angular/widgets/analytical-card/schemas/series/sankey.ts
index 3544ea2e1..beb74cc21 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/sankey.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/sankey.ts
@@ -16,7 +16,7 @@ export function SankeyCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/scatter.ts b/libs/story-angular/widgets/analytical-card/schemas/series/scatter.ts
index c334237ec..4386175db 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/scatter.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/scatter.ts
@@ -1,14 +1,11 @@
 import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
 import {
-  Borders,
+  BackgroundStyleAccordionWrappers,
   EmphasisAccordionWrappers,
   ItemStyleAccordionWrappers,
-  MarkLineExpansion,
-  Opacity,
-  SelectExpansion,
+  MarkLineAccordionWrappers,
+  SelectAccordionWrappers,
   SeriesCommon,
-  Shadows,
-  SingleColor,
   Symbols
 } from '../common'
 import { LabelAccordionWrappers, LabelLayoutAccordionWrappers, LabelLineAccordionWrappers } from './label'
@@ -17,7 +14,7 @@ export function ScatterCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
@@ -40,49 +37,10 @@ export function ScatterCapacity(className: string, I18N) {
         ...LabelLineAccordionWrappers(className, I18N),
         ...LabelLayoutAccordionWrappers(className, I18N),
         ...EmphasisAccordionWrappers(className, I18N),
-        {
-          key: '__showSelect__',
-          type: 'empty'
-        },
-        {
-          key: '__showMarkLine__',
-          type: 'empty'
-        },
-        {
-          key: 'showBackground',
-          type: 'empty'
-        },
-        {
-          wrappers: ['accordion'],
-          props: {
-            elevationZ: true
-          },
-          fieldGroup: [
-            SelectExpansion(className, I18N, '__showSelect__'),
-            MarkLineExpansion(className, I18N, '__showMarkLine__'),
-            BackgroundStyleExpansion(className, I18N, 'showBackground')
-          ]
-        }
+        ...SelectAccordionWrappers(className, I18N),
+        ...MarkLineAccordionWrappers(className, I18N),
+        ...BackgroundStyleAccordionWrappers(className, I18N)
       ]
     }
   ])
 }
-
-function BackgroundStyleExpansion(className: string, I18N, keyShow: string) {
-  return {
-    key: 'backgroundStyle',
-    hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-    props: {
-      label: I18N?.Bar?.Background ?? 'Background',
-      toggleable: true,
-      keyShow: keyShow
-    },
-    fieldGroupClassName: FORMLY_ROW,
-    fieldGroup: [
-      SingleColor(className, I18N),
-      ...Borders(className, I18N),
-      ...Shadows(className, I18N),
-      Opacity(className, I18N)
-    ]
-  }
-}
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/scatter3D.ts b/libs/story-angular/widgets/analytical-card/schemas/series/scatter3D.ts
index a9e760c18..fd8d8393f 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/scatter3D.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/scatter3D.ts
@@ -6,7 +6,7 @@ export function Scatter3DCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.DDD?.BarSeriesTitle ?? 'Series Attributes',
+      label: I18N?.DDD?.BarSeriesTitle ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
@@ -17,7 +17,7 @@ export function Scatter3DCapacity(className: string, I18N) {
               key: 'blendMode',
               type: 'select',
               templateOptions: {
-                label: I18N.DDD?.BlendMode ?? 'Blend Mode',
+                label: I18N?.DDD?.BlendMode ?? 'Blend Mode',
                 options: [
                   { value: null, label: 'None' },
                   { value: 'source-over', label: 'alpha 混合' },
@@ -30,7 +30,7 @@ export function Scatter3DCapacity(className: string, I18N) {
               key: 'silent',
               type: 'checkbox',
               props: {
-                label: I18N.DDD?.Silent ?? 'Silent'
+                label: I18N?.DDD?.Silent ?? 'Silent'
               }
             },
           ]
@@ -38,7 +38,7 @@ export function Scatter3DCapacity(className: string, I18N) {
         ...AccordionWrappers([
           {
             key: 'itemStyle',
-            label: I18N.DDD?.ItemStyle ?? 'Item Style',
+            label: I18N?.DDD?.ItemStyle ?? 'Item Style',
             fieldGroup: [
               {
                 fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/sunburst.ts b/libs/story-angular/widgets/analytical-card/schemas/series/sunburst.ts
index 36b4df327..0e35ea008 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/sunburst.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/sunburst.ts
@@ -20,7 +20,7 @@ export function SunburstCapacity(className: string, I18N) {
           key: 'seriesStyle',
           hideExpression: `!field.parent.model || !field.parent.model.${keyShow}`,
           props: {
-            label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+            label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
             keyShow
           },
           fieldGroup: [
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/themeRiver.ts b/libs/story-angular/widgets/analytical-card/schemas/series/themeRiver.ts
index 2653e46d2..a76182379 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/themeRiver.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/themeRiver.ts
@@ -16,7 +16,7 @@ export function ThemeRiverCapacity(className: string, I18N) {
               key: 'boundaryGap',
               type: 'json',
               props: {
-                label: I18N.SeriesStyle?.BoundaryGap ?? 'Boundary Gap',
+                label: I18N?.SeriesStyle?.BoundaryGap ?? 'Boundary Gap',
                 placeholder: '["10%", "10%"]',
                 autosize: true
               }
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/tree.ts b/libs/story-angular/widgets/analytical-card/schemas/series/tree.ts
index 60f5f1320..f6b707af0 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/tree.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/tree.ts
@@ -1,4 +1,3 @@
-import { C_FORMLY_INITIAL_VALUE } from '@metad/formly-mat/expansion'
 import { Positions, UniversalTransition } from '../common'
 import { FORMLY_ROW } from '@metad/story/designer'
 
@@ -11,14 +10,14 @@ export function TreeCapacity(className, I18N?) {
     },
     {
       wrappers: ['accordion'],
-      templateOptions: {
+      props: {
         elevationZ: true
       },
       fieldGroup: [
         {
           key: 'seriesStyle',
           hideExpression: `!field.parent.model || !field.parent.model.${keyShow}`,
-          templateOptions: {
+          props: {
             label: I18N?.Tree?.SeriesStyle?.Title ?? 'Series Style',
             keyShow
           },
@@ -33,7 +32,7 @@ export function TreeCapacity(className, I18N?) {
                 //   className,
                 //   key: 'layout',
                 //   type: 'select',
-                //   templateOptions: {
+                //   props: {
                 //     label: I18N?.Tree?.SeriesStyle?.Layout ?? 'Layout',
                 //     options: [
                 //       { value: 'orthogonal', label: I18N?.Tree?.SeriesStyle?.Orthogonal ?? 'Orthogonal' },
@@ -46,7 +45,7 @@ export function TreeCapacity(className, I18N?) {
                   className,
                   key: 'orient',
                   type: 'select',
-                  templateOptions: {
+                  props: {
                     label: I18N?.Tree?.SeriesStyle?.Orient ?? 'Orient',
                     options: [
                       { value: 'LR', label: 'LR' },
@@ -61,7 +60,7 @@ export function TreeCapacity(className, I18N?) {
                   className,
                   key: 'edgeShape',
                   type: 'select',
-                  templateOptions: {
+                  props: {
                     label: I18N?.Tree?.SeriesStyle?.EdgeShape ?? 'Edge Shape',
                     options: [
                       { value: 'curve', label: 'Curve' },
@@ -73,7 +72,7 @@ export function TreeCapacity(className, I18N?) {
                   className,
                   key: 'edgeForkPosition',
                   type: 'input',
-                  templateOptions: {
+                  props: {
                     label: I18N?.Tree?.SeriesStyle?.EdgeForkPosition ?? 'Edge Fork Position'
                   }
                 },
@@ -82,7 +81,7 @@ export function TreeCapacity(className, I18N?) {
                   className,
                   key: 'symbolSize',
                   type: 'input',
-                  templateOptions: {
+                  props: {
                     label: I18N?.Common?.SymbolSize ?? 'Symbol Size',
                     type: 'number'
                   }
@@ -92,7 +91,7 @@ export function TreeCapacity(className, I18N?) {
                   key: 'initialTreeDepth',
                   type: 'input',
                   defaultValue: 2,
-                  templateOptions: {
+                  props: {
                     label: I18N?.Tree?.SeriesStyle?.InitialTreeDepth ?? 'Initial Tree Depth',
                     type: 'number'
                   }
@@ -108,7 +107,7 @@ export function TreeCapacity(className, I18N?) {
             },
             {
               wrappers: ['accordion'],
-              templateOptions: {
+              props: {
                 elevationZ: true
               },
               fieldGroup: [LeavesExpansion(className, I18N, '__showLeaves__')]
@@ -137,7 +136,7 @@ export function TreeLabel(className, I18N?) {
   return {
     key: 'label',
     wrappers: ['panel'],
-    templateOptions: {
+    props: {
       label: I18N?.Common?.Label ?? 'Label'
     },
     fieldGroupClassName: FORMLY_ROW,
@@ -146,7 +145,7 @@ export function TreeLabel(className, I18N?) {
         className,
         key: 'position',
         type: 'select',
-        templateOptions: {
+        props: {
           label: I18N?.Common?.Position ?? 'Position',
           options: [
             {
@@ -167,9 +166,8 @@ export function TreeLabel(className, I18N?) {
 export function Emphasis(className: string, I18N) {
   return {
     key: 'emphasis',
-    wrappers: ['expansion'],
-    defaultValue: C_FORMLY_INITIAL_VALUE,
-    templateOptions: {
+    wrappers: ['accordion'],
+    props: {
       label: I18N?.EMPHASIS?.TITLE ?? 'Emphasis',
       toggleable: true
     },
@@ -179,7 +177,7 @@ export function Emphasis(className: string, I18N) {
         className,
         key: 'focus',
         type: 'select',
-        templateOptions: {
+        props: {
           label: I18N?.EMPHASIS?.FOCUS ?? 'Focus',
           options: [
             { value: null, label: 'None' },
@@ -195,7 +193,7 @@ export function Emphasis(className: string, I18N) {
         className,
         key: 'blurScope',
         type: 'select',
-        templateOptions: {
+        props: {
           label: I18N?.EMPHASIS?.BlurScope ?? 'Blur Scope',
           options: [
             { value: null, label: 'None' },
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/treemap.ts b/libs/story-angular/widgets/analytical-card/schemas/series/treemap.ts
index 318008fa7..dd00fe298 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/treemap.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/treemap.ts
@@ -6,7 +6,7 @@ export function TreemapCapacity(className: string, I18N?) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/series/waterfall.ts b/libs/story-angular/widgets/analytical-card/schemas/series/waterfall.ts
index 52c157f75..bd8456bb9 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/series/waterfall.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/series/waterfall.ts
@@ -1,14 +1,11 @@
 import { AccordionWrappers, FORMLY_ROW } from '@metad/story/designer'
 import {
-  Borders,
+  BackgroundStyleAccordionWrappers,
   EmphasisAccordionWrappers,
   ItemStyleAccordionWrappers,
-  MarkLineExpansion,
-  Opacity,
-  SelectExpansion,
+  MarkLineAccordionWrappers,
+  SelectAccordionWrappers,
   SeriesCommon,
-  Shadows,
-  SingleColor,
   Stacks
 } from '../common'
 import { LabelAccordionWrappers, LabelLineAccordionWrappers } from './label'
@@ -17,7 +14,7 @@ export function WaterfallCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'seriesStyle',
-      label: I18N.SeriesStyle?.Title ?? 'Series Attributes',
+      label: I18N?.SeriesStyle?.Title ?? 'Series Attributes',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
@@ -115,49 +112,10 @@ export function WaterfallCapacity(className: string, I18N) {
         ...LabelAccordionWrappers(className, I18N),
         ...LabelLineAccordionWrappers(className, I18N),
         ...EmphasisAccordionWrappers(className, I18N),
-        {
-          key: '__showSelect__',
-          type: 'empty'
-        },
-        {
-          key: '__showMarkLine__',
-          type: 'empty'
-        },
-        {
-          key: 'showBackground',
-          type: 'empty'
-        },
-        {
-          wrappers: ['accordion'],
-          props: {
-            elevationZ: true
-          },
-          fieldGroup: [
-            SelectExpansion(className, I18N, '__showSelect__'),
-            MarkLineExpansion(className, I18N, '__showMarkLine__'),
-            BackgroundStyleExpansion(className, I18N, 'showBackground')
-          ]
-        }
+        ...BackgroundStyleAccordionWrappers(className, I18N),
+        ...SelectAccordionWrappers(className, I18N),
+        ...MarkLineAccordionWrappers(className, I18N)
       ]
     }
   ])
 }
-
-function BackgroundStyleExpansion(className: string, I18N, keyShow: string) {
-  return {
-    key: 'backgroundStyle',
-    hideExpression: `!field.parent && !field.parent.model.` + keyShow,
-    props: {
-      label: I18N?.Bar?.Background ?? 'Background',
-      toggleable: true,
-      keyShow: keyShow
-    },
-    fieldGroupClassName: FORMLY_ROW,
-    fieldGroup: [
-      SingleColor(className, I18N),
-      ...Borders(className, I18N),
-      ...Shadows(className, I18N),
-      Opacity(className, I18N)
-    ]
-  }
-}
diff --git a/libs/story-angular/widgets/analytical-card/schemas/title.ts b/libs/story-angular/widgets/analytical-card/schemas/title.ts
index 5606f2496..07adeec42 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/title.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/title.ts
@@ -1,3 +1,5 @@
+import { FORMLY_ROW } from "@metad/story/designer"
+
 export function TitleCapacity(className: string, I18N) {
   const showKey = '__showTitle__'
   return [
@@ -15,17 +17,17 @@ export function TitleCapacity(className: string, I18N) {
           key: 'title',
           hideExpression: `!field.parent.model || !field.parent.model.` + showKey,
           props: {
-            label: I18N.Title?.Title ?? 'Title',
+            label: I18N?.Title?.Title ?? 'Title',
             keyShow: showKey
           },
-          fieldGroupClassName: 'ngm-formly__row',
+          fieldGroupClassName: FORMLY_ROW,
           fieldGroup: [
             {
               className,
               key: 'text',
               type: 'input',
               props: {
-                label: I18N.Title?.Text ?? 'Text',
+                label: I18N?.Title?.Text ?? 'Text',
               }
             },
             {
@@ -33,7 +35,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'link',
               type: 'input',
               props: {
-                label: I18N.Title?.Link ?? 'Link',
+                label: I18N?.Title?.Link ?? 'Link',
               }
             },
             {
@@ -41,7 +43,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'subtext',
               type: 'input',
               props: {
-                label: I18N.Title?.SubText ?? 'SubText',
+                label: I18N?.Title?.SubText ?? 'SubText',
               }
             },
             {
@@ -49,7 +51,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'sublink',
               type: 'input',
               props: {
-                label: I18N.Title?.SubLink ?? 'SubLink',
+                label: I18N?.Title?.SubLink ?? 'SubLink',
               }
             },
 
@@ -58,7 +60,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'left',
               type: 'input',
               props: {
-                label: I18N.Title?.Left ?? 'Left',
+                label: I18N?.Title?.Left ?? 'Left',
               }
             },
             {
@@ -66,7 +68,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'top',
               type: 'input',
               props: {
-                label: I18N.Title?.Top ?? 'Top',
+                label: I18N?.Title?.Top ?? 'Top',
               }
             },
             {
@@ -74,7 +76,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'right',
               type: 'input',
               props: {
-                label: I18N.Title?.Right ?? 'Right',
+                label: I18N?.Title?.Right ?? 'Right',
               }
             },
             {
@@ -82,7 +84,7 @@ export function TitleCapacity(className: string, I18N) {
               key: 'bottom',
               type: 'input',
               props: {
-                label: I18N.Title?.Bottom ?? 'Bottom',
+                label: I18N?.Title?.Bottom ?? 'Bottom',
               }
             },
             {
@@ -90,12 +92,12 @@ export function TitleCapacity(className: string, I18N) {
               key: 'textAlign',
               type: 'select',
               props: {
-                label: I18N.Common?.TextAlign?.Title ?? 'Title',
+                label: I18N?.Common?.TextAlign?.Title ?? 'Title',
                 options: [
-                  { value: 'auto', label: I18N.Common?.TextAlign?.Auto ?? 'Auto' },
-                  { value: 'left', label: I18N.Common?.TextAlign?.Left ?? 'Left' },
-                  { value: 'right', label: I18N.Common?.TextAlign?.Right ?? 'Right' },
-                  { value: 'center', label: I18N.Common?.TextAlign?.Center ?? 'Center' }
+                  { value: 'auto', label: I18N?.Common?.TextAlign?.Auto ?? 'Auto' },
+                  { value: 'left', label: I18N?.Common?.TextAlign?.Left ?? 'Left' },
+                  { value: 'right', label: I18N?.Common?.TextAlign?.Right ?? 'Right' },
+                  { value: 'center', label: I18N?.Common?.TextAlign?.Center ?? 'Center' }
                 ]
               }
             }
diff --git a/libs/story-angular/widgets/analytical-card/schemas/tooltip.ts b/libs/story-angular/widgets/analytical-card/schemas/tooltip.ts
index 2207dfe4f..9ff518a77 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/tooltip.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/tooltip.ts
@@ -5,7 +5,7 @@ export function TooltipCapacity(className: string, I18N) {
   return AccordionWrappers([
     {
       key: 'tooltip',
-      label: I18N.TOOLTIP?.TITLE ?? 'Tooltip',
+      label: I18N?.TOOLTIP?.TITLE ?? 'Tooltip',
       fieldGroup: [
         {
           fieldGroupClassName: FORMLY_ROW,
diff --git a/libs/story-angular/widgets/analytical-card/schemas/visualMap.ts b/libs/story-angular/widgets/analytical-card/schemas/visualMap.ts
index 22f3e5b1d..5a114c351 100644
--- a/libs/story-angular/widgets/analytical-card/schemas/visualMap.ts
+++ b/libs/story-angular/widgets/analytical-card/schemas/visualMap.ts
@@ -9,38 +9,6 @@ export function VisualMapCapacity(className: string, I18N?) {
   }])
 }
 
-// export function VisualMapsCapacity(className: string, I18N?) {
-//   const keyShow = '__showVisualMaps__'
-//   return [
-//     {
-//       key: keyShow,
-//       type: 'empty'
-//     },
-//     {
-//       wrappers: ['accordion'],
-//       props: {
-//         elevationZ: true
-//       },
-//       fieldGroup: [
-//         {
-//           key: 'visualMaps',
-//           type: 'array-tabs',
-//           hideExpression: `!field.parent.model || !field.parent.model.` + keyShow,
-//           props: {
-//             label: I18N?.VisualMap?.Title ?? 'VisualMaps',
-//             labelField: 'type',
-//             removeLabel: I18N?.VisualMap?.RemoveLabel ?? 'Remove',
-//             keyShow
-//           },
-//           fieldArray: {
-//             fieldGroup: VisualMap(className, I18N)
-//           }
-//         }
-//       ]
-//     }
-//   ]
-// }
-
 export function VisualMap(className: string, I18N?) {
   const isNotPiecewise = `!model || model.type !== 'piecewise'`
   return [
@@ -72,7 +40,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'show',
           type: 'toggle',
           props: {
-            label: I18N.VisualMap?.Show ?? 'Show'
+            label: I18N?.VisualMap?.Show ?? 'Show'
           }
         },
 
@@ -83,7 +51,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'inverse',
           type: 'checkbox',
           props: {
-            label: I18N.VisualMap?.Inverse ?? 'Inverse'
+            label: I18N?.VisualMap?.Inverse ?? 'Inverse'
           }
         },
 
@@ -92,7 +60,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'realtime',
           type: 'checkbox',
           props: {
-            label: I18N.VisualMap?.Realtime ?? 'Realtime'
+            label: I18N?.VisualMap?.Realtime ?? 'Realtime'
           }
         },
         {
@@ -100,7 +68,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'calculable',
           type: 'checkbox',
           props: {
-            label: I18N.VisualMap?.Calculable ?? 'Calculable'
+            label: I18N?.VisualMap?.Calculable ?? 'Calculable'
           }
         },
         {
@@ -108,7 +76,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'min',
           type: 'input',
           props: {
-            label: I18N.VisualMap?.Min ?? 'Min',
+            label: I18N?.VisualMap?.Min ?? 'Min',
             type: 'number'
           }
         },
@@ -117,7 +85,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'max',
           type: 'input',
           props: {
-            label: I18N.VisualMap?.Max ?? 'Max',
+            label: I18N?.VisualMap?.Max ?? 'Max',
             type: 'number'
           }
         },
@@ -126,7 +94,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'range',
           type: 'json',
           props: {
-            label: I18N.VisualMap?.Range ?? 'Range',
+            label: I18N?.VisualMap?.Range ?? 'Range',
             placeholder: `[number, number]`,
             autosize: true
           }
@@ -136,7 +104,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'showLabel',
           type: 'checkbox',
           props: {
-            label: I18N.VisualMap?.ShowLabel ?? 'Show Label'
+            label: I18N?.VisualMap?.ShowLabel ?? 'Show Label'
           }
         },
         {
@@ -144,7 +112,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'text',
           type: 'json',
           props: {
-            label: I18N.VisualMap?.Text ?? 'Text',
+            label: I18N?.VisualMap?.Text ?? 'Text',
             placeholder: `["High", "Low"]`,
             autosize: true
           }
@@ -154,7 +122,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'precision',
           type: 'input',
           props: {
-            label: I18N.VisualMap?.Precision ?? 'Precision',
+            label: I18N?.VisualMap?.Precision ?? 'Precision',
             type: 'number'
           }
         },
@@ -163,7 +131,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'splitNumber',
           type: 'input',
           props: {
-            label: I18N.VisualMap?.SplitNumber ?? 'Split Number',
+            label: I18N?.VisualMap?.SplitNumber ?? 'Split Number',
             type: 'number'
           },
           expressions: {
@@ -175,7 +143,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'pieces',
           type: 'json',
           props: {
-            label: I18N.VisualMap?.Pieces ?? 'Pieces',
+            label: I18N?.VisualMap?.Pieces ?? 'Pieces',
             autosize: true
           },
           expressions: {
@@ -187,7 +155,7 @@ export function VisualMap(className: string, I18N?) {
           key: 'itemGap',
           type: 'input',
           props: {
-            label: I18N.VisualMap?.ItemGap ?? 'Item Gap',
+            label: I18N?.VisualMap?.ItemGap ?? 'Item Gap',
             type: 'number'
           },
           expressions: {
@@ -212,14 +180,14 @@ export function VisualMap(className: string, I18N?) {
     ...AccordionWrappers([
       {
         key: 'inRange',
-        label: I18N.VisualMap?.InRange ?? 'In Range',
+        label: I18N?.VisualMap?.InRange ?? 'In Range',
         fieldGroup: [
           {
             key: 'color',
             type: 'json',
             props: {
-              label: I18N.Common?.Color ?? 'Color',
-              placeholder: I18N.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
+              label: I18N?.Common?.Color ?? 'Color',
+              placeholder: I18N?.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
               autosize: true
             }
           },
@@ -227,7 +195,7 @@ export function VisualMap(className: string, I18N?) {
             key: 'symbolSize',
             type: 'json',
             props: {
-              label: I18N.VisualMap?.SymbolSize ?? 'SymbolSize',
+              label: I18N?.VisualMap?.SymbolSize ?? 'SymbolSize',
               placeholder: `[number, number]`,
               autosize: true
             }
@@ -236,7 +204,7 @@ export function VisualMap(className: string, I18N?) {
             key: 'colorLightness',
             type: 'json',
             props: {
-              label: I18N.VisualMap?.ColorLightness ?? 'Color Lightness',
+              label: I18N?.VisualMap?.ColorLightness ?? 'Color Lightness',
               placeholder: `[number, number]`,
               autosize: true
             }
@@ -245,14 +213,14 @@ export function VisualMap(className: string, I18N?) {
       },
       {
         key: 'outOfRange',
-        label: I18N.VisualMap?.OutofRange ?? 'Out of Range',
+        label: I18N?.VisualMap?.OutofRange ?? 'Out of Range',
         fieldGroup: [
           {
             key: 'color',
             type: 'json',
             props: {
-              label: I18N.Common?.Color ?? 'Color',
-              placeholder: I18N.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
+              label: I18N?.Common?.Color ?? 'Color',
+              placeholder: I18N?.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
               autosize: true
             }
           },
@@ -260,7 +228,7 @@ export function VisualMap(className: string, I18N?) {
             key: 'symbolSize',
             type: 'json',
             props: {
-              label: I18N.VisualMap?.SymbolSize ?? 'SymbolSize',
+              label: I18N?.VisualMap?.SymbolSize ?? 'SymbolSize',
               placeholder: `[number, number]`,
               autosize: true
             }
@@ -269,7 +237,7 @@ export function VisualMap(className: string, I18N?) {
             key: 'colorLightness',
             type: 'json',
             props: {
-              label: I18N.VisualMap?.ColorLightness ?? 'Color Lightness',
+              label: I18N?.VisualMap?.ColorLightness ?? 'Color Lightness',
               placeholder: `[number]`,
               autosize: true
             }
@@ -278,21 +246,21 @@ export function VisualMap(className: string, I18N?) {
       },
       {
         key: 'controller',
-        label: I18N.VisualMap?.Controller ?? 'Controller',
+        label: I18N?.VisualMap?.Controller ?? 'Controller',
         fieldGroup: [
           {
             key: 'inRange',
             wrappers: ['panel'],
             props: {
-              label: I18N.VisualMap?.InRange ?? 'In Range'
+              label: I18N?.VisualMap?.InRange ?? 'In Range'
             },
             fieldGroup: [
               {
                 key: 'color',
                 type: 'json',
                 props: {
-                  label: I18N.Common?.Color ?? 'Color',
-                  placeholder: I18N.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
+                  label: I18N?.Common?.Color ?? 'Color',
+                  placeholder: I18N?.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
                   autosize: true
                 }
               }
@@ -302,15 +270,15 @@ export function VisualMap(className: string, I18N?) {
             key: 'outOfRange',
             wrappers: ['panel'],
             props: {
-              label: I18N.VisualMap?.OutofRange ?? 'Out of Range'
+              label: I18N?.VisualMap?.OutofRange ?? 'Out of Range'
             },
             fieldGroup: [
               {
                 key: 'color',
                 type: 'json',
                 props: {
-                  label: I18N.Common?.Color ?? 'Color',
-                  placeholder: I18N.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
+                  label: I18N?.Common?.Color ?? 'Color',
+                  placeholder: I18N?.Common?.ColorJSONPlaceholder ?? 'Color by JSON format',
                   autosize: true
                 }
               }
diff --git a/libs/story-angular/widgets/analytical-grid/analytical-grid-styling.schema.ts b/libs/story-angular/widgets/analytical-grid/analytical-grid-styling.schema.ts
index 4e4fd056f..56e61ab9b 100644
--- a/libs/story-angular/widgets/analytical-grid/analytical-grid-styling.schema.ts
+++ b/libs/story-angular/widgets/analytical-grid/analytical-grid-styling.schema.ts
@@ -2,12 +2,11 @@ import { Injectable } from '@angular/core'
 import { StoryWidget } from '@metad/story/core'
 import {
   AccordionWrappers,
-  Appearance,
+  Appearances,
   BaseDesignerSchemaService,
   BaseSchemaState,
   FORMLY_ROW,
   FORMLY_W_1_2,
-  FORMLY_W_FULL
 } from '@metad/story/designer'
 import { map } from 'rxjs/operators'
 
@@ -18,20 +17,33 @@ export class AnalyticalGridStylingSchema extends BaseDesignerSchemaService<BaseS
       map((i18n) => {
         return [
           {
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
-              label: i18n?.Common?.ComponentStyling ?? 'Component Styling',
-              expanded: true
+              expandedMulti: true,
+              elevationZ: true,
             },
             fieldGroup: [
               {
                 key: 'component',
                 type: 'styling',
-                props: {}
+                props: {
+                  label: i18n?.Common?.ComponentStyling ?? 'Component Styling',
+                  expanded: true
+                }
+              },
+
+              {
+                key: 'appearance',
+                props: {
+                  label: i18n?.Common?.Appearance ?? 'Appearance',
+                  expanded: true,
+                },
+                fieldGroupClassName: FORMLY_ROW,
+                fieldGroup: Appearances(FORMLY_W_1_2, i18n?.Common)
               }
             ]
           },
-          Appearance(FORMLY_W_FULL, i18n?.Common),
+
           ...AccordionWrappers([
             {
               key: 'bar',
diff --git a/libs/story-angular/widgets/analytical-grid/analytical-grid.schema.ts b/libs/story-angular/widgets/analytical-grid/analytical-grid.schema.ts
index ab10cc8ee..4b7adf311 100644
--- a/libs/story-angular/widgets/analytical-grid/analytical-grid.schema.ts
+++ b/libs/story-angular/widgets/analytical-grid/analytical-grid.schema.ts
@@ -4,7 +4,10 @@ import { PropertyCapacity } from '@metad/components/property'
 import { ColorPalettes } from '@metad/core'
 import { PropertyCapacity as FormlyPropertyCapacity } from '@metad/components/property'
 import {
+  AccordionWrappers,
   DataSettingsSchemaService,
+  FORMLY_GAP_2,
+  FORMLY_MY_2,
   FORMLY_ROW,
   FORMLY_W_1_2,
   PresentationVariantExpansion,
@@ -36,270 +39,280 @@ export class AnalyticalGridSchemaService extends DataSettingsSchemaService {
       ...PresentationVariantExpansion(Widgets?.Common, this.dataSettings$, this.entityType$, this.properties$),
     )
 
-    dataSettings.wrappers = ['expansion']
-
-    const className = FORMLY_W_1_2
+    
     return [
       {
         wrappers: ['panel'],
-        templateOptions: {
+        props: {
           padding: true
         },
         fieldGroup: [
           {
             key: 'title',
             type: 'input',
-            templateOptions: {
+            props: {
               label: Widgets?.Common?.Title ?? 'Title',
               required: true
             }
           }
         ]
       },
-      dataSettings,
-
-      {
-        key: 'options',
-        wrappers: ['expansion'],
-        templateOptions: {
-          label: Widgets?.AnalyticalGrid?.GridOptions ?? 'Grid Options',
-          expanded: true
+      ...AccordionWrappers([
+        {
+          key: 'dataSettings',
+          label: Widgets?.Common?.DATA_SETTINGS ?? 'Data Settings',
+          toggleable: false,
+          expanded: true,
+          fieldGroup: dataSettings.fieldGroup[0].fieldGroup
         },
-        fieldGroup: [
-          {
-            fieldGroupClassName: FORMLY_ROW,
-            fieldGroup: [
-              {
-                className,
-                key: 'showToolbar',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.showToolbar ?? 'Show Toolbar'
-                }
-              },
-              {
-                
-                className,
-                key: 'hideDataDownload',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.HideDataDownload ?? 'Hide Data Download'
-                }
-              },
-              {
-                className,
-                key: 'strip',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.Strip ?? 'Strip'
-                }
-              },
-              {
-                className,
-                key: 'grid',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.Grid ?? 'Grid'
-                }
-              },
-              {
-                className,
-                key: 'sticky',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.TableHeaderSticky ?? 'Table Header Sticky'
-                }
-              },
-              {
-                className,
-                key: 'sortable',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.Sortable ?? 'Sortable'
-                }
-              },
-              {
-                className,
-                key: 'selectable',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.ColumnSelectable ?? 'Column Selectable'
-                }
-              },
-            ]
-          },
-
-          {
-            fieldGroupClassName: FORMLY_ROW,
-            fieldGroup: [
-              {
-                className,
-                key: 'paging',
-                type: 'checkbox',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.Paging ?? 'Paging'
-                }
-              },
-              {
-                className,
-                key: 'pageSize',
-                type: 'input',
-                templateOptions: {
-                  type: 'number',
-                  label: Widgets?.AnalyticalGrid?.PageSize ?? 'Page Size'
-                }
-              },
-
-              {
-                className,
-                key: 'initialRowLevel',
-                type: 'input',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.InitialRowLevel ?? 'Initial Row Level',
-                  type: 'number'
-                }
-              },
-              {
-                className,
-                key: 'initialColumnLevel',
-                type: 'input',
-                templateOptions: {
-                  label: Widgets?.AnalyticalGrid?.InitialColumnLevel ?? 'Initial Column Level',
-                  type: 'number'
-                }
-              },
-
-              {
-                className,
-                key: 'digitsInfo',
-                type: 'input',
-                props: {
-                  label: Widgets?.AnalyticalGrid?.DigitsInfo ?? 'Digits Info',
-                }
-              },
-              {
-                className,
-                key: 'unit',
-                type: 'input',
-                props: {
-                  label: Widgets?.AnalyticalGrid?.Unit ?? 'Unit',
-                }
-              },
-              {
-                className,
-                key: 'currencyCode',
-                type: 'input',
-                props: {
-                  label: Widgets?.AnalyticalGrid?.CurrencyCode ?? 'Currency Code',
-                }
-              }
-            ]
-          }
-        ]
-      }
+      ], {expandedMulti: true}),
+      ...getGridOptionsSchema(Widgets)
     ] as any
   }
 }
 
-
-export function GridOptionsSchema(className: string, Widgets) {
-
-  return [
+export function getGridOptionsSchema(Widgets) {
+  const className = FORMLY_W_1_2
+  return AccordionWrappers([
     {
-      fieldGroupClassName: FORMLY_ROW,
+      key: 'options',
+      label: Widgets?.AnalyticalGrid?.GridOptions ?? 'Grid Options',
+      toggleable: false,
+      expanded: true,
       fieldGroup: [
         {
-          className,
-          key: 'showToolbar',
-          type: 'toggle',
-          templateOptions: {
-            label: Widgets?.AnalyticalGrid?.showToolbar ?? 'Show Toolbar'
-          }
-        }
-      ]
-    },
-
-    {
-      fieldGroupClassName: FORMLY_ROW,
-      fieldGroup: [
-        {
-          className,
-          key: 'exportExcel',
-          type: 'toggle',
-          templateOptions: {
-            label: Widgets?.AnalyticalGrid?.exportExcel ?? 'Export Excel'
-          }
+          fieldGroupClassName: FORMLY_ROW,
+          fieldGroup: [
+            {
+              className,
+              key: 'showToolbar',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.showToolbar ?? 'Show Toolbar'
+              }
+            },
+            {
+              
+              className,
+              key: 'hideDataDownload',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.HideDataDownload ?? 'Hide Data Download'
+              }
+            },
+            {
+              className,
+              key: 'strip',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.Strip ?? 'Strip'
+              }
+            },
+            {
+              className,
+              key: 'grid',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.Grid ?? 'Grid'
+              }
+            },
+            {
+              className,
+              key: 'sticky',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.TableHeaderSticky ?? 'Table Header Sticky'
+              }
+            },
+            {
+              className,
+              key: 'sortable',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.Sortable ?? 'Sortable'
+              }
+            },
+            {
+              className,
+              key: 'selectable',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.ColumnSelectable ?? 'Column Selectable'
+              }
+            },
+          ]
         },
-        {
-          className,
-          key: 'columnPinning',
-          type: 'toggle',
-          templateOptions: {
-            label: Widgets?.AnalyticalGrid?.columnPinning ?? 'Column Pinning'
-          }
-        }
-      ]
-    },
 
-    {
-      fieldGroupClassName: FORMLY_ROW,
-      fieldGroup: [
-        {
-          className,
-          key: 'allowFiltering',
-          type: 'toggle',
-          templateOptions: { label: 'Allow Filtering' }
-        },
         {
-          className,
-          key: 'filterMode',
-          type: 'select',
-          templateOptions: {
-            label: 'Allow Filtering',
-            options: [
-              { value: 'quickFilter', label: 'Quick Filter' },
-              { value: 'excelStyleFilter', label: 'Excel Style Filter' }
-            ]
-          }
+          fieldGroupClassName: FORMLY_ROW,
+          fieldGroup: [
+            {
+              className,
+              key: 'paging',
+              type: 'checkbox',
+              props: {
+                label: Widgets?.AnalyticalGrid?.Paging ?? 'Paging'
+              }
+            },
+            {
+              className,
+              key: 'pageSize',
+              type: 'input',
+              props: {
+                type: 'number',
+                label: Widgets?.AnalyticalGrid?.PageSize ?? 'Page Size'
+              }
+            },
+
+            {
+              className,
+              key: 'initialRowLevel',
+              type: 'input',
+              props: {
+                label: Widgets?.AnalyticalGrid?.InitialRowLevel ?? 'Initial Row Level',
+                type: 'number'
+              }
+            },
+            {
+              className,
+              key: 'initialColumnLevel',
+              type: 'input',
+              props: {
+                label: Widgets?.AnalyticalGrid?.InitialColumnLevel ?? 'Initial Column Level',
+                type: 'number'
+              }
+            },
+
+            {
+              className,
+              key: 'digitsInfo',
+              type: 'input',
+              props: {
+                label: Widgets?.AnalyticalGrid?.DigitsInfo ?? 'Digits Info',
+              }
+            },
+            {
+              className,
+              key: 'unit',
+              type: 'input',
+              props: {
+                label: Widgets?.AnalyticalGrid?.Unit ?? 'Unit',
+              }
+            },
+            {
+              className,
+              key: 'currencyCode',
+              type: 'input',
+              props: {
+                label: Widgets?.AnalyticalGrid?.CurrencyCode ?? 'Currency Code',
+              }
+            }
+          ]
         }
       ]
     },
-    {
-      fieldGroupClassName: FORMLY_ROW,
-      key: 'column',
-      wrappers: ['panel'],
-      fieldGroup: [
-        {
-          className,
-          key: 'resizable',
-          type: 'checkbox',
-          templateOptions: {
-            label: 'Resizable'
-          }
-        },
-        {
-          className,
-          key: 'width',
-          type: 'input',
-          templateOptions: {
-            type: 'number',
-            label: 'Width'
-          }
-        }
-      ]
-    }
-  ]
+  ])
 }
 
+// export function GridOptionsSchema(className: string, Widgets) {
+
+//   return [
+//     {
+//       fieldGroupClassName: FORMLY_ROW,
+//       fieldGroup: [
+//         {
+//           className,
+//           key: 'showToolbar',
+//           type: 'toggle',
+//           props: {
+//             label: Widgets?.AnalyticalGrid?.showToolbar ?? 'Show Toolbar'
+//           }
+//         }
+//       ]
+//     },
+
+//     {
+//       fieldGroupClassName: FORMLY_ROW,
+//       fieldGroup: [
+//         {
+//           className,
+//           key: 'exportExcel',
+//           type: 'toggle',
+//           props: {
+//             label: Widgets?.AnalyticalGrid?.exportExcel ?? 'Export Excel'
+//           }
+//         },
+//         {
+//           className,
+//           key: 'columnPinning',
+//           type: 'toggle',
+//           props: {
+//             label: Widgets?.AnalyticalGrid?.columnPinning ?? 'Column Pinning'
+//           }
+//         }
+//       ]
+//     },
+
+//     {
+//       fieldGroupClassName: FORMLY_ROW,
+//       fieldGroup: [
+//         {
+//           className,
+//           key: 'allowFiltering',
+//           type: 'toggle',
+//           props: { label: 'Allow Filtering' }
+//         },
+//         {
+//           className,
+//           key: 'filterMode',
+//           type: 'select',
+//           props: {
+//             label: 'Allow Filtering',
+//             options: [
+//               { value: 'quickFilter', label: 'Quick Filter' },
+//               { value: 'excelStyleFilter', label: 'Excel Style Filter' }
+//             ]
+//           }
+//         }
+//       ]
+//     },
+//     {
+//       fieldGroupClassName: FORMLY_ROW,
+//       key: 'column',
+//       wrappers: ['panel'],
+//       fieldGroup: [
+//         {
+//           className,
+//           key: 'resizable',
+//           type: 'checkbox',
+//           props: {
+//             label: 'Resizable'
+//           }
+//         },
+//         {
+//           className,
+//           key: 'width',
+//           type: 'input',
+//           props: {
+//             type: 'number',
+//             label: 'Width'
+//           }
+//         }
+//       ]
+//     }
+//   ]
+// }
+
 
 export function AnalyticsAnnotationSchema(Widgets, dataSettings$: Observable<DataSettings>, entityType$: Observable<EntityType>) {
   return {
     key: 'analytics',
+    fieldGroupClassName: FORMLY_GAP_2 + ' ' + FORMLY_MY_2,
     fieldGroup: [
       {
         key: 'rows',
         type: 'array',
-        templateOptions: {
+        props: {
           label: Widgets?.AnalyticalGrid?.Rows ?? 'Rows',
           hideDelete: true
         },
@@ -327,13 +340,13 @@ export function AnalyticsAnnotationSchema(Widgets, dataSettings$: Observable<Dat
       {
         key: 'columns',
         type: 'array',
-        templateOptions: {
+        props: {
           label: Widgets?.AnalyticalGrid?.Columns ?? 'Columns',
           hideDelete: true
         },
         fieldArray: {
           type: 'property-select',
-          templateOptions: {
+          props: {
             required: true,
             removable: true,
             sortable: true,
diff --git a/libs/story-angular/widgets/analytical-grid/index.ts b/libs/story-angular/widgets/analytical-grid/index.ts
index 6e562c593..9235a12d9 100644
--- a/libs/story-angular/widgets/analytical-grid/index.ts
+++ b/libs/story-angular/widgets/analytical-grid/index.ts
@@ -2,4 +2,5 @@ export * from './analytical-grid.component'
 export * from './analytical-grid.module'
 export * from './analytical-grid.schema'
 export * from './analytical-grid-styling.schema'
-export * from './analytical-grid-column.schema'
\ No newline at end of file
+export * from './analytical-grid-column.schema'
+export * from './options/grid-settings.component'
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.html b/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.html
new file mode 100644
index 000000000..5626c0807
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.html
@@ -0,0 +1,7 @@
+<formly-form class="w-full"
+    [form]="formGroup"
+    [fields]="fields()"
+    [model]="model"
+    (modelChange)="onModelChange($event)"
+    [options]="options"
+></formly-form>
\ No newline at end of file
diff --git a/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.ts b/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.ts
new file mode 100644
index 000000000..72a44d8c2
--- /dev/null
+++ b/libs/story-angular/widgets/analytical-grid/options/grid-settings.component.ts
@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common'
+import { Component, forwardRef, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { ControlValueAccessor, FormGroup, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
+import { cloneDeep } from '@metad/ocap-core'
+import { FormlyModule } from '@ngx-formly/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { map } from 'rxjs/operators'
+import { getGridOptionsSchema } from '../analytical-grid.schema'
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FormlyModule],
+  selector: 'ngm-grid-settings',
+  templateUrl: 'grid-settings.component.html',
+  styles: [],
+  host: {
+    class: 'ngm-grid-settings'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgmGridSettingsComponent)
+    }
+  ]
+})
+export class NgmGridSettingsComponent implements ControlValueAccessor {
+  private readonly translateService = inject(TranslateService)
+
+  formGroup = new FormGroup({})
+
+  fields = toSignal(
+    this.translateService.stream('Story.Widgets').pipe(
+      map((i18n) => {
+        return getGridOptionsSchema(i18n)
+      })
+    )
+  )
+
+  model = {}
+  options = {}
+
+  onChange: (input: any) => void
+  onTouched: () => void
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.formGroup.patchValue(obj)
+      this.model = cloneDeep(obj)
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable()
+  }
+  onModelChange(event) {
+    this.onChange(event)
+  }
+}
diff --git a/libs/story-angular/widgets/filter-bar/filter-bar.schema.ts b/libs/story-angular/widgets/filter-bar/filter-bar.schema.ts
index a040d0c45..d94e6b3b7 100644
--- a/libs/story-angular/widgets/filter-bar/filter-bar.schema.ts
+++ b/libs/story-angular/widgets/filter-bar/filter-bar.schema.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'
 import { Dimension, nonNullable } from '@metad/ocap-core'
 import { PropertyCapacity } from '@metad/components/property'
 import {
+  AccordionWrappers,
   DataSettingsSchemaService,
   FORMLY_ROW,
   FORMLY_W_1_2,
@@ -31,7 +32,23 @@ export class StoryFilterBarSchemaService<T extends SchemaState = SchemaState> ex
     return combineLatest([this.translate.stream('Story'), this.translate.stream('DateVariable')]).pipe(
       map(([STORY_DESIGNER, DateVariable]) => {
         this.STORY_DESIGNER = STORY_DESIGNER
-        return [this.filterBarDataSettings, this.getOptions(DateVariable)]
+        const i18nStoryWidgets = STORY_DESIGNER?.Widgets
+        return AccordionWrappers([
+          {
+            key: 'dataSettings',
+            label: i18nStoryWidgets?.Common?.DATA_SETTINGS ?? 'Data Settings',
+            toggleable: false,
+            expanded: true,
+            fieldGroup: this.filterBarDataSettings.fieldGroup[0].fieldGroup
+          },
+          {
+            key: 'options',
+            label: i18nStoryWidgets?.FilterBar?.OPTIONS ?? 'Options',
+            toggleable: false,
+            expanded: true,
+            fieldGroup: this.getOptions(DateVariable).fieldGroup
+          }
+        ], {expandedMulti: true})
       })
     )
   }
@@ -76,7 +93,7 @@ export class StoryFilterBarSchemaService<T extends SchemaState = SchemaState> ex
     const FILTER_BAR = this.STORY_DESIGNER.Widgets?.FilterBar
     return {
       key: 'options',
-      wrappers: ['expansion'],
+      wrappers: ['accordion'],
       templateOptions: {
         label: FILTER_BAR?.OPTIONS ?? 'Options',
         expanded: true
diff --git a/libs/story-angular/widgets/input-control/input-control.schema.ts b/libs/story-angular/widgets/input-control/input-control.schema.ts
index 5914cb609..965110a25 100644
--- a/libs/story-angular/widgets/input-control/input-control.schema.ts
+++ b/libs/story-angular/widgets/input-control/input-control.schema.ts
@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core'
+import { PropertyCapacity } from '@metad/components/property'
+import { ControlType, NxCoreService } from '@metad/core'
 import {
   FilterSelectionType,
   getEntityProperty,
@@ -8,11 +10,9 @@ import {
   ParameterProperty,
   Property
 } from '@metad/ocap-core'
-import { FormlyFieldConfig } from '@ngx-formly/core'
-import { PropertyCapacity } from '@metad/components/property'
-import { ControlType, NxCoreService } from '@metad/core'
 import { FilterControlType } from '@metad/story/core'
 import {
+  AccordionWrappers,
   ColorOptions,
   DataSettingsSchemaService,
   DataTable,
@@ -23,6 +23,7 @@ import {
   hierarchyAttributes,
   SelectionType
 } from '@metad/story/designer'
+import { FormlyFieldConfig } from '@ngx-formly/core'
 import { combineLatest, distinctUntilChanged, map, startWith, withLatestFrom } from 'rxjs'
 import { determineControlType } from './types'
 
@@ -79,7 +80,7 @@ export class InputControlSchemaService extends DataSettingsSchemaService {
       {
         key: 'defaultMembers',
         type: 'empty',
-        className: FORMLY_W_FULL,
+        className: FORMLY_W_FULL
       }
     ]
 
@@ -192,65 +193,29 @@ export class InputControlSchemaService extends DataSettingsSchemaService {
           }
         ]
       },
-      dataSettings,
-      {
-        key: 'options',
-        wrappers: ['expansion'],
-        props: {
-          label: i18nStoryWidgets?.InputControl?.Options ?? 'Options',
-          expanded: true
+      ...AccordionWrappers([
+        {
+          key: 'dataSettings',
+          label: i18nStoryWidgets?.Common?.DATA_SETTINGS ?? 'Data Settings',
+          toggleable: false,
+          expanded: true,
+          fieldGroup: dataSettings.fieldGroup[0].fieldGroup
         },
-        fieldGroup: [
-          {
-            fieldGroupClassName: FORMLY_ROW,
-            fieldGroup: [
-              // {
-              //   className: 'ngm-formly__col ngm-formly__col-12',
-              //   key: 'dimension',
-              //   type: 'input-control',
-              //   props: {
-              //     dataSettings: this.dataSettings$,
-              //     entityType: this.entityType$,
-              //     capacities: [PropertyCapacity.Dimension, PropertyCapacity.Parameter, PropertyCapacity.MeasureControl]
-              //   }
-              // },
-              ...optionsFieldGroup
-            ]
-          }
-        ]
-      }
+        {
+          key: 'options',
+          label: i18nStoryWidgets?.InputControl?.Options ?? 'Options',
+          toggleable: false,
+          expanded: true,
+          fieldGroup: [
+            {
+              fieldGroupClassName: FORMLY_ROW,
+              fieldGroup: [...optionsFieldGroup]
+            }
+          ]
+        }
+      ], {expandedMulti: true})
     ]
   }
-
-  // get timeFilters() {
-  //   return [
-  //     {
-  //       key: 'Full Period',
-  //       type: 'select',
-  //       props: {
-  //         label: 'Full Period',
-  //         placeholder: 'Select Full Period',
-  //         options: [
-  //           { label: 'Year', value: 'Year' },
-  //           { label: 'Month', value: 'Month' }
-  //         ]
-  //       }
-  //     },
-  //     {
-  //       key: 'To Date',
-  //       type: 'select',
-  //       props: {
-  //         label: 'To Date',
-  //         placeholder: 'Select To Date',
-  //         options: [
-  //           { label: 'Year', value: 'Year' },
-  //           { label: 'Quarter', value: 'Quarter' },
-  //           { label: 'Month', value: 'Month' }
-  //         ]
-  //       }
-  //     }
-  //   ]
-  // }
 }
 
 function ParameterSchema(property: ParameterProperty, className: string, I18N) {
@@ -404,7 +369,7 @@ function InputControlControlType(className: string, InputControl) {
   }
 }
 
-function MeasureControlFieldGroup(className: string, I18N,) {
+function MeasureControlFieldGroup(className: string, I18N) {
   return [
     {
       className,
@@ -434,7 +399,7 @@ function MeasureControlFieldGroup(className: string, I18N,) {
       key: 'hideSingleSelectionIndicator',
       type: 'checkbox',
       props: {
-        label: I18N?.InputControl?.HideSelectionIndicator ?? 'Hide Selection Indicator',
+        label: I18N?.InputControl?.HideSelectionIndicator ?? 'Hide Selection Indicator'
       }
     },
 
@@ -443,8 +408,8 @@ function MeasureControlFieldGroup(className: string, I18N,) {
       key: 'highlighted',
       type: 'checkbox',
       props: {
-        label: I18N?.InputControl?.HighlightedOptions ?? 'Highlighted Options',
+        label: I18N?.InputControl?.HighlightedOptions ?? 'Highlighted Options'
       }
-    },
+    }
   ]
-}
\ No newline at end of file
+}
diff --git a/libs/story-angular/widgets/kpi/kpi.schema.ts b/libs/story-angular/widgets/kpi/kpi.schema.ts
index ff28d6656..7fd048fa3 100644
--- a/libs/story-angular/widgets/kpi/kpi.schema.ts
+++ b/libs/story-angular/widgets/kpi/kpi.schema.ts
@@ -1,24 +1,13 @@
 import { Injectable, inject } from '@angular/core'
 import { PropertyCapacity } from '@metad/components/property'
-import { WidgetStylingSchema } from '@metad/story'
 import { NxStoryService } from '@metad/story/core'
-import {
-  Appearance,
-  IntentNavigation,
-  DataSettingsSchemaService,
-  FORMLY_W_1_2,
-  FORMLY_W_1_3,
-  FORMLY_W_FULL,
-  FontCss,
-  StylingWidgetSchema
-} from '@metad/story/designer'
+import { AccordionWrappers, DataSettingsSchemaService, FORMLY_W_1_2, IntentNavigation } from '@metad/story/designer'
 import { map } from 'rxjs/operators'
 
 @Injectable()
 export class KpiSchemaService extends DataSettingsSchemaService {
-
   protected readonly storyService = inject(NxStoryService)
-  
+
   getSchema() {
     return this.translate.stream('Story.Widgets').pipe(
       map((STORY_DESIGNER) => {
@@ -28,12 +17,27 @@ export class KpiSchemaService extends DataSettingsSchemaService {
     )
   }
 
-  getBuilderSchema(STORY_DESIGNER?: any) {
-    const dataSettings = this.generateDataSettingsSchema(STORY_DESIGNER?.Common, this.getKPIAnnotation(STORY_DESIGNER))
-
-    dataSettings.wrappers = ['expansion']
+  getBuilderSchema(i18nStoryWidgets?: any) {
+    const dataSettings = this.generateDataSettingsSchema(
+      i18nStoryWidgets?.Common,
+      this.getKPIAnnotation(i18nStoryWidgets)
+    )
 
-    return [dataSettings, this.kpiOptions]
+    return AccordionWrappers([
+      {
+        key: 'dataSettings',
+        label: i18nStoryWidgets?.Common?.DATA_SETTINGS ?? 'Data Settings',
+        toggleable: false,
+        expanded: true,
+        fieldGroup: dataSettings.fieldGroup[0].fieldGroup
+      },
+      {
+        key: 'options',
+        label: i18nStoryWidgets?.KPI?.Options ?? 'Options',
+        expanded: true,
+        fieldGroup: this.kpiOptions
+      }
+    ], {expandedMulti: true})
   }
 
   getKPIAnnotation(BUILDER) {
@@ -63,10 +67,7 @@ export class KpiSchemaService extends DataSettingsSchemaService {
                 required: true,
                 dataSettings: this.dataSettings$,
                 entityType: this.entityType$,
-                capacities: [
-                  PropertyCapacity.Measure,
-                  PropertyCapacity.MeasureAttributes
-                ]
+                capacities: [PropertyCapacity.Measure, PropertyCapacity.MeasureAttributes]
               }
             },
             {
@@ -77,10 +78,7 @@ export class KpiSchemaService extends DataSettingsSchemaService {
                 required: true,
                 dataSettings: this.dataSettings$,
                 entityType: this.entityType$,
-                capacities: [
-                  PropertyCapacity.Measure,
-                  PropertyCapacity.MeasureAttributes
-                ]
+                capacities: [PropertyCapacity.Measure, PropertyCapacity.MeasureAttributes]
               }
             }
           ]
@@ -109,10 +107,7 @@ export class KpiSchemaService extends DataSettingsSchemaService {
                   required: true,
                   dataSettings: this.dataSettings$,
                   entityType: this.entityType$,
-                  capacities: [
-                    PropertyCapacity.Measure,
-                    PropertyCapacity.MeasureAttributes
-                  ]
+                  capacities: [PropertyCapacity.Measure, PropertyCapacity.MeasureAttributes]
                 }
               },
               {
@@ -123,10 +118,7 @@ export class KpiSchemaService extends DataSettingsSchemaService {
                   required: true,
                   dataSettings: this.dataSettings$,
                   entityType: this.entityType$,
-                  capacities: [
-                    PropertyCapacity.Measure,
-                    PropertyCapacity.MeasureAttributes
-                  ]
+                  capacities: [PropertyCapacity.Measure, PropertyCapacity.MeasureAttributes]
                 }
               }
             ]
@@ -139,111 +131,73 @@ export class KpiSchemaService extends DataSettingsSchemaService {
   get kpiOptions() {
     const BUILDER = this.STORY_DESIGNER
     const className = FORMLY_W_1_2
-    return {
-      key: 'options',
-      wrappers: ['expansion'],
-      props: {
-        label: BUILDER?.KPI?.Options ?? 'Options',
-        expanded: true
-      },
-      fieldGroup: [
-        {
-          fieldGroupClassName: 'ngm-formly__row',
-          fieldGroup: [
-            {
-              className,
-              key: 'shortNumber',
-              type: 'checkbox',
-              props: {
-                label: BUILDER?.KPI?.ShortNumber ?? 'Short Number'
-              }
-            },
-            {
-              className,
-              key: 'digitsInfo',
-              type: 'input',
-              props: {
-                label: BUILDER?.KPI?.DigitsInfo ?? 'Digits Info',
-                placeholder: `Eg. 0.0-2`
-              }
-            },
-            {
-              className,
-              key: 'unit',
-              type: 'input',
-              props: {
-                label: BUILDER?.KPI?.Unit ?? 'Unit'
-              }
-            },
-            {
-              className,
-              key: 'unitSemantics',
-              type: 'select',
-              props: {
-                label: BUILDER?.KPI?.UnitSemantics ?? 'Unit Semantics',
-                options: [
-                  {
-                    value: 'currency-code',
-                    label: BUILDER?.KPI?.CurrencyCode ?? 'Currency Code'
-                  },
-                  {
-                    value: 'unit-of-measure',
-                    label: BUILDER?.KPI?.UnitOfMeasure ?? 'Unit of Measure'
-                  }
-                ]
-              }
-            },
-            {
-              className,
-              key: 'showDeviation',
-              type: 'checkbox',
-              props: {
-                label: BUILDER?.KPI?.ShowDeviation ?? 'Show Deviation'
-              }
-            },
-            {
-              className,
-              key: 'deviationText',
-              type: 'input',
-              props: {
-                label: BUILDER?.KPI?.DeviationText ?? 'Deviation Text'
-              }
-            },
-
-          ]
-        },
-        IntentNavigation(className, BUILDER, this.storyService)
-      ]
-    }
-  }
-}
-
-/**
- * 组件样式属性, 包括组件内部样式
- */
-@Injectable()
-export class KpiStylingSchemaService extends WidgetStylingSchema {
-  getSchema() {
-    return this.translate.stream('STORY_DESIGNER').pipe(
-      map((DESIGNER) => {
-        return [
-          Appearance(FORMLY_W_FULL, DESIGNER?.COMMON),
-          StylingWidgetSchema(FORMLY_W_1_2, DESIGNER),
+    return [
+      {
+        fieldGroupClassName: 'ngm-formly__row',
+        fieldGroup: [
           {
-            wrappers: ['expansion'],
+            className,
+            key: 'shortNumber',
+            type: 'checkbox',
             props: {
-              label: DESIGNER?.BUILDER?.KPI?.TitleStyle ?? 'Title Style'
-            },
-            fieldGroup: [
-              {
-                fieldGroupClassName: 'ngm-formly__row',
-                key: 'title',
-                fieldGroup: FontCss(FORMLY_W_1_3, DESIGNER?.STYLING?.CSS?.FONT)
-              }
-            ]
+              label: BUILDER?.KPI?.ShortNumber ?? 'Short Number'
+            }
+          },
+          {
+            className,
+            key: 'digitsInfo',
+            type: 'input',
+            props: {
+              label: BUILDER?.KPI?.DigitsInfo ?? 'Digits Info',
+              placeholder: `Eg. 0.0-2`
+            }
+          },
+          {
+            className,
+            key: 'unit',
+            type: 'input',
+            props: {
+              label: BUILDER?.KPI?.Unit ?? 'Unit'
+            }
+          },
+          {
+            className,
+            key: 'unitSemantics',
+            type: 'select',
+            props: {
+              label: BUILDER?.KPI?.UnitSemantics ?? 'Unit Semantics',
+              options: [
+                {
+                  value: 'currency-code',
+                  label: BUILDER?.KPI?.CurrencyCode ?? 'Currency Code'
+                },
+                {
+                  value: 'unit-of-measure',
+                  label: BUILDER?.KPI?.UnitOfMeasure ?? 'Unit of Measure'
+                }
+              ]
+            }
+          },
+          {
+            className,
+            key: 'showDeviation',
+            type: 'checkbox',
+            props: {
+              label: BUILDER?.KPI?.ShowDeviation ?? 'Show Deviation'
+            }
+          },
+          {
+            className,
+            key: 'deviationText',
+            type: 'input',
+            props: {
+              label: BUILDER?.KPI?.DeviationText ?? 'Deviation Text'
+            }
           }
-        ] as any[]
-      })
-    )
+        ]
+      },
+      IntentNavigation(className, BUILDER, this.storyService)
+    ]
   }
 }
+
diff --git a/libs/story-angular/widgets/kpi/kpi.styling.schema.ts b/libs/story-angular/widgets/kpi/kpi.styling.schema.ts
index 2c120a07f..c3b226789 100644
--- a/libs/story-angular/widgets/kpi/kpi.styling.schema.ts
+++ b/libs/story-angular/widgets/kpi/kpi.styling.schema.ts
@@ -7,55 +7,41 @@ import { map } from 'rxjs/operators'
 export class KpiStylingSchema extends BaseDesignerSchemaService<BaseSchemaState<StoryWidget['styling']>> {
   getSchema() {
     return this.translate.stream('Story').pipe(
-      map((STORY) => {
-        return [
-          {
-            wrappers: ['expansion'],
-            props: {
-              label: STORY?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
-              expanded: false
-            },
-            fieldGroup: [
-              {
-                key: 'component',
-                type: 'styling',
-                props: {
-                }
-              }
-            ]
+      map((STORY) => [
+        {
+          wrappers: ['accordion'],
+          props: {
+            expandedMulti: true,
+            elevationZ: true
           },
-          {
-            wrappers: ['expansion'],
-            props: {
-              label: STORY?.Widgets?.Common?.TitleStyling ?? 'Title Styling',
-              expanded: false
+          fieldGroup: [
+            {
+              key: 'component',
+              type: 'styling',
+              props: {
+                label: STORY?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
+                expanded: false
+              }
             },
-            fieldGroup: [
-              {
-                key: 'title',
-                type: 'styling',
-                props: {
-                }
+            {
+              key: 'title',
+              type: 'styling',
+              props: {
+                label: STORY?.Widgets?.Common?.TitleStyling ?? 'Title Styling',
+                expanded: false
               }
-            ]
-          },
-          {
-            wrappers: ['expansion'],
-            props: {
-              label: STORY?.Widgets?.Common?.ValueStyling ?? 'Value Styling',
-              expanded: false
             },
-            fieldGroup: [
-              {
-                key: 'value',
-                type: 'styling',
-                props: {
-                }
+            {
+              key: 'value',
+              type: 'styling',
+              props: {
+                label: STORY?.Widgets?.Common?.ValueStyling ?? 'Value Styling',
+                expanded: false
               }
-            ]
-          },
-        ]
-      })
+            }
+          ]
+        }
+      ])
     )
   }
 }
diff --git a/libs/story-angular/widgets/pivot-grid/pivot-grid.schema.ts b/libs/story-angular/widgets/pivot-grid/pivot-grid.schema.ts
index e1a8989b0..e82cc2d85 100644
--- a/libs/story-angular/widgets/pivot-grid/pivot-grid.schema.ts
+++ b/libs/story-angular/widgets/pivot-grid/pivot-grid.schema.ts
@@ -1,8 +1,7 @@
 import { Injectable, Injector } from '@angular/core'
 import { FormlyFieldConfig } from '@ngx-formly/core'
 import { getEntityProperty } from '@metad/ocap-core'
-import { DataSettingsSchemaService, SelectionVariant } from '@metad/story/designer'
-import { GridSelectionMode } from 'igniteui-angular'
+import { DataSettingsSchemaService } from '@metad/story/designer'
 import { isNil, negate } from 'lodash-es'
 import { combineLatest } from 'rxjs'
 import { map, startWith } from 'rxjs/operators'
@@ -30,10 +29,8 @@ export class PivotGridSchemaService extends DataSettingsSchemaService {
     const dataSettings = this.generateDataSettingsSchema(
       BUILDER,
       this.analytics,
-      SelectionVariant(BUILDER, this.dataSettings$)
+      // SelectionVariant(BUILDER, this.dataSettings$)
     )
-    // dataSettings.wrappers = ['expansion']
-    // dataSettings.templateOptions.enableSelectFields = true
 
     const schema = [
       {
@@ -54,7 +51,6 @@ export class PivotGridSchemaService extends DataSettingsSchemaService {
       },
       dataSettings,
       // {
-      //   wrappers: ['expansion'],
       //   templateOptions: {
       //     label: '数据配置',
       //     enableSelectFields: true,
@@ -66,7 +62,6 @@ export class PivotGridSchemaService extends DataSettingsSchemaService {
       // },
       {
         key: 'options',
-        wrappers: ['expansion'],
         templateOptions: {
           label: BUILDER.PIVOT_GRID?.OPTIONS ?? 'Grid Options',
           expanded: true
@@ -157,7 +152,7 @@ export class PivotGridSchemaService extends DataSettingsSchemaService {
                 .map((propertyPath) => getEntityProperty(entityType, propertyPath))
                 .filter(negate(isNil))
                 .map((property) => {
-                  return { value: property.name, label: property.label || property.name }
+                  return { value: property.name, label: property.caption || property.name }
                 })
             })
           )
@@ -290,9 +285,9 @@ export function GridOptionsSchema(BUILDER) {
       templateOptions: {
         label: BUILDER?.PIVOT_GRID?.ColumnSelection ?? 'Column Selection',
         options: [
-          { value: GridSelectionMode.none, label: 'None' },
-          { value: GridSelectionMode.single, label: 'Single' },
-          { value: GridSelectionMode.multiple, label: 'Multiple' }
+          // { value: GridSelectionMode.none, label: 'None' },
+          // { value: GridSelectionMode.single, label: 'Single' },
+          // { value: GridSelectionMode.multiple, label: 'Multiple' }
         ]
       }
     },
diff --git a/libs/story-angular/widgets/swiper/styling.schema.ts b/libs/story-angular/widgets/swiper/styling.schema.ts
index 25164b1b3..0fb0003dd 100644
--- a/libs/story-angular/widgets/swiper/styling.schema.ts
+++ b/libs/story-angular/widgets/swiper/styling.schema.ts
@@ -1,6 +1,12 @@
 import { Injectable } from '@angular/core'
 import { StoryWidget } from '@metad/story/core'
-import { Appearance, BaseDesignerSchemaService, BaseSchemaState, FORMLY_W_FULL } from '@metad/story/designer'
+import {
+  Appearances,
+  BaseDesignerSchemaService,
+  BaseSchemaState,
+  FORMLY_ROW,
+  FORMLY_W_1_2
+} from '@metad/story/designer'
 import { map } from 'rxjs/operators'
 
 @Injectable()
@@ -10,34 +16,39 @@ export class SlideStylingSchema extends BaseDesignerSchemaService<BaseSchemaStat
       map((STORY) => {
         return [
           {
-            wrappers: ['expansion'],
+            wrappers: ['accordion'],
             props: {
-              label: STORY?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
-              expanded: true
+              expandedMulti: true,
+              elevationZ: true
             },
             fieldGroup: [
               {
                 key: 'component',
                 type: 'styling',
-                props: {}
-              }
-            ]
-          },
-          {
-            wrappers: ['expansion'],
-            props: {
-              label: STORY?.Widgets?.Common?.SlideStyling ?? 'Slide Styling',
-              expanded: false
-            },
-            fieldGroup: [
+                props: {
+                  label: STORY?.Widgets?.Common?.ComponentStyling ?? 'Component Styling',
+                  expanded: true
+                }
+              },
               {
                 key: 'slide',
                 type: 'styling',
-                props: {}
+                props: {
+                  label: STORY?.Widgets?.Common?.SlideStyling ?? 'Slide Styling',
+                  expanded: false
+                }
+              },
+              {
+                key: 'appearance',
+                props: {
+                  label: STORY?.Widgets?.Common?.Appearance ?? 'Appearance',
+                  expanded: true
+                },
+                fieldGroupClassName: FORMLY_ROW,
+                fieldGroup: Appearances(FORMLY_W_1_2, STORY?.Widgets?.Common)
               }
             ]
-          },
-          Appearance(FORMLY_W_FULL, STORY?.Widgets?.Common)
+          }
         ]
       })
     )
diff --git a/libs/story-angular/widgets/swiper/swiper.schema.ts b/libs/story-angular/widgets/swiper/swiper.schema.ts
index d328886f1..64456365f 100644
--- a/libs/story-angular/widgets/swiper/swiper.schema.ts
+++ b/libs/story-angular/widgets/swiper/swiper.schema.ts
@@ -20,12 +20,11 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
             key: 'options',
             fieldGroup: [
               {
-                fieldGroupClassName: FORMLY_ROW,
-                wrappers: ['expansion'],
+                wrappers: ['panel'],
                 props: {
-                  label: BUILDER?.Swiper?.Options ?? 'Options',
-                  expanded: true
+                  padding: true
                 },
+                fieldGroupClassName: FORMLY_ROW,
                 fieldGroup: [
                   {
                     className,
@@ -241,13 +240,13 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
               {
                 key: 'slides',
                 type: 'table-inline',
-                wrappers: ['expansion'],
+                wrappers: ['panel'],
                 props: {
                   label: BUILDER?.Swiper?.Slides ?? 'Slides',
-                  expanded: true
+                  padding: true
                 },
                 fieldArray: {
-                  fieldGroupClassName: 'ngm-formly__row',
+                  fieldGroupClassName: FORMLY_ROW,
                   fieldGroup: [
                     {
                       key: 'type',
@@ -299,7 +298,7 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
                   label: BUILDER?.Swiper?.Autoplay ?? 'Autoplay',
                   fieldGroup: [
                     {
-                      fieldGroupClassName: 'ngm-formly__row',
+                      fieldGroupClassName: FORMLY_ROW,
                       fieldGroup: [
                         {
                           className,
@@ -365,7 +364,7 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
                   label: BUILDER?.Swiper?.Pagination ?? 'Pagination',
                   fieldGroup: [
                     {
-                      fieldGroupClassName: 'ngm-formly__row',
+                      fieldGroupClassName: FORMLY_ROW,
                       fieldGroup: [
                         {
                           className,
@@ -422,7 +421,7 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
                   label: BUILDER?.Swiper?.KeyboardControl ?? 'Keyboard Control',
                   fieldGroup: [
                     {
-                      fieldGroupClassName: 'ngm-formly__row',
+                      fieldGroupClassName: FORMLY_ROW,
                       fieldGroup: [
                         {
                           className,
@@ -455,10 +454,10 @@ export class SwiperSchemaService extends DataSettingsSchemaService {
               ]),
 
               {
-                fieldGroupClassName: 'ngm-formly__row',
+                fieldGroupClassName: FORMLY_ROW,
                 key: 'breakpoints',
                 type: 'table-inline',
-                wrappers: ['expansion'],
+                wrappers: ['accordion'],
                 props: {
                   label: BUILDER?.Swiper?.Breakpoints ?? 'Breakpoints',
                   expanded: true
diff --git a/libs/story-angular/widgets/table/igx-grid/smart-grid.schema.ts b/libs/story-angular/widgets/table/igx-grid/smart-grid.schema.ts
index e10d681a0..c28077315 100644
--- a/libs/story-angular/widgets/table/igx-grid/smart-grid.schema.ts
+++ b/libs/story-angular/widgets/table/igx-grid/smart-grid.schema.ts
@@ -47,9 +47,6 @@ export class SmartGridSettingsSchemaService extends PivotGridSchemaService {
       this.selectionVariant as any
     )
 
-    dataSettings.wrappers = ['expansion']
-    dataSettings.templateOptions.enableSelectFields = true
-
     return [
       {
         wrappers: ['panel'],
@@ -71,7 +68,6 @@ export class SmartGridSettingsSchemaService extends PivotGridSchemaService {
 
       {
         key: 'options',
-        wrappers: ['expansion'],
         templateOptions: {
           label: 'Grid Options',
         },
diff --git a/packages/analytics/src/core/features.ts b/packages/analytics/src/core/features.ts
index 857f5aab0..615aaf5b7 100644
--- a/packages/analytics/src/core/features.ts
+++ b/packages/analytics/src/core/features.ts
@@ -1,6 +1,38 @@
-import { AnalyticsFeatures, IFeatureCreateInput } from '@metad/contracts'
+import { AnalyticsFeatures, FeatureEnum, IFeatureCreateInput } from '@metad/contracts'
 
-export const DEFAULT_FEATURES: IFeatureCreateInput[] = [
+export const DEFAULT_FEATURES: Partial<IFeatureCreateInput>[] = [
+	{
+		code: FeatureEnum.FEATURE_HOME,
+		children: [
+			{
+				name: 'Catalog',
+				code: AnalyticsFeatures.FEATURE_HOME_CATALOG,
+				description: 'Catalog of Story, Indicator and Models',
+				link: 'catalog',
+				isEnabled: true,
+				icon: 'catalog-outline',
+				status: 'primary'
+			},
+			{
+				name: 'Trend',
+				code: AnalyticsFeatures.FEATURE_HOME_TREND,
+				description: 'Trend of Public Story Dashboards',
+				link: 'trend',
+				isEnabled: true,
+				icon: 'trend-outline',
+				status: 'primary'
+			},
+			{
+				name: 'Insight',
+				code: AnalyticsFeatures.FEATURE_HOME_INSIGHT,
+				description: 'Insight',
+				link: 'insight',
+				isEnabled: true,
+				icon: 'insight-outline',
+				status: 'primary'
+			},
+		]
+	},
 	{
 		name: 'Business Area',
 		code: AnalyticsFeatures.FEATURE_BUSINESS_AREA,
@@ -43,50 +75,50 @@ export const DEFAULT_FEATURES: IFeatureCreateInput[] = [
 				status: 'warning'
 			},
             {
-				name: 'My Indicator',
-				code: AnalyticsFeatures.FEATURE_INDICATOR_MY,
-				description: 'My Indicator',
-				image: 'estimate-received.png',
-				link: 'indicator/my',
-				isEnabled: true,
-				icon: 'file-text-outline',
-				status: 'warning'
-			}
-		]
-	},
-	{
-		name: 'Insight',
-		code: AnalyticsFeatures.FEATURE_INSIGHT,
-		description: 'Manage and View Insight Model',
-		image: 'estimate.png',
-		link: 'insight',
-		isEnabled: true,
-		icon: 'file-text-outline',
-		status: 'success',
-		children: [
-			{
-				name: 'Insight Admin',
-				code: AnalyticsFeatures.FEATURE_INSIGHT_ADMIN,
-				description:
-					'Manage Insight',
-				image: 'estimate-received.png',
-				link: 'insight/admin',
-				isEnabled: true,
-				icon: 'file-text-outline',
-				status: 'warning'
-			},
-            {
-				name: 'Insight Model Viewer',
-				code: AnalyticsFeatures.FEATURE_INSIGHT_VIEWER,
-				description: 'View Insight Model',
-				image: 'estimate-received.png',
-				link: 'insight',
+				name: 'Indicator Application',
+				code: AnalyticsFeatures.FEATURE_INDICATOR_APP,
+				description: 'View Indicators in Application',
+				image: 'indicator.png',
+				link: 'indicator-app',
 				isEnabled: true,
 				icon: 'file-text-outline',
 				status: 'warning'
 			}
 		]
 	},
+	// {
+	// 	name: 'Insight',
+	// 	code: AnalyticsFeatures.FEATURE_INSIGHT,
+	// 	description: 'Manage and View Insight Model',
+	// 	image: 'estimate.png',
+	// 	link: 'insight',
+	// 	isEnabled: true,
+	// 	icon: 'file-text-outline',
+	// 	status: 'success',
+	// 	children: [
+	// 		{
+	// 			name: 'Insight Admin',
+	// 			code: AnalyticsFeatures.FEATURE_INSIGHT_ADMIN,
+	// 			description:
+	// 				'Manage Insight',
+	// 			image: 'estimate-received.png',
+	// 			link: 'insight/admin',
+	// 			isEnabled: true,
+	// 			icon: 'file-text-outline',
+	// 			status: 'warning'
+	// 		},
+    //         {
+	// 			name: 'Insight Model Viewer',
+	// 			code: AnalyticsFeatures.FEATURE_INSIGHT_VIEWER,
+	// 			description: 'View Insight Model',
+	// 			image: 'estimate-received.png',
+	// 			link: 'insight',
+	// 			isEnabled: true,
+	// 			icon: 'file-text-outline',
+	// 			status: 'warning'
+	// 		}
+	// 	]
+	// },
 	{
 		name: 'Story Model',
 		code: AnalyticsFeatures.FEATURE_MODEL,
@@ -106,5 +138,15 @@ export const DEFAULT_FEATURES: IFeatureCreateInput[] = [
 		isEnabled: true,
 		icon: 'file-text-outline',
 		status: 'success',
+	},
+	{
+		name: 'Project',
+		code: AnalyticsFeatures.FEATURE_PROJECT,
+		description: 'Go to Project, Manage Story and Indicator',
+		image: 'project.png',
+		link: 'project',
+		isEnabled: true,
+		icon: 'project-outline',
+		status: 'success',
 	}
 ]
\ No newline at end of file
diff --git a/packages/analytics/src/core/prepare.ts b/packages/analytics/src/core/prepare.ts
index 9a02e5a1e..354e826d5 100644
--- a/packages/analytics/src/core/prepare.ts
+++ b/packages/analytics/src/core/prepare.ts
@@ -1,16 +1,17 @@
-import { Type } from '@nestjs/common'
+import { IFeatureCreateInput } from '@metad/contracts'
+import { setConfig } from '@metad/server-config'
 import {
 	coreEntities,
 	coreSubscribers,
 	DEFAULT_FEATURES as SERVER_DEFAULT_FEATURES,
 	setDefaultFeatures,
-	setDefaultRolePermissions,
+	setDefaultRolePermissions
 } from '@metad/server-core'
-import { setConfig } from '@metad/server-config'
+import { Type } from '@nestjs/common'
 import { ALL_ENTITIES } from './entities/index'
+import { coreSubscribers as analyticsSubscribers } from './entities/subscribers'
 import { DEFAULT_FEATURES } from './features'
 import { ANALYTICS_ROLE_PERMISSIONS } from './role-permissions'
-import { coreSubscribers as analyticsSubscribers } from './entities/subscribers'
 
 export function prepare() {
 	const allEntities = coreEntities as Array<Type<any>>
@@ -19,13 +20,22 @@ export function prepare() {
 		dbConnectionOptions: {
 			entities: allEntities,
 			subscribers: [...coreSubscribers, ...analyticsSubscribers]
-		},
+		}
 	})
 
+	// Append Features of analytics project into System default features
 	const features = [...SERVER_DEFAULT_FEATURES]
-	features.push(...DEFAULT_FEATURES)
+	DEFAULT_FEATURES.forEach((feature) => {
+		const index = features.findIndex((item) => item.code === feature.code)
+		if (index > -1) {
+			features[index].children.push(...feature.children)
+		} else {
+			features.push(feature as IFeatureCreateInput)
+		}
+	})
 	setDefaultFeatures(features)
 
+	// Append role permissions of analytics project into System default role permissions
 	ANALYTICS_ROLE_PERMISSIONS.forEach(({ role, defaultEnabledPermissions }) => {
 		setDefaultRolePermissions(role, defaultEnabledPermissions)
 	})
diff --git a/packages/angular/_index.scss b/packages/angular/_index.scss
index ba15a44b5..d8417a160 100644
--- a/packages/angular/_index.scss
+++ b/packages/angular/_index.scss
@@ -10,4 +10,5 @@
 @import './controls/smart-filter/_smart-filter.component';
 @import './analytical-grid/_analytical-grid.component';
 @import './core/style/accordion-theme';
-@import './core/style/mat-autocomplete-theme';
\ No newline at end of file
+@import './core/style/mat-autocomplete-theme';
+@import './core/directives/_appearance';
\ No newline at end of file
diff --git a/packages/angular/common/select/select/select.component.html b/packages/angular/common/select/select/select.component.html
index f36f4088a..56be7c96a 100644
--- a/packages/angular/common/select/select/select.component.html
+++ b/packages/angular/common/select/select/select.component.html
@@ -1,4 +1,4 @@
-<label *ngIf="label" class="ngm-select-label">
+<label *ngIf="label" class="ngm-select-label" [title]="label">
   {{label}}
 </label>
 
diff --git a/packages/angular/common/slider-input/slider-input.component.html b/packages/angular/common/slider-input/slider-input.component.html
index e0cedab83..ab5e9bd0a 100644
--- a/packages/angular/common/slider-input/slider-input.component.html
+++ b/packages/angular/common/slider-input/slider-input.component.html
@@ -1,5 +1,5 @@
-<div class="flex justify-start items-center text-sm p-1">
-    <label class="flex-1 whitespace-nowrap">{{label}}</label>
+<div class="flex justify-start items-center text-sm p-1" [title]="label">
+    <label class="flex-1 whitespace-nowrap overflow-hidden text-ellipsis">{{label}}</label>
   
     <input matInput type="number" [(ngModel)]="model" [disabled]="disabled" (ngModelChange)="onValueChange($event)">
     <span *ngIf="unit">{{unit}}</span>
diff --git a/packages/angular/controls/member-tree/member-tree.component.html b/packages/angular/controls/member-tree/member-tree.component.html
index f8beff52a..3d2d7f66c 100644
--- a/packages/angular/controls/member-tree/member-tree.component.html
+++ b/packages/angular/controls/member-tree/member-tree.component.html
@@ -24,7 +24,7 @@
       <mat-checkbox
         [checked]="isSelected(node.raw)"
         [indeterminate]="isPartiallySelected(node)"
-        (change)="itemSelectionToggle(node)"
+        (change)="itemSelectionToggle(node, $event)"
       >
         <ngm-display-behaviour [displayBehaviour]="displayBehaviour"
           [option]="{value: node.key, caption: node.caption}"
diff --git a/packages/angular/controls/member-tree/member-tree.component.ts b/packages/angular/controls/member-tree/member-tree.component.ts
index ab514c035..9f615badc 100644
--- a/packages/angular/controls/member-tree/member-tree.component.ts
+++ b/packages/angular/controls/member-tree/member-tree.component.ts
@@ -20,8 +20,7 @@ import {
   IMember
 } from '@metad/ocap-core'
 import { ComponentStore } from '@metad/store'
-import { isEmpty } from 'lodash-es'
-import { Observable } from 'rxjs'
+import { BehaviorSubject, Observable } from 'rxjs'
 import { combineLatestWith, debounceTime, distinctUntilChanged, filter, map, startWith, switchMap, tap } from 'rxjs/operators'
 import { NgmSmartFilterService } from '../smart-filter.service'
 import { TreeControlOptions } from '../types'
@@ -29,9 +28,9 @@ import { CommonModule } from '@angular/common'
 import { NgmCommonModule } from '@metad/ocap-angular/common'
 import { MatIconModule } from '@angular/material/icon'
 import { ScrollingModule } from '@angular/cdk/scrolling'
-import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { MatButtonModule } from '@angular/material/button'
 
 export interface TreeItemFlatNode<T> extends FlatTreeNode<T> {
@@ -92,6 +91,7 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   @Input() disabled: boolean
 
   @Output() loadingChanging = new EventEmitter<boolean>()
+  @Output() change = new EventEmitter<MatCheckboxChange>()
 
   itemSize = 40
   treeNodePaddingIndent = 20
@@ -104,12 +104,45 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   treeFlattener: MatTreeFlattener<TreeNodeInterface<T>, TreeItemFlatNode<T>>
   dataSource: MatTreeFlatDataSource<TreeNodeInterface<T>, TreeItemFlatNode<T>>
   /** The selection for checklist */
-  checklistSelection = new SelectionModel<PrimitiveType>(false, [])
+  private selectionModel$ = new BehaviorSubject(new SelectionModel<PrimitiveType>(false, []))
+  get selectionModel() {
+    return this.selectionModel$.value
+  }
 
   public readonly options$ = this.select((state) => state.options)
   public readonly onlyLeaves$ = this.options$.pipe(map((options) => options?.onlyLeaves), distinctUntilChanged())
   public readonly loading$ = this.smartFilterService.loading$
 
+  readonly slicer = toSignal(this.selectionModel$.pipe(switchMap((selectionModel) => selectionModel.changed)).pipe(
+    map(() => {
+      const selected = this.selectionModel.selected
+      let nodes = selected.map((value) => this.keyNodeMap.get(value)).filter(Boolean)
+      if (this.options?.treeSelectionMode === TreeSelectionMode.ChildrenOnly) {
+        nodes = nodes.filter(
+          (node) =>
+            !this.treeControl.isExpandable(node) ||
+            !(this.childrenPartiallySelected(node) || this.childrenAllSelected(node))
+        )
+      } else if (this.options?.treeSelectionMode === TreeSelectionMode.DescendantsOnly) {
+        nodes = nodes.filter(
+          (node) =>
+            !this.treeControl.isExpandable(node) ||
+            !(this.descendantsPartiallySelected(node) || this.descendantsAllSelected(node))
+        )
+      }
+
+      const slicer: ISlicer = {
+        dimension: this.dimension,
+        members: nodes.map((node) => ({
+          value: node.key,
+          key: node.key,
+          caption: node.caption
+        } as IMember))
+      }
+      return slicer
+    }),
+  ))
+
   onChange: (input: any) => void
 
   // Subscribers
@@ -123,8 +156,8 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
         return null
       }),
       tap((treeNodes) => {
-        if (treeNodes[0] && this.options?.autoActiveFirst && this.checklistSelection.isEmpty()) {
-          this.checklistSelection.select(treeNodes[0].key)
+        if (treeNodes[0] && this.options?.autoActiveFirst && this.selectionModel.isEmpty()) {
+          this.selectionModel.select(treeNodes[0].key)
         }
       }),
       combineLatestWith(this.searchControl.valueChanges.pipe(startWith(null), distinctUntilChanged())),
@@ -161,6 +194,7 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   private _loadingSub = this.smartFilterService.loading$.pipe(takeUntilDestroyed()).subscribe((loading) => {
     this.loadingChanging.emit(loading)
   })
+
   constructor(private smartFilterService: NgmSmartFilterService) {
     super({})
 
@@ -173,7 +207,7 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   }
 
   ngOnInit() {
-    this.onSelectionChange(this.checklistSelection)
+    // this.onSelectionChange(this.checklistSelection)
   }
 
   ngOnChanges({ dataSettings, dimension, options, appearance }: SimpleChanges): void {
@@ -186,18 +220,20 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
     if (options?.currentValue) {
       this.smartFilterService.options = { ...options.currentValue, dimension: this.dimension }
 
-      if (this.checklistSelection.isMultipleSelection()) {
+      if (this.selectionModel.isMultipleSelection()) {
         if (options.currentValue.selectionType !== FilterSelectionType.Multiple) {
-          this.checklistSelection = new SelectionModel<PrimitiveType>(false, [])
-          this.onSelectionChange(this.checklistSelection)
+          // this.checklistSelection = new SelectionModel<PrimitiveType>(false, [])
+          // this.onSelectionChange(this.checklistSelection)
+          this.selectionModel$.next(new SelectionModel<PrimitiveType>(false, []))
         }
       } else if (options.currentValue.selectionType === FilterSelectionType.Multiple) {
-        this.checklistSelection = new SelectionModel<PrimitiveType>(true, [])
-        this.onSelectionChange(this.checklistSelection)
+        // this.checklistSelection = new SelectionModel<PrimitiveType>(true, [])
+        // this.onSelectionChange(this.checklistSelection)
+        this.selectionModel$.next(new SelectionModel<PrimitiveType>(true, []))
       }
 
       if (options.currentValue.defaultMembers) {
-        this.checklistSelection.select(...options.currentValue.defaultMembers.map((member) => member.value))
+        this.selectionModel.select(...options.currentValue.defaultMembers.map((member) => member.value))
       }
     }
 
@@ -219,9 +255,11 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   }
 
   writeValue(obj: any): void {
-    if (obj?.members) {
-      this.checklistSelection.clear()
-      this.checklistSelection.select(...obj.members.map(({ value }) => value))
+    if (obj) {
+      this.selectionModel.clear()
+      if (obj.members) {
+        this.selectionModel.select(...obj.members.map(({ value }) => value))
+      }
     }
   }
   registerOnChange(fn: any): void {
@@ -318,12 +356,12 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
   }
 
   isSelected(row: T) {
-    return this.checklistSelection.isSelected(row.memberKey)
+    return this.selectionModel.isSelected(row.memberKey)
   }
 
-  itemSelectionToggle(node: TreeItemFlatNode<T>) {
+  itemSelectionToggle(node: TreeItemFlatNode<T>, event: MatCheckboxChange) {
     const member = node.raw.memberKey
-    this.checklistSelection.toggle(member)
+    this.selectionModel.toggle(member)
     const level = this.treeControl.getLevel(node)
 
     if (
@@ -335,9 +373,9 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
         .filter((node) => node.level === level + 1)
         .map((node) => node.raw.memberKey)
 
-      this.checklistSelection.isSelected(member)
-        ? this.checklistSelection.select(...children)
-        : this.checklistSelection.deselect(...children)
+      this.selectionModel.isSelected(member)
+        ? this.selectionModel.select(...children)
+        : this.selectionModel.deselect(...children)
     } else if (
       this.options?.treeSelectionMode === TreeSelectionMode.SelfDescendants ||
       this.options?.treeSelectionMode === TreeSelectionMode.DescendantsOnly
@@ -345,50 +383,52 @@ export class NgmMemberTreeComponent<T extends IDimensionMember = IDimensionMembe
       const descendants = this.treeControl
         .getDescendants(node)
         .map((node) => node.raw.memberKey)
-      this.checklistSelection.isSelected(member)
-        ? this.checklistSelection.select(...descendants)
-        : this.checklistSelection.deselect(...descendants)
+      this.selectionModel.isSelected(member)
+        ? this.selectionModel.select(...descendants)
+        : this.selectionModel.deselect(...descendants)
     } else {
       // TreeSelectionMode.Individual
       // this.checklistSelection.toggle(member)
     }
-  }
 
-  readonly onSelectionChange = this.effect((selection$: Observable<SelectionModel<PrimitiveType>>) => {
-    return selection$.pipe(
-      switchMap((selection) => selection.changed),
-      filter(() => !isEmpty(this.treeControl.dataNodes)),
-      // 防止连续 clear+select 导致的空 members
-      debounceTime(100),
-      map(() => this.checklistSelection.selected),
-      tap((selected: Array<PrimitiveType>) => {
-        let nodes = selected.map((value) => this.keyNodeMap.get(value)).filter(Boolean)
-        if (this.options?.treeSelectionMode === TreeSelectionMode.ChildrenOnly) {
-          nodes = nodes.filter(
-            (node) =>
-              !this.treeControl.isExpandable(node) ||
-              !(this.childrenPartiallySelected(node) || this.childrenAllSelected(node))
-          )
-        } else if (this.options?.treeSelectionMode === TreeSelectionMode.DescendantsOnly) {
-          nodes = nodes.filter(
-            (node) =>
-              !this.treeControl.isExpandable(node) ||
-              !(this.descendantsPartiallySelected(node) || this.descendantsAllSelected(node))
-          )
-        }
+    this.onChange(this.slicer())
+  }
 
-        const slicer: ISlicer = {
-          dimension: this.dimension,
-          members: nodes.map((node) => ({
-            value: node.key,
-            key: node.key,
-            caption: node.caption
-          } as IMember))
-        }
-        this.onChange?.(slicer)
-      })
-    )
-  })
+  // readonly onSelectionChange = this.effect((selection$: Observable<SelectionModel<PrimitiveType>>) => {
+  //   return selection$.pipe(
+  //     switchMap((selection) => selection.changed),
+  //     filter(() => !isEmpty(this.treeControl.dataNodes)),
+  //     // 防止连续 clear+select 导致的空 members
+  //     debounceTime(100),
+  //     map(() => this.selectionModel.selected),
+  //     tap((selected: Array<PrimitiveType>) => {
+  //       let nodes = selected.map((value) => this.keyNodeMap.get(value)).filter(Boolean)
+  //       if (this.options?.treeSelectionMode === TreeSelectionMode.ChildrenOnly) {
+  //         nodes = nodes.filter(
+  //           (node) =>
+  //             !this.treeControl.isExpandable(node) ||
+  //             !(this.childrenPartiallySelected(node) || this.childrenAllSelected(node))
+  //         )
+  //       } else if (this.options?.treeSelectionMode === TreeSelectionMode.DescendantsOnly) {
+  //         nodes = nodes.filter(
+  //           (node) =>
+  //             !this.treeControl.isExpandable(node) ||
+  //             !(this.descendantsPartiallySelected(node) || this.descendantsAllSelected(node))
+  //         )
+  //       }
+
+  //       const slicer: ISlicer = {
+  //         dimension: this.dimension,
+  //         members: nodes.map((node) => ({
+  //           value: node.key,
+  //           key: node.key,
+  //           caption: node.caption
+  //         } as IMember))
+  //       }
+  //       // this.onChange?.(slicer)
+  //     })
+  //   )
+  // })
 
   toggleExpand() {
     this.unfold = !this.unfold
diff --git a/packages/angular/controls/value-help/value-help.component.html b/packages/angular/controls/value-help/value-help.component.html
index 208b83bd3..5c6531101 100644
--- a/packages/angular/controls/value-help/value-help.component.html
+++ b/packages/angular/controls/value-help/value-help.component.html
@@ -1,5 +1,5 @@
 <div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
-    {{ 'Ngm.Controls.ValueHelp.Title' | translate: {Default: 'Set Filters', value: dimension?.dimension} }}
+    {{ 'Ngm.Controls.ValueHelp.Title' | translate: {Default: 'Set Filters for ' + dimension?.dimension, value: dimension?.dimension} }}
 </div>
 
 <div class="flex px-4">
diff --git a/packages/angular/controls/value-help/value-help.component.ts b/packages/angular/controls/value-help/value-help.component.ts
index fb22b4d35..7070457bb 100644
--- a/packages/angular/controls/value-help/value-help.component.ts
+++ b/packages/angular/controls/value-help/value-help.component.ts
@@ -81,15 +81,15 @@ export class NgmValueHelpComponent implements OnInit {
   set dataSettings(value) {
     this.dataSettings$.set(value)
   }
-  private dataSettings$ = signal<DataSettings>(null) // new BehaviorSubject<DataSettings>(null)
+  private dataSettings$ = signal<DataSettings>(null)
 
   @Input() get dimension(): Dimension {
-    return this.dimension$()
+    return this._dimension()
   }
   set dimension(value) {
-    this.dimension$.set(value)
+    this._dimension.set(value)
   }
-  private dimension$ = signal<Dimension>(null) // new BehaviorSubject<Dimension>(null)
+  private _dimension = signal<Dimension>(null)
 
   @Input() options = {
     stickyHeader: true
@@ -184,7 +184,7 @@ export class NgmValueHelpComponent implements OnInit {
   presentation: PresentationEnum
   expandAvailables = false
 
-  entityType = toSignal(
+  readonly entityType = toSignal(
     toObservable(this.dataSettings$).pipe(
       filter((dataSettings) => !!dataSettings?.dataSource && !!dataSettings?.entitySet),
       switchMap((dataSettings) => this.dsCoreService.selectEntitySet(dataSettings.dataSource, dataSettings.entitySet)),
@@ -192,9 +192,9 @@ export class NgmValueHelpComponent implements OnInit {
     )
   )
 
-  hierarchies = computed<PropertyHierarchy[]>(() => {
+  readonly hierarchies = computed<PropertyHierarchy[]>(() => {
     const entityType = this.entityType()
-    const dimension = this.dimension$()
+    const dimension = this._dimension()
     if (entityType && dimension) {
       const hierarchies = getEntityProperty(entityType, dimension)?.hierarchies
       if (hierarchies?.length) {
diff --git a/packages/angular/core/directives/_appearance-theme.scss b/packages/angular/core/directives/_appearance-theme.scss
index 683202b3c..e05c4ed72 100644
--- a/packages/angular/core/directives/_appearance-theme.scss
+++ b/packages/angular/core/directives/_appearance-theme.scss
@@ -125,43 +125,16 @@
   }
 
   .mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
-    --border-radius: 1rem;
-    --box-shadow-radius: 6px;
-    border: unset;
-    border-radius: var(--border-radius);
-    overflow: visible;
-
     @include _theme-property($color-config, 'color', '500-contrast');
     @include _theme-property($color-config, 'background-color', 500);
+  }
 
-    &:not(.mat-button-toggle-vertical) {
-      .mat-button-toggle {
-        &:first-child {
-          border-top-left-radius: calc(var(--border-radius) - 3px);
-          border-bottom-left-radius: calc(var(--border-radius) - 3px);
-        }
-        &:last-child {
-          border-top-right-radius: calc(var(--border-radius) - 3px);
-          border-bottom-right-radius: calc(var(--border-radius) - 3px);
-        }
-      }
-    }
-    &.mat-button-toggle-vertical {
-      .mat-button-toggle {
-        &:first-child {
-          border-top-left-radius: calc(var(--border-radius) - 3px);
-          border-top-right-radius: calc(var(--border-radius) - 3px);
-        }
-        &:last-child {
-          border-bottom-left-radius: calc(var(--border-radius) - 3px);
-          border-bottom-right-radius: calc(var(--border-radius) - 3px);
-        }
-      }
-    }
-
-    .mat-button-toggle {
+  .mat-chip-list {
+    --box-shadow-radius: 6px;
+    
+    .mat-chip {
       &:hover, 
-      &.cdk-focused,
+      &:focus,
       &:active {
         box-shadow: rgb(143 155 179 / 16%) 0px 0px 0px var(--box-shadow-radius);
         z-index: 1;
@@ -169,12 +142,20 @@
     }
 
     &.ngm-appearance-outline {
-      --box-shadow-radius: 10px;
-      border: 1px solid mat.get-color-from-palette($foreground, divider);
-      padding: 3px;
+      .mat-chip {
+        @include _theme-outline($color-config, solid);
+      }
+    }
+
+    &.ngm-appearance-dashed {
+      .mat-chip {
+        @include _theme-outline($color-config, dashed);
+      }
     }
   }
+}
 
+@mixin density($config-or-theme) {
   .ngm-density__compact .mat-button-toggle-group, .ngm-density__compact.mat-button-toggle-group{
     --border-radius: 10px;
     --box-shadow-radius: 5px;
@@ -194,34 +175,6 @@
       font-size: .85em;
     }
   }
-
-  .mat-chip-list {
-    --box-shadow-radius: 6px;
-    
-    .mat-chip {
-      &:hover, 
-      &:focus,
-      &:active {
-        box-shadow: rgb(143 155 179 / 16%) 0px 0px 0px var(--box-shadow-radius);
-        z-index: 1;
-      }
-    }
-
-    &.ngm-appearance-outline {
-      .mat-chip {
-        @include _theme-outline($color-config, solid);
-      }
-    }
-
-    &.ngm-appearance-dashed {
-      .mat-chip {
-        @include _theme-outline($color-config, dashed);
-      }
-    }
-  }
-}
-
-@mixin density($config-or-theme) {
 }
 
 @mixin typography($config-or-theme) {
diff --git a/packages/angular/core/directives/_appearance.scss b/packages/angular/core/directives/_appearance.scss
new file mode 100644
index 000000000..aa2fb349e
--- /dev/null
+++ b/packages/angular/core/directives/_appearance.scss
@@ -0,0 +1,62 @@
+.ngm-appearance-opacity {
+  opacity: 0.5;
+}
+
+.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
+  --border-radius: 1rem;
+  --box-shadow-radius: 6px;
+  border: unset;
+  border-radius: var(--border-radius);
+  overflow: visible;
+
+  &:not(.mat-button-toggle-vertical) {
+    .mat-button-toggle {
+      &:first-child {
+        border-top-left-radius: calc(var(--border-radius) - 3px);
+        border-bottom-left-radius: calc(var(--border-radius) - 3px);
+      }
+      &:last-child {
+        border-top-right-radius: calc(var(--border-radius) - 3px);
+        border-bottom-right-radius: calc(var(--border-radius) - 3px);
+      }
+    }
+  }
+  &.mat-button-toggle-vertical {
+    .mat-button-toggle {
+      &:first-child {
+        border-top-left-radius: calc(var(--border-radius) - 3px);
+        border-top-right-radius: calc(var(--border-radius) - 3px);
+      }
+      &:last-child {
+        border-bottom-left-radius: calc(var(--border-radius) - 3px);
+        border-bottom-right-radius: calc(var(--border-radius) - 3px);
+      }
+    }
+  }
+
+  .mat-button-toggle {
+    &:hover, 
+    &.cdk-focused,
+    &:active {
+      box-shadow: rgb(143 155 179 / 16%) 0px 0px 0px var(--box-shadow-radius);
+      z-index: 1;
+    }
+  }
+
+  &.ngm-appearance-outline {
+    --box-shadow-radius: 10px;
+    @apply border-slate-100 border-solid border p-1 dark:border-slate-800;
+  }
+
+  &.ngm-appearance-hero {
+    --border-radius: 1.5rem;
+    --mat-standard-button-toggle-divider-color: theme(colors.transparent);
+    @apply p-1.5 bg-slate-100 dark:bg-slate-500/10;
+    .mat-button-toggle.mat-button-toggle-appearance-standard {
+      border-radius: calc(var(--border-radius) - 3px);
+      &:not(.mat-button-toggle-checked) {
+        @apply bg-transparent;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/angular/core/directives/appearance.ts b/packages/angular/core/directives/appearance.ts
index 4d9510589..e4b2660c2 100644
--- a/packages/angular/core/directives/appearance.ts
+++ b/packages/angular/core/directives/appearance.ts
@@ -37,6 +37,17 @@ export class AppearanceDirective extends _NgmAppearanceBase implements CanColor,
     }
   }
 
+  @Input()
+  @HostBinding('class.ngm-appearance-hero')
+  get hero(): boolean {
+    return this.ngmAppearance === 'hero'
+  }
+  set hero(value: boolean) {
+    if (coerceBooleanProperty(value)) {
+      this.ngmAppearance = 'hero'
+    }
+  }
+
   @Input()
   @HostBinding('class.ngm-appearance-acrylic')
   get acrylic(): boolean {
diff --git a/packages/angular/core/style/_density-theme.scss b/packages/angular/core/style/_density-theme.scss
index ba9c38922..19585b168 100644
--- a/packages/angular/core/style/_density-theme.scss
+++ b/packages/angular/core/style/_density-theme.scss
@@ -62,6 +62,7 @@
     }
   }
 
+  // For mat icon
   .mat-icon {
     &.ngm-density__cosy {
       @include icon-cosy();
@@ -71,15 +72,17 @@
     }
   }
 
-  .mat-accordion.ngm-density__compact {
-    .mat-expansion-panel-header:not(.mat-expanded) {
-      height: 38px;
-    }
+  // For accordion expansion
+  .ngm-density__compact.mat-accordion, .ngm-density__compact .mat-accordion {
+    --mat-expansion-header-collapsed-state-height: 34px;
+    --mat-expansion-header-expanded-state-height: 50px;
+
     .mat-expansion-panel-header {
       padding: 0 14px;
     }
   }
 
+  // For toolbar
   .mat-toolbar.ngm-density__compact {
     &.mat-toolbar-multiple-rows {
       min-height: 58px;
@@ -95,9 +98,4 @@
       padding: 0 6px;
     }
   }
-
-  .mat-button-toggle-group {
-    .ngm-density__compact {
-    }
-  }
 }
diff --git a/packages/contracts/src/analytics/features.ts b/packages/contracts/src/analytics/features.ts
index 65f8f9605..6357e6bd4 100644
--- a/packages/contracts/src/analytics/features.ts
+++ b/packages/contracts/src/analytics/features.ts
@@ -1,15 +1,9 @@
 export enum AnalyticsFeatures {
-	/**
-	 * @deprecated use FEATURE_BUSINESS_AREA
-	 */
-	FEATURE_BUSINESS_GROUP = 'FEATURE_BUSINESS_GROUP',
-	
 	FEATURE_BUSINESS_AREA = 'FEATURE_BUSINESS_AREA',
 	FEATURE_INDICATOR = 'FEATURE_INDICATOR',
 	FEATURE_INDICATOR_MARKET = 'FEATURE_INDICATOR_MARKET',
 	FEATURE_INDICATOR_REGISTER = 'FEATURE_INDICATOR_REGISTER',
-	FEATURE_INDICATOR_MY = 'FEATURE_INDICATOR_MY',
-	FEATURE_INDICATOR_VIEWER = 'FEATURE_INDICATOR_VIEWER',
+	FEATURE_INDICATOR_APP = 'FEATURE_INDICATOR_APP',
 	FEATURE_STORY = 'FEATURE_STORY',
 	FEATURE_STORY_CREATION = 'FEATURE_STORY_CREATION',
 	FEATURE_STORY_VIEWER = 'FEATURE_STORY_VIEWER',
@@ -21,4 +15,8 @@ export enum AnalyticsFeatures {
 	FEATURE_INSIGHT = 'FEATURE_INSIGHT',
 	FEATURE_INSIGHT_ADMIN = 'FEATURE_INSIGHT_ADMIN',
 	FEATURE_INSIGHT_VIEWER = 'FEATURE_INSIGHT_VIEWER',
+	FEATURE_HOME_TREND = 'FEATURE_HOME_TREND',
+	FEATURE_HOME_CATALOG = 'FEATURE_HOME_CATALOG',
+	FEATURE_HOME_INSIGHT = 'FEATURE_HOME_INSIGHT',
+	FEATURE_PROJECT = 'FEATURE_PROJECT',
 }
\ No newline at end of file
diff --git a/packages/contracts/src/feature.model.ts b/packages/contracts/src/feature.model.ts
index ea9b99ee9..edbd79017 100644
--- a/packages/contracts/src/feature.model.ts
+++ b/packages/contracts/src/feature.model.ts
@@ -4,7 +4,7 @@ export interface IFeature extends IBasePerTenantAndOrganizationEntityModel {
 	code: string;
 	description: string;
 	featureOrganizations?: IFeatureOrganization[];
-	image: string;
+	image?: string;
 	readonly imageUrl?: string;
 	link: string;
 	name: string;
@@ -86,62 +86,63 @@ export interface IFeatureToggle {
 
 export enum FeatureEnum {
 	FEATURE_DASHBOARD = 'FEATURE_DASHBOARD',
-	FEATURE_TIME_TRACKING = 'FEATURE_TIME_TRACKING',
-	FEATURE_ESTIMATE = 'FEATURE_ESTIMATE',
-	FEATURE_ESTIMATE_RECEIVED = 'FEATURE_ESTIMATE_RECEIVED',
-	FEATURE_INVOICE = 'FEATURE_INVOICE',
-	FEATURE_INVOICE_RECURRING = 'FEATURE_INVOICE_RECURRING',
-	FEATURE_INVOICE_RECEIVED = 'FEATURE_INVOICE_RECEIVED',
-	FEATURE_INCOME = 'FEATURE_INCOME',
-	FEATURE_EXPENSE = 'FEATURE_EXPENSE',
-	FEATURE_PAYMENT = 'FEATURE_PAYMENT',
-	FEATURE_PROPOSAL = 'FEATURE_PROPOSAL',
-	FEATURE_PROPOSAL_TEMPLATE = 'FEATURE_PROPOSAL_TEMPLATE',
-	FEATURE_PIPELINE = 'FEATURE_PIPELINE',
-	FEATURE_PIPELINE_DEAL = 'FEATURE_PIPELINE_DEAL',
-	FEATURE_DASHBOARD_TASK = 'FEATURE_DASHBOARD_TASK',
-	FEATURE_TEAM_TASK = 'FEATURE_TEAM_TASK',
-	FEATURE_MY_TASK = 'FEATURE_MY_TASK',
+	FEATURE_HOME = 'FEATURE_HOME',
+	// FEATURE_TIME_TRACKING = 'FEATURE_TIME_TRACKING',
+	// FEATURE_ESTIMATE = 'FEATURE_ESTIMATE',
+	// FEATURE_ESTIMATE_RECEIVED = 'FEATURE_ESTIMATE_RECEIVED',
+	// FEATURE_INVOICE = 'FEATURE_INVOICE',
+	// FEATURE_INVOICE_RECURRING = 'FEATURE_INVOICE_RECURRING',
+	// FEATURE_INVOICE_RECEIVED = 'FEATURE_INVOICE_RECEIVED',
+	// FEATURE_INCOME = 'FEATURE_INCOME',
+	// FEATURE_EXPENSE = 'FEATURE_EXPENSE',
+	// FEATURE_PAYMENT = 'FEATURE_PAYMENT',
+	// FEATURE_PROPOSAL = 'FEATURE_PROPOSAL',
+	// FEATURE_PROPOSAL_TEMPLATE = 'FEATURE_PROPOSAL_TEMPLATE',
+	// FEATURE_PIPELINE = 'FEATURE_PIPELINE',
+	// FEATURE_PIPELINE_DEAL = 'FEATURE_PIPELINE_DEAL',
+	// FEATURE_DASHBOARD_TASK = 'FEATURE_DASHBOARD_TASK',
+	// FEATURE_TEAM_TASK = 'FEATURE_TEAM_TASK',
+	// FEATURE_MY_TASK = 'FEATURE_MY_TASK',
 	FEATURE_JOB = 'FEATURE_JOB',
 	FEATURE_EMPLOYEES = 'FEATURE_EMPLOYEES',
-	FEATURE_EMPLOYEE_TIME_ACTIVITY = 'FEATURE_EMPLOYEE_TIME_ACTIVITY',
-	FEATURE_EMPLOYEE_TIMESHEETS = 'FEATURE_EMPLOYEE_TIMESHEETS',
-	FEATURE_EMPLOYEE_APPOINTMENT = 'FEATURE_EMPLOYEE_APPOINTMENT',
-	FEATURE_EMPLOYEE_APPROVAL = 'FEATURE_EMPLOYEE_APPROVAL',
-	FEATURE_EMPLOYEE_APPROVAL_POLICY = 'FEATURE_EMPLOYEE_APPROVAL_POLICY',
-	FEATURE_EMPLOYEE_LEVEL = 'FEATURE_EMPLOYEE_LEVEL',
-	FEATURE_EMPLOYEE_POSITION = 'FEATURE_EMPLOYEE_POSITION',
-	FEATURE_EMPLOYEE_TIMEOFF = 'FEATURE_EMPLOYEE_TIMEOFF',
-	FEATURE_EMPLOYEE_RECURRING_EXPENSE = 'FEATURE_EMPLOYEE_RECURRING_EXPENSE',
-	FEATURE_EMPLOYEE_CANDIDATE = 'FEATURE_EMPLOYEE_CANDIDATE',
-	FEATURE_MANAGE_INTERVIEW = 'FEATURE_MANAGE_INTERVIEW',
+	// FEATURE_EMPLOYEE_TIME_ACTIVITY = 'FEATURE_EMPLOYEE_TIME_ACTIVITY',
+	// FEATURE_EMPLOYEE_TIMESHEETS = 'FEATURE_EMPLOYEE_TIMESHEETS',
+	// FEATURE_EMPLOYEE_APPOINTMENT = 'FEATURE_EMPLOYEE_APPOINTMENT',
+	// FEATURE_EMPLOYEE_APPROVAL = 'FEATURE_EMPLOYEE_APPROVAL',
+	// FEATURE_EMPLOYEE_APPROVAL_POLICY = 'FEATURE_EMPLOYEE_APPROVAL_POLICY',
+	// FEATURE_EMPLOYEE_LEVEL = 'FEATURE_EMPLOYEE_LEVEL',
+	// FEATURE_EMPLOYEE_POSITION = 'FEATURE_EMPLOYEE_POSITION',
+	// FEATURE_EMPLOYEE_TIMEOFF = 'FEATURE_EMPLOYEE_TIMEOFF',
+	// FEATURE_EMPLOYEE_RECURRING_EXPENSE = 'FEATURE_EMPLOYEE_RECURRING_EXPENSE',
+	// FEATURE_EMPLOYEE_CANDIDATE = 'FEATURE_EMPLOYEE_CANDIDATE',
+	// FEATURE_MANAGE_INTERVIEW = 'FEATURE_MANAGE_INTERVIEW',
 	FEATURE_MANAGE_INVITE = 'FEATURE_MANAGE_INVITE',
 	FEATURE_ORGANIZATION = 'FEATURE_ORGANIZATION',
-	FEATURE_ORGANIZATION_EQUIPMENT = 'FEATURE_ORGANIZATION_EQUIPMENT',
-	FEATURE_ORGANIZATION_INVENTORY = 'FEATURE_ORGANIZATION_INVENTORY',
+	// FEATURE_ORGANIZATION_EQUIPMENT = 'FEATURE_ORGANIZATION_EQUIPMENT',
+	// FEATURE_ORGANIZATION_INVENTORY = 'FEATURE_ORGANIZATION_INVENTORY',
 	FEATURE_ORGANIZATION_TAG = 'FEATURE_ORGANIZATION_TAG',
-	FEATURE_ORGANIZATION_VENDOR = 'FEATURE_ORGANIZATION_VENDOR',
+	// FEATURE_ORGANIZATION_VENDOR = 'FEATURE_ORGANIZATION_VENDOR',
 	FEATURE_ORGANIZATION_PROJECT = 'FEATURE_ORGANIZATION_PROJECT',
-	FEATURE_ORGANIZATION_DEPARTMENT = 'FEATURE_ORGANIZATION_DEPARTMENT',
-	FEATURE_ORGANIZATION_TEAM = 'FEATURE_ORGANIZATION_TEAM',
-	FEATURE_ORGANIZATION_DOCUMENT = 'FEATURE_ORGANIZATION_DOCUMENT',
-	FEATURE_ORGANIZATION_EMPLOYMENT_TYPE = 'FEATURE_ORGANIZATION_EMPLOYMENT_TYPE',
-	FEATURE_ORGANIZATION_RECURRING_EXPENSE = 'FEATURE_ORGANIZATION_RECURRING_EXPENSE',
-	FEATURE_ORGANIZATION_HELP_CENTER = 'FEATURE_ORGANIZATION_HELP_CENTER',
+	// FEATURE_ORGANIZATION_DEPARTMENT = 'FEATURE_ORGANIZATION_DEPARTMENT',
+	// FEATURE_ORGANIZATION_TEAM = 'FEATURE_ORGANIZATION_TEAM',
+	// FEATURE_ORGANIZATION_DOCUMENT = 'FEATURE_ORGANIZATION_DOCUMENT',
+	// FEATURE_ORGANIZATION_EMPLOYMENT_TYPE = 'FEATURE_ORGANIZATION_EMPLOYMENT_TYPE',
+	// FEATURE_ORGANIZATION_RECURRING_EXPENSE = 'FEATURE_ORGANIZATION_RECURRING_EXPENSE',
+	// FEATURE_ORGANIZATION_HELP_CENTER = 'FEATURE_ORGANIZATION_HELP_CENTER',
 	FEATURE_CONTACT = 'FEATURE_CONTACT',
-	FEATURE_GOAL = 'FEATURE_GOAL',
-	FEATURE_GOAL_REPORT = 'FEATURE_GOAL_REPORT',
-	FEATURE_GOAL_SETTING = 'FEATURE_GOAL_SETTING',
-	FEATURE_REPORT = 'FEATURE_REPORT',
+	// FEATURE_GOAL = 'FEATURE_GOAL',
+	// FEATURE_GOAL_REPORT = 'FEATURE_GOAL_REPORT',
+	// FEATURE_GOAL_SETTING = 'FEATURE_GOAL_SETTING',
+	// FEATURE_REPORT = 'FEATURE_REPORT',
 	FEATURE_USER = 'FEATURE_USER',
 	FEATURE_ORGANIZATIONS = 'FEATURE_ORGANIZATIONS',
-	FEATURE_APP_INTEGRATION = 'FEATURE_APP_INTEGRATION',
+	// FEATURE_APP_INTEGRATION = 'FEATURE_APP_INTEGRATION',
 	FEATURE_SETTING = 'FEATURE_SETTING',
 	FEATURE_EMAIL_HISTORY = 'FEATURE_EMAIL_HISTORY',
 	FEATURE_EMAIL_TEMPLATE = 'FEATURE_EMAIL_TEMPLATE',
-	FEATURE_IMPORT_EXPORT = 'FEATURE_IMPORT_EXPORT',
+	// FEATURE_IMPORT_EXPORT = 'FEATURE_IMPORT_EXPORT',
 	FEATURE_FILE_STORAGE = 'FEATURE_FILE_STORAGE',
-	FEATURE_PAYMENT_GATEWAY = 'FEATURE_PAYMENT_GATEWAY',
+	// FEATURE_PAYMENT_GATEWAY = 'FEATURE_PAYMENT_GATEWAY',
 	FEATURE_SMS_GATEWAY = 'FEATURE_SMS_GATEWAY',
 	FEATURE_SMTP = 'FEATURE_SMTP',
 	FEATURE_ROLES_PERMISSION = 'FEATURE_ROLES_PERMISSION',
diff --git a/packages/contracts/src/role-permission.model.ts b/packages/contracts/src/role-permission.model.ts
index d2759bcc8..52f54253d 100644
--- a/packages/contracts/src/role-permission.model.ts
+++ b/packages/contracts/src/role-permission.model.ts
@@ -29,7 +29,7 @@ export interface IRolePermissionUpdateInput {
 export enum PermissionsEnum {
   PROFILE_EDIT = 'PROFILE_EDIT',
   ADMIN_DASHBOARD_VIEW = 'ADMIN_DASHBOARD_VIEW',
-  ORG_INCOMES_VIEW = 'ORG_INCOMES_VIEW',
+  // ORG_INCOMES_VIEW = 'ORG_INCOMES_VIEW',
   ORG_EMPLOYEES_VIEW = 'ORG_EMPLOYEES_VIEW',
   ORG_EMPLOYEES_EDIT = 'ORG_EMPLOYEES_EDIT',
   ORG_TAGS_EDIT = 'ORG_TAGS_EDIT',
@@ -39,8 +39,8 @@ export enum PermissionsEnum {
   ORG_INVITE_EDIT = 'ORG_INVITE_EDIT',
   ALL_ORG_VIEW = 'ALL_ORG_VIEW',
   ALL_ORG_EDIT = 'ALL_ORG_EDIT',
-  POLICY_VIEW = 'POLICY_VIEW',
-  POLICY_EDIT = 'POLICY_EDIT',
+  // POLICY_VIEW = 'POLICY_VIEW',
+  // POLICY_EDIT = 'POLICY_EDIT',
   APPROVAL_POLICY_VIEW = 'APPROVALS_POLICY_VIEW',
   APPROVAL_POLICY_EDIT = 'APPROVALS_POLICY_EDIT',
   CHANGE_SELECTED_ORGANIZATION = 'CHANGE_SELECTED_ORGANIZATION',
@@ -52,16 +52,16 @@ export enum PermissionsEnum {
   ORG_HELP_CENTER_EDIT = 'ORG_HELP_CENTER_EDIT',
   ORG_CONTACT_EDIT = 'ORG_CONTACT_EDIT',
   ORG_CONTACT_VIEW = 'ORG_CONTACT_VIEW',
-  ORG_TEAM_EDIT = 'ORG_TEAM_EDIT',
-  ORG_CONTRACT_EDIT = 'ORG_CONTRACT_EDIT',
+  // ORG_TEAM_EDIT = 'ORG_TEAM_EDIT',
+  // ORG_CONTRACT_EDIT = 'ORG_CONTRACT_EDIT',
   ORG_COPILOT_EDIT = 'ORG_COPILOT_EDIT',
   ORG_DEMO_EDIT = 'ORG_DEMO_EDIT', // Orgnization demo edit permission
-  EVENT_TYPES_VIEW = 'EVENT_TYPES_VIEW',
-  INTEGRATION_VIEW = 'INTEGRATION_VIEW',
+  // EVENT_TYPES_VIEW = 'EVENT_TYPES_VIEW',
+  // INTEGRATION_VIEW = 'INTEGRATION_VIEW',
   FILE_STORAGE_VIEW = 'FILE_STORAGE_VIEW',
   SMS_GATEWAY_VIEW = 'SMS_GATEWAY_VIEW',
   CUSTOM_SMTP_VIEW = 'CUSTOM_SMTP_VIEW',
-  IMPORT_EXPORT_VIEW = 'IMPORT_EXPORT_VIEW',
+  // IMPORT_EXPORT_VIEW = 'IMPORT_EXPORT_VIEW',
   VIEW_ALL_ACCOUNTING_TEMPLATES = 'VIEW_ALL_ACCOUNTING_TEMPLATES',
   ACCESS_DELETE_ACCOUNT = 'ACCESS_DELETE_ACCOUNT',
   ACCESS_DELETE_ALL_DATA = 'ACCESS_DELETE_ALL_DATA'
@@ -73,18 +73,18 @@ export const PermissionGroups = {
     PermissionsEnum.ADMIN_DASHBOARD_VIEW,
     PermissionsEnum.ORG_INVITE_VIEW,
     PermissionsEnum.ORG_INVITE_EDIT,
-    PermissionsEnum.POLICY_VIEW,
-    PermissionsEnum.POLICY_EDIT,
+    // PermissionsEnum.POLICY_VIEW,
+    // PermissionsEnum.POLICY_EDIT,
     PermissionsEnum.ORG_TAGS_EDIT,
     PermissionsEnum.VIEW_ALL_EMAILS,
     PermissionsEnum.VIEW_ALL_EMAIL_TEMPLATES,
     PermissionsEnum.ORG_HELP_CENTER_EDIT,
     PermissionsEnum.ORG_CONTACT_EDIT,
     PermissionsEnum.ORG_CONTACT_VIEW,
-    PermissionsEnum.ORG_TEAM_EDIT,
-    PermissionsEnum.ORG_CONTRACT_EDIT,
+    // PermissionsEnum.ORG_TEAM_EDIT,
+    // PermissionsEnum.ORG_CONTRACT_EDIT,
     PermissionsEnum.ORG_DEMO_EDIT,
-    PermissionsEnum.EVENT_TYPES_VIEW,
+    // PermissionsEnum.EVENT_TYPES_VIEW,
     PermissionsEnum.VIEW_ALL_ACCOUNTING_TEMPLATES,
 
     // DataSource
@@ -124,11 +124,11 @@ export const PermissionGroups = {
     PermissionsEnum.CHANGE_ROLES_PERMISSIONS,
     PermissionsEnum.SUPER_ADMIN_EDIT,
     PermissionsEnum.PUBLIC_PAGE_EDIT,
-    PermissionsEnum.INTEGRATION_VIEW,
+    // PermissionsEnum.INTEGRATION_VIEW,
     PermissionsEnum.FILE_STORAGE_VIEW,
     PermissionsEnum.SMS_GATEWAY_VIEW,
     PermissionsEnum.CUSTOM_SMTP_VIEW,
-    PermissionsEnum.IMPORT_EXPORT_VIEW,
+    // PermissionsEnum.IMPORT_EXPORT_VIEW,
     PermissionsEnum.ACCESS_DELETE_ACCOUNT,
     PermissionsEnum.ACCESS_DELETE_ALL_DATA
   ]
diff --git a/packages/copilot/src/lib/types.ts b/packages/copilot/src/lib/types.ts
index 2374117f2..6cc05abcb 100644
--- a/packages/copilot/src/lib/types.ts
+++ b/packages/copilot/src/lib/types.ts
@@ -3,6 +3,7 @@ import {
   CreateChatCompletionRequest,
   CreateChatCompletionResponseChoicesInner
 } from 'openai'
+import JSON5 from 'json5'
 
 export interface ICopilot {
   enabled?: boolean
@@ -67,6 +68,6 @@ export function getFunctionCall(message: ChatCompletionRequestMessage, name?: st
 
   return {
     name: message.function_call.name,
-    arguments: JSON.parse(message.function_call.arguments)
+    arguments: JSON5.parse(message.function_call.arguments)
   }
 }
diff --git a/packages/core/src/lib/annotations/chart.ts b/packages/core/src/lib/annotations/chart.ts
index 37ab67ecc..5bfce7201 100644
--- a/packages/core/src/lib/annotations/chart.ts
+++ b/packages/core/src/lib/annotations/chart.ts
@@ -166,12 +166,22 @@ export function getChartCategory2(chartAnnotation: ChartAnnotation): ChartDimens
   return chartAnnotation?.dimensions.find((dimension) => dimension?.role === ChartDimensionRoleType.Category2)
 }
 
-export function getChartSeries(chartAnnotation: ChartAnnotation): ChartDimension {
+/**
+ * Get series dimension in chart dimensions
+ * 1. dimension with role: color, group, stacked, category2
+ * 2. dimension with index 1 when chart type variant is color, group or stacked
+ * 
+ * @param chartAnnotation 
+ * @returns 
+ */
+export function getChartSeries(chartAnnotation: ChartAnnotation): ChartDimension | null {
   return chartAnnotation.dimensions.find(
     (item) =>
       item?.role === ChartDimensionRoleType.Color ||
       item?.role === ChartDimensionRoleType.Group ||
       item?.role === ChartDimensionRoleType.Stacked ||
       item?.role === ChartDimensionRoleType.Category2
+  ) || (['color', 'group', 'stacked'].includes(chartAnnotation.chartType.variant) && 
+    chartAnnotation.dimensions[1]
   )
 }
diff --git a/packages/core/src/lib/orderby.ts b/packages/core/src/lib/orderby.ts
index b2b405b00..542791496 100644
--- a/packages/core/src/lib/orderby.ts
+++ b/packages/core/src/lib/orderby.ts
@@ -14,7 +14,7 @@ export enum OrderDirection {
 /**
  * 对非结构化的 orderby 字符串进行解构, 支持中间有空格的字段名称
  * 
- * `"[ZCALMONTH                     Z_H_MONTH_01] desc"` to `["[ZCALMONTH                     Z_H_MONTH_01]", "DESC"]`
+ * `"[Calendar] desc"` to `["[Calendar]", "DESC"]`
  */
 export function deconstructOrderby(orderby: OrderBy): {
   by: string
diff --git a/packages/echarts/src/lib/coordinates.ts b/packages/echarts/src/lib/coordinates.ts
index f195259d5..0eef72d5e 100644
--- a/packages/echarts/src/lib/coordinates.ts
+++ b/packages/echarts/src/lib/coordinates.ts
@@ -34,9 +34,6 @@ export function gatherCoordinates(coordinates: ICoordinate[], type: 'pie' | stri
   }
 
   coordinates.forEach((coordinate, gridIndex) => {
-    // if (coordinate.title) {
-    //   echartsOptions.title.push(coordinate.title)
-    // }
     echartsOptions.grid.push(coordinate.grid)
 
     coordinate.datasets.forEach(({ dataset, series }) => {
diff --git a/packages/echarts/src/lib/stacked.ts b/packages/echarts/src/lib/stacked.ts
index 4d7a52dfc..d662ff60a 100644
--- a/packages/echarts/src/lib/stacked.ts
+++ b/packages/echarts/src/lib/stacked.ts
@@ -27,7 +27,7 @@ import { IDataset, SeriesComponentType, totalMeasureName } from './types'
  * * Calculate two-dimensional array for DateSet
  * * Calculate ECharts component config for series of category2 dimension members
  * * Tooltip ?
- * 
+ *
  * @param results
  * @param measure
  * @param chartAnnotation
@@ -66,12 +66,18 @@ export function stackedForMeasure(
       ...measure,
       member: category2Value,
       id: category2Value.value + measure.measure,
-      name: category2Value.label + measure.measure,
-      caption: category2Value.label,
+      name: category2Value.caption + measure.measure,
+      caption: category2Value.caption,
       property: measureProperty,
       measure: getPropertyMeasure(measure),
       formatting: measure.formatting,
-      seriesStack: category2.role === ChartDimensionRoleType.Stacked ? getPropertyMeasure(measure) : null,
+      seriesStack: (
+        category2.role
+          ? category2.role === ChartDimensionRoleType.Stacked
+          : chartAnnotation.chartType.variant === 'stacked'
+      )
+        ? getPropertyMeasure(measure)
+        : null,
       seriesLayoutBy: 'row',
       valueAxisIndex,
       dataMin,
@@ -82,9 +88,9 @@ export function stackedForMeasure(
   })
 
   const categoryValueTexts = new Map()
-  categoryValues.forEach(({ value, label }) => categoryValueTexts.set(value, label))
+  categoryValues.forEach(({ value, caption }) => categoryValueTexts.set(value, caption))
   const category2ValueTexts = new Map()
-  category2Values.forEach(({ value, label }) => category2ValueTexts.set(value, label))
+  category2Values.forEach(({ value, caption }) => category2ValueTexts.set(value, caption))
   const tooltip = getEChartsMatrixTooltip(
     options?.tooltip,
     getChartCategory(chartAnnotation),
@@ -112,11 +118,11 @@ export function stackedForMeasure(
 
 /**
  * 将一维数组 items 按照 category 和 category2 维度, 与 measure 为单元格转换成二位数组
- * 
+ *
  * Capacities:
  * * Sort category dimension by member key and order in dimension
  * * Sort category2 dimension by cell measure value of category last member column and order in measure
- * 
+ *
  * @param items
  * @param entityType
  * @param category
@@ -143,19 +149,25 @@ export function getMatrixForMeasure(
     itemsMap.set(`${item[categoryName]}/${item[category2Name]}`, item)
   })
 
-  let categoryValues = uniqBy(items, categoryName).map((x) => ({
-    value: x[categoryName],
-    label: x[categoryTextName],
-    caption: x[categoryTextName],
-  } as IMember))
+  let categoryValues = uniqBy(items, categoryName).map(
+    (x) =>
+      ({
+        value: x[categoryName],
+        label: x[categoryTextName],
+        caption: x[categoryTextName]
+      } as IMember)
+  )
   if (category.order) {
     categoryValues = orderBy(categoryValues, ['value'], [lowerCase(category.order) as 'asc' | 'desc'])
   }
-  let category2Values = uniqBy(items, category2Name).map((x) => ({
-    value: x[category2Name],
-    label: x[category2TextName],
-    caption: x[category2TextName],
-  } as IMember))
+  let category2Values = uniqBy(items, category2Name).map(
+    (x) =>
+      ({
+        value: x[category2Name],
+        label: x[category2TextName],
+        caption: x[category2TextName]
+      } as IMember)
+  )
   if (measure.order) {
     const lastCategory = categoryValues[categoryValues.length - 1]
     category2Values = sortBy(category2Values, (member) => {
@@ -169,7 +181,7 @@ export function getMatrixForMeasure(
       category2Values = category2Values.reverse()
     }
   }
-  
+
   const dataset = category2Values.map(({ value: category2Value }, i) => {
     const values = categoryValues.map(({ value: categoryValue }) => {
       const item = itemsMap.get(`${categoryValue}/${category2Value}`)
@@ -200,7 +212,7 @@ export function getMatrixForMeasure(
       // ]
     ],
     dataMin: minBy(items, (o) => o[measureName])?.[measureName],
-    dataMax: maxBy(items, (o) => o[measureName])?.[measureName],
+    dataMax: maxBy(items, (o) => o[measureName])?.[measureName]
   }
 }
 
diff --git a/packages/server/src/employee/employee.controller.ts b/packages/server/src/employee/employee.controller.ts
index 7eb984949..62df95ec4 100644
--- a/packages/server/src/employee/employee.controller.ts
+++ b/packages/server/src/employee/employee.controller.ts
@@ -289,8 +289,8 @@ export class EmployeeController extends CrudController<Employee> {
 	 * @param filter 
 	 * @returns 
 	 */
-	@UseGuards(PermissionGuard)
-	@Permissions(PermissionsEnum.ORG_INCOMES_VIEW)
+	// @UseGuards(PermissionGuard)
+	// @Permissions(PermissionsEnum.ORG_INCOMES_VIEW)
 	@Get('pagination')
 	@UsePipes(new ValidationPipe({ transform: true }))
 	async pagination(
diff --git a/packages/server/src/feature/default-features.ts b/packages/server/src/feature/default-features.ts
index adce3f27b..7f6706e3a 100644
--- a/packages/server/src/feature/default-features.ts
+++ b/packages/server/src/feature/default-features.ts
@@ -5,337 +5,25 @@ const features = pacToggleFeatures;
 
 export let DEFAULT_FEATURES: IFeatureCreateInput[] = [
 	{
-		name: 'Dashboard',
-		code: 'FEATURE_DASHBOARD',
-		description:
-			'Go to dashboard, Manage Employee Statistics, Time Tracking Dashboard',
-		image: 'dashboard.png',
-		link: 'dashboard/accounting',
-		isEnabled: features.FEATURE_DASHBOARD,
+		name: 'Home',
+		code: FeatureEnum.FEATURE_HOME,
+		description: 'Home page, Data Dashboard',
+		link: 'home',
+		isEnabled: true,
 		icon: 'home-outline',
-		status: 'info'
+		status: 'info',
+		children: [
+			{
+				name: 'Dashboard',
+				code: FeatureEnum.FEATURE_DASHBOARD,
+				description: 'Go to home dashboard, View data dashboard',
+				link: '',
+				isEnabled: true,
+				icon: 'dashboard-outline',
+				status: 'primary'
+			},
+		]
 	},
-	// {
-	// 	name: 'Time Tracking',
-	// 	code: 'FEATURE_TIME_TRACKING',
-	// 	description: 'Download Desktop App, Create First Timesheet',
-	// 	image: 'time-tracking-timesheet.png',
-	// 	link: 'employees/timesheets',
-	// 	isEnabled: features.FEATURE_TIME_TRACKING,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary'
-	// },
-	// {
-	// 	name: 'Estimate',
-	// 	code: 'FEATURE_ESTIMATE',
-	// 	description: 'Manage Estimate, Create First Estimate',
-	// 	image: 'estimate.png',
-	// 	link: 'accounting/invoices/estimates',
-	// 	isEnabled: features.FEATURE_ESTIMATE,
-	// 	icon: 'file-text-outline',
-	// 	status: 'success',
-	// 	children: [
-	// 		{
-	// 			name: 'Estimate Received',
-	// 			code: 'FEATURE_ESTIMATE_RECEIVED',
-	// 			description:
-	// 				'Manage Received Estimate, Accept and Reject Estimate',
-	// 			image: 'estimate-received.png',
-	// 			link: 'accounting/invoices/estimates',
-	// 			isEnabled: features.FEATURE_ESTIMATE_RECEIVED,
-	// 			icon: 'file-text-outline',
-	// 			status: 'warning'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Invoice',
-	// 	code: 'FEATURE_INVOICE',
-	// 	description: 'Manage Invoice, Create First Invoice',
-	// 	image: 'invoice.png',
-	// 	link: 'accounting/invoices',
-	// 	isEnabled: features.FEATURE_INVOICE,
-	// 	icon: 'file-text-outline',
-	// 	status: 'warning',
-	// 	children: [
-	// 		{
-	// 			name: 'Invoice Received',
-	// 			code: 'FEATURE_INVOICE_RECEIVED',
-	// 			description: 'View Received Invoice',
-	// 			image: 'invoice-received.png',
-	// 			link: 'accounting/invoices/received-invoices',
-	// 			isEnabled: features.FEATURE_INVOICE_RECEIVED,
-	// 			icon: 'file-text-outline',
-	// 			status: 'info'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Income',
-	// 	code: 'FEATURE_INCOME',
-	// 	description: 'Create First Income',
-	// 	image: 'income.png',
-	// 	link: 'accounting/income',
-	// 	isEnabled: features.FEATURE_INCOME,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary'
-	// },
-	// {
-	// 	name: 'Expense',
-	// 	code: 'FEATURE_EXPENSE',
-	// 	description: 'Create First Expense',
-	// 	image: 'expense.png',
-	// 	link: 'accounting/expenses',
-	// 	isEnabled: features.FEATURE_EXPENSE,
-	// 	icon: 'file-text-outline',
-	// 	status: 'info',
-	// 	children: [
-	// 		{
-	// 			name: 'Employee Recurring Expense',
-	// 			code: 'FEATURE_EMPLOYEE_RECURRING_EXPENSE',
-	// 			description: 'Manage Employee Recurring Expense',
-	// 			image: 'recurring-expense.png',
-	// 			link: 'employees/recurring-expenses',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_RECURRING_EXPENSE,
-	// 			icon: 'file-text-outline',
-	// 			status: 'primary'
-	// 		},
-	// 		{
-	// 			name: 'Organization Recurring Expenses',
-	// 			code: 'FEATURE_ORGANIZATION_RECURRING_EXPENSE',
-	// 			description:
-	// 				'Manage Organization Recurring Expenses, Create First Recurring Expenses',
-	// 			image: 'organization-recurring-expense.png',
-	// 			link: 'organization/expense-recurring',
-	// 			isEnabled: features.FEATURE_ORGANIZATION_RECURRING_EXPENSE,
-	// 			icon: 'file-text-outline',
-	// 			status: 'warning'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Payment',
-	// 	code: 'FEATURE_PAYMENT',
-	// 	description: 'Manage Payment, Create First Payment',
-	// 	image: 'payment.png',
-	// 	link: 'accounting/payments',
-	// 	isEnabled: features.FEATURE_PAYMENT,
-	// 	icon: 'file-text-outline',
-	// 	status: 'success'
-	// },
-	// {
-	// 	name: 'Proposal',
-	// 	code: 'FEATURE_PROPOSAL',
-	// 	description: 'Manage Proposal, Register First Proposal',
-	// 	image: 'proposal.png',
-	// 	link: 'sales/proposals',
-	// 	isEnabled: features.FEATURE_PROPOSAL,
-	// 	icon: 'file-text-outline',
-	// 	status: 'warning',
-	// 	children: [
-	// 		{
-	// 			name: 'Proposal Template',
-	// 			code: 'FEATURE_PROPOSAL_TEMPLATE',
-	// 			description: 'Create First Proposal Template',
-	// 			image: 'proposal-template.png',
-	// 			link: 'jobs/proposal-template',
-	// 			isEnabled: features.FEATURE_PROPOSAL_TEMPLATE,
-	// 			icon: 'file-text-outline',
-	// 			status: 'primary'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Sales Pipeline',
-	// 	code: 'FEATURE_PIPELINE',
-	// 	description: 'Create Sales Pipeline',
-	// 	image: 'pipeline.png',
-	// 	link: 'sales/pipelines',
-	// 	isEnabled: features.FEATURE_PIPELINE,
-	// 	icon: 'file-text-outline',
-	// 	status: 'info',
-	// 	children: [
-	// 		{
-	// 			name: 'Sales Pipeline Deal',
-	// 			code: 'FEATURE_PIPELINE_DEAL',
-	// 			description: 'Create Sales Pipeline Deal',
-	// 			image: 'pipeline-deal.png',
-	// 			link: 'sales/pipelines',
-	// 			isEnabled: features.FEATURE_PIPELINE_DEAL,
-	// 			icon: 'file-text-outline',
-	// 			status: 'success'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Task Dashboard',
-	// 	code: 'FEATURE_DASHBOARD_TASK',
-	// 	description: 'Task Dashboard',
-	// 	image: 'task-dashboard.png',
-	// 	link: 'tasks/dashboard',
-	// 	isEnabled: features.FEATURE_DASHBOARD_TASK,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary',
-	// 	children: [
-	// 		{
-	// 			name: 'Team Task Dashboard',
-	// 			code: 'FEATURE_TEAM_TASK',
-	// 			description: 'Team Task Dashboard',
-	// 			image: 'team-task.png',
-	// 			link: 'tasks/team',
-	// 			isEnabled: features.FEATURE_TEAM_TASK,
-	// 			icon: 'file-text-outline',
-	// 			status: 'info'
-	// 		},
-	// 		{
-	// 			name: 'My Task Dashboard',
-	// 			code: 'FEATURE_MY_TASK',
-	// 			description: 'My Task Dashboard',
-	// 			image: 'team-task.png',
-	// 			link: 'tasks/me',
-	// 			isEnabled: features.FEATURE_MY_TASK,
-	// 			icon: 'file-text-outline',
-	// 			status: 'success'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Jobs',
-	// 	code: 'FEATURE_JOB',
-	// 	description: 'Job Search & Jobs Matching',
-	// 	image: 'job.png',
-	// 	link: 'jobs/search',
-	// 	isEnabled: features.FEATURE_JOB,
-	// 	icon: 'file-text-outline',
-	// 	status: 'warning'
-	// },
-	// {
-	// 	name: 'Employees',
-	// 	code: 'FEATURE_EMPLOYEES',
-	// 	description: 'Manage Employees, Add or Invite Employees',
-	// 	image: 'employee.png',
-	// 	link: 'employees',
-	// 	isEnabled: features.FEATURE_EMPLOYEES,
-	// 	icon: 'file-text-outline',
-	// 	status: 'success',
-	// 	children: [
-	// 		{
-	// 			name: 'Employee Level',
-	// 			code: 'FEATURE_EMPLOYEE_LEVEL',
-	// 			description: 'Manage Employee Level',
-	// 			image: 'employee-level.png',
-	// 			link: 'employees/employee-level',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_LEVEL,
-	// 			icon: 'file-text-outline',
-	// 			status: 'warning'
-	// 		},
-	// 		{
-	// 			name: 'Employee Position',
-	// 			code: 'FEATURE_EMPLOYEE_POSITION',
-	// 			description: 'Manage Employee Position',
-	// 			image: 'position.png',
-	// 			link: 'employees/positions',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_POSITION,
-	// 			icon: 'file-text-outline',
-	// 			status: 'success'
-	// 		},
-	// 		{
-	// 			name: 'Employee Time Off',
-	// 			code: 'FEATURE_EMPLOYEE_TIMEOFF',
-	// 			description: 'Manage Employee Time Off',
-	// 			image: 'timeoff.png',
-	// 			link: 'employees/time-off',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_TIMEOFF,
-	// 			icon: 'file-text-outline',
-	// 			status: 'info'
-	// 		},
-	// 		{
-	// 			name: 'Employee Approval',
-	// 			code: 'FEATURE_EMPLOYEE_APPROVAL',
-	// 			description: 'Employee Approval Request',
-	// 			image: 'approval.png',
-	// 			link: 'employees/approvals',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_APPROVAL,
-	// 			icon: 'file-text-outline',
-	// 			status: 'success'
-	// 		},
-	// 		{
-	// 			name: 'Employee Approval Policy',
-	// 			code: 'FEATURE_EMPLOYEE_APPROVAL_POLICY',
-	// 			description: 'Manage Employee Approval Request Policy',
-	// 			image: 'approval-policy.png',
-	// 			link: 'organization/approval-policy',
-	// 			isEnabled: features.FEATURE_EMPLOYEE_APPROVAL_POLICY,
-	// 			icon: 'file-text-outline',
-	// 			status: 'info'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'Time Activity',
-	// 	code: 'FEATURE_EMPLOYEE_TIME_ACTIVITY',
-	// 	description:
-	// 		'Manage Time Activity, Screenshots, App, Visited Sites, Activities',
-	// 	image: 'screenshot.png',
-	// 	link: 'employees/activity',
-	// 	isEnabled: features.FEATURE_EMPLOYEE_TIME_ACTIVITY,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary'
-	// },
-	// {
-	// 	name: 'Timesheet',
-	// 	code: 'FEATURE_EMPLOYEE_TIMESHEETS',
-	// 	description:
-	// 		'Manage Employee Timesheet Daily, Weekly, Calendar, Create First Timesheet',
-	// 	image: 'timesheet.png',
-	// 	link: 'employees/timesheets/daily',
-	// 	isEnabled: features.FEATURE_EMPLOYEE_TIMESHEETS,
-	// 	icon: 'file-text-outline',
-	// 	status: 'info'
-	// },
-	// {
-	// 	name: 'Appointment & Schedule',
-	// 	code: 'FEATURE_EMPLOYEE_APPOINTMENT',
-	// 	description:
-	// 		'Employee Appointment, Schedules & Book Public Appointment',
-	// 	image: 'appointment.png',
-	// 	link: 'employees/appointments',
-	// 	isEnabled: features.FEATURE_EMPLOYEE_APPOINTMENT,
-	// 	icon: 'file-text-outline',
-	// 	status: 'warning'
-	// },
-	// {
-	// 	name: 'Candidate',
-	// 	code: 'FEATURE_EMPLOYEE_CANDIDATE',
-	// 	description: 'Manage Candidates, Interviews & Invites',
-	// 	image: 'candidate.png',
-	// 	link: 'employees/candidates',
-	// 	isEnabled: features.FEATURE_EMPLOYEE_CANDIDATE,
-	// 	icon: 'file-text-outline',
-	// 	status: 'success',
-	// 	children: [
-	// 		{
-	// 			name: 'Manage Interview',
-	// 			code: 'FEATURE_MANAGE_INTERVIEW',
-	// 			description: 'Manage Candidate Interviews',
-	// 			image: 'interview.png',
-	// 			link: 'employees/candidates/interviews/calendar',
-	// 			isEnabled: features.FEATURE_MANAGE_INTERVIEW,
-	// 			icon: 'file-text-outline',
-	// 			status: 'warning'
-	// 		},
-	// 		{
-	// 			name: 'Manage Invite',
-	// 			code: 'FEATURE_MANAGE_INVITE',
-	// 			description: 'Manage Invites, Create First Candidate Invites',
-	// 			image: 'invite.png',
-	// 			link: 'employees/candidates/invites',
-	// 			isEnabled: features.FEATURE_MANAGE_INVITE,
-	// 			icon: 'file-text-outline',
-	// 			status: 'primary'
-	// 		}
-	// 	]
-	// },
 	{
 		name: 'Manage Organization',
 		code: 'FEATURE_ORGANIZATION',
@@ -346,16 +34,16 @@ export let DEFAULT_FEATURES: IFeatureCreateInput[] = [
 		icon: 'file-text-outline',
 		status: 'info',
 		children: [
-			{
-				name: 'Help Center',
-				code: 'FEATURE_ORGANIZATION_HELP_CENTER',
-				description: 'Find out more about how to use Metad',
-				image: 'help.png',
-				link: 'help',
-				isEnabled: features.FEATURE_ORGANIZATION_HELP_CENTER,
-				icon: 'file-text-outline',
-				status: 'primary'
-			},
+			// {
+			// 	name: 'Help Center',
+			// 	code: 'FEATURE_ORGANIZATION_HELP_CENTER',
+			// 	description: 'Find out more about how to use Metad',
+			// 	image: 'help.png',
+			// 	link: 'help',
+			// 	isEnabled: features.FEATURE_ORGANIZATION_HELP_CENTER,
+			// 	icon: 'file-text-outline',
+			// 	status: 'primary'
+			// },
 			{
 				name: 'Organization Tag',
 				code: 'FEATURE_ORGANIZATION_TAG',
@@ -366,132 +54,59 @@ export let DEFAULT_FEATURES: IFeatureCreateInput[] = [
 				icon: 'file-text-outline',
 				status: 'primary'
 			},
-			{
-				name: 'Organization Equipment',
-				code: 'FEATURE_ORGANIZATION_EQUIPMENT',
-				description:
-					'Manage Organization Equipment, Create First Equipment',
-				image: 'equipment.png',
-				link: 'organization/equipment',
-				isEnabled: features.FEATURE_ORGANIZATION_EQUIPMENT,
-				icon: 'file-text-outline',
-				status: 'warning'
-			},
-			{
-				name: 'Organization Vendor',
-				code: 'FEATURE_ORGANIZATION_VENDOR',
-				description: 'Manage Organization Vendor, Create First Vendor',
-				image: 'vendor.png',
-				link: 'organization/vendors',
-				isEnabled: features.FEATURE_ORGANIZATION_VENDOR,
-				icon: 'file-text-outline',
-				status: 'primary'
-			},
-			{
-				name: 'Organization Department',
-				code: 'FEATURE_ORGANIZATION_DEPARTMENT',
-				description:
-					'Manage Organization Department, Create First Department',
-				image: 'department.png',
-				link: 'organization/departments',
-				isEnabled: features.FEATURE_ORGANIZATION_DEPARTMENT,
-				icon: 'file-text-outline',
-				status: 'success'
-			},
-			{
-				name: 'Organization Employment Type',
-				code: 'FEATURE_ORGANIZATION_EMPLOYMENT_TYPE',
-				description: 'Manage Organization Employment Type',
-				image: 'employment-type.png',
-				link: 'organization/employment-types',
-				isEnabled: features.FEATURE_ORGANIZATION_EMPLOYMENT_TYPE,
-				icon: 'file-text-outline',
-				status: 'success'
-			}
+			// {
+			// 	name: 'Organization Equipment',
+			// 	code: 'FEATURE_ORGANIZATION_EQUIPMENT',
+			// 	description:
+			// 		'Manage Organization Equipment, Create First Equipment',
+			// 	image: 'equipment.png',
+			// 	link: 'organization/equipment',
+			// 	isEnabled: features.FEATURE_ORGANIZATION_EQUIPMENT,
+			// 	icon: 'file-text-outline',
+			// 	status: 'warning'
+			// },
+			// {
+			// 	name: 'Organization Vendor',
+			// 	code: 'FEATURE_ORGANIZATION_VENDOR',
+			// 	description: 'Manage Organization Vendor, Create First Vendor',
+			// 	image: 'vendor.png',
+			// 	link: 'organization/vendors',
+			// 	isEnabled: features.FEATURE_ORGANIZATION_VENDOR,
+			// 	icon: 'file-text-outline',
+			// 	status: 'primary'
+			// },
+			// {
+			// 	name: 'Organization Department',
+			// 	code: 'FEATURE_ORGANIZATION_DEPARTMENT',
+			// 	description:
+			// 		'Manage Organization Department, Create First Department',
+			// 	image: 'department.png',
+			// 	link: 'organization/departments',
+			// 	isEnabled: features.FEATURE_ORGANIZATION_DEPARTMENT,
+			// 	icon: 'file-text-outline',
+			// 	status: 'success'
+			// },
+			// {
+			// 	name: 'Organization Employment Type',
+			// 	code: 'FEATURE_ORGANIZATION_EMPLOYMENT_TYPE',
+			// 	description: 'Manage Organization Employment Type',
+			// 	image: 'employment-type.png',
+			// 	link: 'organization/employment-types',
+			// 	isEnabled: features.FEATURE_ORGANIZATION_EMPLOYMENT_TYPE,
+			// 	icon: 'file-text-outline',
+			// 	status: 'success'
+			// }
 		]
 	},
 	// {
-	// 	name: 'Product Inventory',
-	// 	code: 'FEATURE_ORGANIZATION_INVENTORY',
-	// 	description: 'Manage Product Inventory, Create First Product',
-	// 	image: 'inventory.png',
-	// 	link: 'organization/inventory/all',
-	// 	isEnabled: features.FEATURE_ORGANIZATION_INVENTORY,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary'
-	// },
-	// {
-	// 	name: 'Project',
-	// 	code: 'FEATURE_ORGANIZATION_PROJECT',
-	// 	description: 'Manage Project, Create First Project',
-	// 	image: 'project.png',
-	// 	link: 'organization/projects',
-	// 	isEnabled: features.FEATURE_ORGANIZATION_PROJECT,
-	// 	icon: 'file-text-outline',
-	// 	status: 'success'
-	// },
-	{
-		name: 'Organization Team',
-		code: 'FEATURE_ORGANIZATION_TEAM',
-		description: 'Manage Organization Team, Create First Team',
-		image: 'team.png',
-		link: 'organization/teams',
-		isEnabled: features.FEATURE_ORGANIZATION_TEAM,
-		icon: 'file-text-outline',
-		status: 'warning'
-	},
-	// {
-	// 	name: 'Organization Document',
-	// 	code: 'FEATURE_ORGANIZATION_DOCUMENT',
-	// 	description: 'Manage Organization Document, Create First Document',
-	// 	image: 'document.png',
-	// 	link: 'organization/documents',
-	// 	isEnabled: features.FEATURE_ORGANIZATION_DOCUMENT,
-	// 	icon: 'file-text-outline',
-	// 	status: 'primary'
-	// },
-	// {
-	// 	name: 'Lead, Customer & Client',
-	// 	code: 'FEATURE_CONTACT',
-	// 	description:
-	// 		'Manage Leads, Customers and Clients, Create First Customer/Clients',
-	// 	image: 'contact.png',
-	// 	link: 'contacts/customers',
-	// 	isEnabled: features.FEATURE_CONTACT,
-	// 	icon: 'file-text-outline',
-	// 	status: 'info'
-	// },
-	// {
-	// 	name: 'Goal and Objective',
-	// 	code: 'FEATURE_GOAL',
-	// 	description: 'Manage Goals and Objectives',
-	// 	image: 'goal.png',
-	// 	link: 'goals',
-	// 	isEnabled: features.FEATURE_GOAL,
-	// 	icon: 'file-text-outline',
-	// 	status: 'warning',
-	// 	children: [
-	// 		{
-	// 			name: 'Goal Time Frame & KPI',
-	// 			code: 'FEATURE_GOAL_SETTING',
-	// 			description: 'Manage Goal Time Framework & KPIs',
-	// 			image: 'goal-setting.png',
-	// 			link: 'goals/settings',
-	// 			isEnabled: features.FEATURE_GOAL_SETTING,
-	// 			icon: 'file-text-outline',
-	// 			status: 'success'
-	// 		}
-	// 	]
-	// },
-	// {
-	// 	name: 'All Report',
-	// 	code: 'FEATURE_REPORT',
-	// 	description: 'Manage Expense, Weekly, Time & Activity and etc reports',
-	// 	image: 'all-report.png',
-	// 	link: 'reports/all',
-	// 	isEnabled: features.FEATURE_REPORT,
+	// 	name: 'Organization Team',
+	// 	code: 'FEATURE_ORGANIZATION_TEAM',
+	// 	description: 'Manage Organization Team, Create First Team',
+	// 	image: 'team.png',
+	// 	link: 'organization/teams',
+	// 	isEnabled: features.FEATURE_ORGANIZATION_TEAM,
 	// 	icon: 'file-text-outline',
-	// 	status: 'success'
+	// 	status: 'warning'
 	// },
 	{
 		name: 'Users',
@@ -513,17 +128,17 @@ export let DEFAULT_FEATURES: IFeatureCreateInput[] = [
 		icon: 'file-text-outline',
 		status: 'success'
 	},
-	{
-		name: 'Apps & Integrations',
-		code: 'FEATURE_APP_INTEGRATION',
-		description:
-			'Manage Available Apps & Integrations Like Upwork & Hubstaff',
-		image: 'app-integration.png',
-		link: 'integrations/list',
-		isEnabled: features.FEATURE_APP_INTEGRATION,
-		icon: 'file-text-outline',
-		status: 'warning'
-	},
+	// {
+	// 	name: 'Apps & Integrations',
+	// 	code: 'FEATURE_APP_INTEGRATION',
+	// 	description:
+	// 		'Manage Available Apps & Integrations Like Upwork & Hubstaff',
+	// 	image: 'app-integration.png',
+	// 	link: 'integrations/list',
+	// 	isEnabled: features.FEATURE_APP_INTEGRATION,
+	// 	icon: 'file-text-outline',
+	// 	status: 'warning'
+	// },
 	{
 		name: 'Email History',
 		code: 'FEATURE_EMAIL_HISTORY',
@@ -578,16 +193,16 @@ export let DEFAULT_FEATURES: IFeatureCreateInput[] = [
 			}
 		]
 	},
-	{
-		name: 'Entity Import & Export',
-		code: 'FEATURE_IMPORT_EXPORT',
-		description: 'Manage Entity Import and Export',
-		image: 'import.png',
-		link: 'settings/import-export',
-		isEnabled: features.FEATURE_IMPORT_EXPORT,
-		icon: 'file-text-outline',
-		status: 'warning'
-	},
+	// {
+	// 	name: 'Entity Import & Export',
+	// 	code: 'FEATURE_IMPORT_EXPORT',
+	// 	description: 'Manage Entity Import and Export',
+	// 	image: 'import.png',
+	// 	link: 'settings/import-export',
+	// 	isEnabled: features.FEATURE_IMPORT_EXPORT,
+	// 	icon: 'file-text-outline',
+	// 	status: 'warning'
+	// },
 	{
 		name: 'Custom SMTP',
 		code: 'FEATURE_SMTP',
diff --git a/packages/server/src/role-permission/default-role-permissions.ts b/packages/server/src/role-permission/default-role-permissions.ts
index 0fe12ebba..0dc2a4344 100644
--- a/packages/server/src/role-permission/default-role-permissions.ts
+++ b/packages/server/src/role-permission/default-role-permissions.ts
@@ -13,8 +13,8 @@ export const DEFAULT_ROLE_PERMISSIONS = [
 			PermissionsEnum.ORG_COPILOT_EDIT,
 			PermissionsEnum.ALL_ORG_VIEW,
 			PermissionsEnum.ALL_ORG_EDIT,
-			PermissionsEnum.POLICY_EDIT,
-			PermissionsEnum.POLICY_VIEW,
+			// PermissionsEnum.POLICY_EDIT,
+			// PermissionsEnum.POLICY_VIEW,
 			PermissionsEnum.CHANGE_SELECTED_ORGANIZATION,
 			PermissionsEnum.CHANGE_ROLES_PERMISSIONS,
 			PermissionsEnum.ORG_INVITE_VIEW,
@@ -26,11 +26,11 @@ export const DEFAULT_ROLE_PERMISSIONS = [
 			PermissionsEnum.VIEW_ALL_EMAIL_TEMPLATES,
 			PermissionsEnum.ORG_CONTACT_EDIT,
 			PermissionsEnum.ORG_CONTACT_VIEW,
-			PermissionsEnum.ORG_TEAM_EDIT,
-			PermissionsEnum.ORG_CONTRACT_EDIT,
-			PermissionsEnum.EVENT_TYPES_VIEW,
-			PermissionsEnum.INTEGRATION_VIEW,
-			PermissionsEnum.IMPORT_EXPORT_VIEW,
+			// PermissionsEnum.ORG_TEAM_EDIT,
+			// PermissionsEnum.ORG_CONTRACT_EDIT,
+			// PermissionsEnum.EVENT_TYPES_VIEW,
+			// PermissionsEnum.INTEGRATION_VIEW,
+			// PermissionsEnum.IMPORT_EXPORT_VIEW,
 			PermissionsEnum.FILE_STORAGE_VIEW,
 			PermissionsEnum.SMS_GATEWAY_VIEW,
 			PermissionsEnum.CUSTOM_SMTP_VIEW,
@@ -51,8 +51,8 @@ export const DEFAULT_ROLE_PERMISSIONS = [
 			PermissionsEnum.ORG_COPILOT_EDIT,
 			PermissionsEnum.ALL_ORG_VIEW,
 			PermissionsEnum.ALL_ORG_EDIT,
-			PermissionsEnum.POLICY_EDIT,
-			PermissionsEnum.POLICY_VIEW,
+			// PermissionsEnum.POLICY_EDIT,
+			// PermissionsEnum.POLICY_VIEW,
 			PermissionsEnum.CHANGE_SELECTED_ORGANIZATION,
 			PermissionsEnum.CHANGE_ROLES_PERMISSIONS,
 			PermissionsEnum.ORG_INVITE_VIEW,
@@ -63,12 +63,12 @@ export const DEFAULT_ROLE_PERMISSIONS = [
 			PermissionsEnum.VIEW_ALL_EMAIL_TEMPLATES,
 			PermissionsEnum.ORG_CONTACT_EDIT,
 			PermissionsEnum.ORG_CONTACT_VIEW,
-			PermissionsEnum.ORG_TEAM_EDIT,
-			PermissionsEnum.ORG_CONTRACT_EDIT,
+			// PermissionsEnum.ORG_TEAM_EDIT,
+			// PermissionsEnum.ORG_CONTRACT_EDIT,
 			PermissionsEnum.ORG_DEMO_EDIT,
-			PermissionsEnum.EVENT_TYPES_VIEW,
-			PermissionsEnum.INTEGRATION_VIEW,
-			PermissionsEnum.IMPORT_EXPORT_VIEW,
+			// PermissionsEnum.EVENT_TYPES_VIEW,
+			// PermissionsEnum.INTEGRATION_VIEW,
+			// PermissionsEnum.IMPORT_EXPORT_VIEW,
 			PermissionsEnum.FILE_STORAGE_VIEW,
 			PermissionsEnum.SMS_GATEWAY_VIEW,
 			PermissionsEnum.CUSTOM_SMTP_VIEW,
@@ -93,7 +93,7 @@ export const DEFAULT_ROLE_PERMISSIONS = [
 		role: RolesEnum.EMPLOYEE,
 		defaultEnabledPermissions: [
 			PermissionsEnum.ADMIN_DASHBOARD_VIEW,
-			PermissionsEnum.EVENT_TYPES_VIEW,
+			// PermissionsEnum.EVENT_TYPES_VIEW,
 			PermissionsEnum.ORG_CONTACT_VIEW,
 		]
 	},
diff --git a/packages/xmla/src/lib/mdx-query.ts b/packages/xmla/src/lib/mdx-query.ts
index 7f4784d64..67f65cb76 100644
--- a/packages/xmla/src/lib/mdx-query.ts
+++ b/packages/xmla/src/lib/mdx-query.ts
@@ -160,7 +160,7 @@ export function getMDXProperty(entityType: EntityType, path: string | Dimension)
 
   if (isString(path)) {
     const property = getEntityProperty(entityType, path)
-    if (property.role === AggregationRole.measure) {
+    if (property?.role === AggregationRole.measure) {
       return {
         dimension: C_MEASURES,
         members: [path]
@@ -170,7 +170,15 @@ export function getMDXProperty(entityType: EntityType, path: string | Dimension)
         dimension: property.name
       }
     } else {
-      throw new Error(`Can't find entity property for name '${path}'`)
+      const property = getEntityHierarchy(entityType, path)
+      if (property) {
+        return {
+          dimension: property.dimension,
+          hierarchy: property.name,
+        }
+      }
+
+      throw new Error(`Can't find property '${path}' in entity '${entityType.name}'`)
     }
   }