diff --git a/apps/cloud/src/app/@core/config/language.ts b/apps/cloud/src/app/@core/config/language.ts
index 64bbf5c7d..61b430b1e 100644
--- a/apps/cloud/src/app/@core/config/language.ts
+++ b/apps/cloud/src/app/@core/config/language.ts
@@ -1,9 +1,4 @@
-export enum LanguagesEnum {
-  Chinese = 'zh-CN',
-  SimplifiedChinese = 'zh-Hans',
-  TraditionalChinese = 'zh-Hant',
-  English = 'en'
-}
+import { LanguagesEnum } from "@metad/core";
 
 export const LanguagesMap = {
   'zh-CN': LanguagesEnum.SimplifiedChinese,
diff --git a/apps/cloud/src/app/features/_features-theme.scss b/apps/cloud/src/app/features/_features-theme.scss
index 0f9cda589..81298376f 100644
--- a/apps/cloud/src/app/features/_features-theme.scss
+++ b/apps/cloud/src/app/features/_features-theme.scss
@@ -53,6 +53,7 @@ $sidebar-collapsed-width: 40px;
     // justify-content: space-between;
     height: $shell-bar-height;
     padding: 0 .5rem;
+    background-color: transparent;
 
     .mat-mdc-tab-link {
       height: $shell-bar-height;
diff --git a/apps/cloud/src/app/features/_features.component.scss b/apps/cloud/src/app/features/_features.component.scss
index ad0b50c33..7665417bd 100644
--- a/apps/cloud/src/app/features/_features.component.scss
+++ b/apps/cloud/src/app/features/_features.component.scss
@@ -1,5 +1 @@
-@import './story/toolbar/_toolbar.component';
-
-.mat-toolbar.pac__shell-bar {
-  @apply relative text-slate-300 bg-bluegray-900 dark:bg-transparent dark:shadow-none;
-}
\ No newline at end of file
+@import './story/toolbar/_toolbar.component';
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/features.component.html b/apps/cloud/src/app/features/features.component.html
index 5b188ad74..f71ce3493 100644
--- a/apps/cloud/src/app/features/features.component.html
+++ b/apps/cloud/src/app/features/features.component.html
@@ -26,7 +26,7 @@
   </mat-sidenav>
 
   <mat-sidenav-content class="pac_sidenav-content max-h-full overflow-hidden" cdkDropListGroup>
-    <mat-toolbar class="pac__shell-bar mat-elevation-z2 flex justify-between items-center md:gap-2">
+    <mat-toolbar class="pac__shell-bar flex justify-between items-center md:gap-2">
       <div class="flex justify-start items-center overflow-hidden">
         <button *ngIf="!(sidenav.opened && sidenavMode==='side')" class="w-12 outline-none hover:text-yellow-600 transition-colors"
           (click)="sidenav.toggle();sidenavMode='over'">
diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
index e78b81b02..0a6eba492 100644
--- a/apps/cloud/src/styles.scss
+++ b/apps/cloud/src/styles.scss
@@ -38,6 +38,7 @@
 
 @import 'libs/formly/_formly';
 @import 'libs/story-angular/src/lib/_index';
+@import 'libs/apps/indicator-market/index';
 @import './app/_app.component';
 @import './styles/cdk-menu';
 
diff --git a/apps/cloud/src/styles/base.scss b/apps/cloud/src/styles/base.scss
index 84fae6920..c099673b6 100644
--- a/apps/cloud/src/styles/base.scss
+++ b/apps/cloud/src/styles/base.scss
@@ -8,6 +8,9 @@
   --ngm-color-on-surface: #1f1f1f;
   --ngm-color-on-surface-variant: #444746;
   --ngm-divider-color-secondary: theme('colors.neutral.100');
+  --ngm-color-surface: white;
+  --ngm-color-surface-container: theme('colors.neutral.50');
+  --ngm-color-surface-container-low: theme('colors.neutral.100');
 }
 
 :root .dark {
@@ -17,6 +20,9 @@
   --ngm-color-on-surface: #e3e3e3;
   --ngm-color-on-surface-variant: #444746;
   --ngm-divider-color-secondary: theme('colors.neutral.900');
+  --ngm-color-surface: #16181c;
+  --ngm-color-surface-container: black;
+  --ngm-color-surface-container-low: theme('colors.neutral.900');
 }
 
 .mat-drawer-container {
diff --git a/apps/cloud/src/styles/default.scss b/apps/cloud/src/styles/default.scss
index f7de106a8..cde6419af 100644
--- a/apps/cloud/src/styles/default.scss
+++ b/apps/cloud/src/styles/default.scss
@@ -21,6 +21,11 @@ body.default, body.light {
   ));
 }
 
+@include indicator-market.theme(light-theme.$mat-theme);
+@include features.theme(light-theme.$mat-theme);
+@include shared.theme(light-theme.$mat-theme);
+@include public.theme(light-theme.$mat-theme);
+
 .ngm-theme-light, .ngm-theme-default {
   @include indicator-market.color(light-theme.$mat-theme);
   @include features.color(light-theme.$mat-theme);
diff --git a/libs/apps/indicator-market/index.scss b/libs/apps/indicator-market/index.scss
new file mode 100644
index 000000000..e42942d39
--- /dev/null
+++ b/libs/apps/indicator-market/index.scss
@@ -0,0 +1 @@
+@import "./src/lib/_indicator-market.component";
\ No newline at end of file
diff --git a/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss b/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss
index cacd6ff11..7b0d59383 100644
--- a/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss
+++ b/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss
@@ -2,18 +2,18 @@
 @use '@angular/material' as mat;
 
 // @todo 需要重构
-$background-color: #090909;
-$text-color: white;
-$description-color: #ffffffb3;
-$surface-color: #263238;
-$trend-up: rgb(49, 199, 90);
-$trend-down: rgb(254, 60, 46);
+// $text-color: white;
+// $description-color: #ffffffb3;
+// $surface-color: #263238;
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
   $primary: map.get($config, primary);
 
+  /**
+   * @deprecated 迁移至全局样式
+   */
   body.mobile {
     .cdk-overlay-container {
       z-index: 3000;
@@ -30,114 +30,23 @@ $trend-down: rgb(254, 60, 46);
 
       .mat-card {
         box-shadow: unset;
-        background-color: $surface-color;
-        color: $text-color;
+        // background-color: $surface-color;
+        // color: $text-color;
       }
 
       pac-indicator-detail {
         .mat-card {
           .ant-statistic-title {
-            color: $description-color;
+            // color: $description-color;
           }
         }
 
         pac-analytical-card {
           .mat-card-header-text {
-            color: $text-color;
+            // color: $text-color;
           }
         }
       }
-
-      .Trend-Up {
-        color: $trend-up;
-      }
-
-      .Trend-Down {
-        color: $trend-down;
-      }
-
-      .reverse-semantic-color {
-        .mat-card {
-          .Trend-Up {
-            color: $trend-down;
-          }
-
-          .Trend-Down {
-            color: $trend-up;
-          }
-        }
-      }
-    }
-  }
-
-  .indicator-market-app {
-    background-color: $background-color;
-    color: $text-color;
-
-    .pac-indicator__tag {
-      width: 60px;
-      text-align: right;
-      border-radius: 5px;
-      padding: 0 5px;
-      cursor: pointer;
-
-      &.Trend-Up {
-        background-color: $trend-up;
-        color: white;
-      }
-      &.Trend-Down {
-        background-color: $trend-down;
-        color: white;
-      }
-    }
-
-    .Trend-Up {
-      color: $trend-up;
-    }
-
-    .Trend-Down {
-      color: $trend-down;
-    }
-
-    &.reverse-semantic-color {
-      .Trend-Up {
-        color: $trend-down;
-      }
-      .Trend-Down {
-        color: $trend-up;
-      }
-      .pac-indicator__tag {
-        &.Trend-Up {
-          background-color: $trend-down;
-          color: white;
-        }
-        &.Trend-Down {
-          background-color: $trend-up;
-          color: white;
-        }
-      }
-    }
-
-    pac-indicator-item {
-      color: $text-color;
-    }
-
-    .mat-mdc-list .mat-mdc-list-item {
-      border-bottom: 1px solid #f0f0f010;
-      user-select: none;
-
-      &.selected {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .am-picker-popup-content {
-      background-color: $background-color;
-    }
-
-    .am-picker-col-mask {
-      background-image: linear-gradient(to bottom, rgb(109 109 109 / 95%), rgb(131 131 131 / 60%)),
-        linear-gradient(to top, rgb(121 121 121 / 95%), rgb(122 121 121 / 60%));
     }
   }
 
@@ -167,10 +76,6 @@ $trend-down: rgb(254, 60, 46);
       }
     }
 
-    .pac-indicator-app__business {
-      background-color: rgb(255 255 255 / 10%);
-    }
-
     .ngm-analytical-card {
       .ngm-card-header {
         white-space: nowrap;
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 e69de29bb..e8faef324 100644
--- a/libs/apps/indicator-market/src/lib/_indicator-market.component.scss
+++ b/libs/apps/indicator-market/src/lib/_indicator-market.component.scss
@@ -0,0 +1,78 @@
+$trend-up: rgb(49, 199, 90);
+$trend-down: rgb(254, 60, 46);
+$background-color: #090909;
+
+.Trend-Up {
+  color: $trend-up;
+}
+
+.Trend-Down {
+  color: $trend-down;
+}
+
+.reverse-semantic-color {
+  .mat-card {
+    .Trend-Up {
+      color: $trend-down;
+    }
+
+    .Trend-Down {
+      color: $trend-up;
+    }
+  }
+}
+
+.indicator-market-app {
+  .pac-indicator__tag {
+    width: 60px;
+    text-align: right;
+    border-radius: 5px;
+    padding: 0 5px;
+    cursor: pointer;
+
+    &.Trend-Up {
+      background-color: $trend-up;
+      color: white;
+    }
+    &.Trend-Down {
+      background-color: $trend-down;
+      color: white;
+    }
+  }
+
+  .Trend-Up {
+    color: $trend-up;
+  }
+
+  .Trend-Down {
+    color: $trend-down;
+  }
+
+  &.reverse-semantic-color {
+    .Trend-Up {
+      color: $trend-down;
+    }
+    .Trend-Down {
+      color: $trend-up;
+    }
+    .pac-indicator__tag {
+      &.Trend-Up {
+        background-color: $trend-down;
+        @apply text-neutral-100;
+      }
+      &.Trend-Down {
+        background-color: $trend-up;
+        @apply text-neutral-100;
+      }
+    }
+  }
+
+  .am-picker-popup-content {
+    background-color: $background-color;
+  }
+
+  .am-picker-col-mask {
+    background-image: linear-gradient(to bottom, rgb(109 109 109 / 95%), rgb(131 131 131 / 60%)),
+      linear-gradient(to top, rgb(121 121 121 / 95%), rgb(122 121 121 / 60%));
+  }
+}
diff --git a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html
index f9be5a431..6097e9f30 100644
--- a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html
+++ b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html
@@ -66,6 +66,8 @@
     </div>
   </mat-card-header>
 
+  <mat-divider></mat-divider>
+
   <mat-card-content class="flex-1 overflow-y-auto">
 
     <div *ngIf="isMobile$ | async" class="flex justify-end items-center gap-4 py-2">
@@ -75,7 +77,7 @@
     <ngm-analytical-card class="h-[300px]" *ngFor="let dataSettings of dataSettings$ | async; trackBy: trackById"
       [dataSettings]="dataSettings"
       [chartOptions]="chartOptions$ | async"
-      [chartSettings]="{theme: 'dark'}"
+      [chartSettings]="{theme: primaryTheme$()}"
       [options]="{
         realtimeLinked: true,
         disableContextMenu: true
@@ -83,9 +85,9 @@
       (slicersChanging)="onPeriodSlicerChange($event)"
       (explain)="onExplain($event)"
       >
-      <div class="text-slate-200 flex-1 flex items-center md:gap-2 ">
-        <span *ngFor="let p of PERIODS" class="text-sm cursor-pointer inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-lg hover:bg-white/10 focus:bg-white/20"
-          [ngClass]="{'bg-white/20 text-slate-100': p.name === selectedPeriod?.name}"
+      <div class=" flex-1 flex items-center md:gap-2">
+        <span *ngFor="let p of PERIODS" class="pac-indicator__period-tag text-sm cursor-pointer inline-flex items-center font-semibold leading-sm uppercase px-2 py-1 rounded-lg"
+          [ngClass]="{selected: p.name === selectedPeriod?.name}"
           (click)="selectedPeriod = p"
         >
           {{p.name}}
@@ -97,7 +99,7 @@
       <div class="title text-lg">
         {{ 'IndicatorApp.BusinessCaliber' | translate: {Default: 'Business Caliber'} }}
       </div>
-      <div class="content whitespace-pre-wrap text-gray-300">{{ indicator.business }}</div>
+      <div class="content whitespace-pre-wrap opacity-50">{{ indicator.business }}</div>
     </div>
     
     <div *ngIf="freeDimensions$ | async as freeDimensions" class="flex flex-col">
@@ -152,7 +154,7 @@
       
       <div *ngFor="let comment of messages; index as i" class="relative pt-2 pr-2 flex flex-col justify-start items-stretch">
         <div *ngIf="comment.prompt" class="ml-8 flex justify-end mb-4">
-          <div class="overflow-auto max-w-full p-4 text-right bg-bluegray-800 rounded-lg rounded-tr-none ">
+          <div class="pac-indicator__comment-content overflow-auto max-w-full p-4 text-right rounded-lg rounded-tr-none ">
             <div class="whitespace-pre-line">
               {{comment.prompt}}
             </div>
@@ -160,7 +162,7 @@
         </div>
 
         <div class="mr-8 flex justify-start mb-4">
-          <div class="overflow-auto max-w-full p-4 text-left bg-bluegray-700 rounded-lg rounded-tl-none ">
+          <div class="pac-indicator__comment-content overflow-auto max-w-full p-4 text-left rounded-lg rounded-tl-none ">
             <markdown clipboard class="whitespace-pre-line"
                 lineNumbers
                 [start]="5"
@@ -177,9 +179,9 @@
       </div>
 
       <div *ngIf="modeler" class="w-full flex flex-col">
-        <div class="relative w-full flex gap-2 p-2 rounded-lg bg-bluegray-800">
+        <div class="pac-indicator__comment-input relative w-full flex gap-2 p-2 rounded-lg">
           <textarea type="text" id="simple-search" class="pac-indicator-app__comment-input block flex-1 p-0 bg-transparent border-none outline-none
-            text-white text-base"
+            text-base"
             placeholder="{{ 'IndicatorApp.AskOrComment' | translate: {Default: 'Ask or comment'} }}..." required
             matInput [(ngModel)]="prompt"
             [disabled]="answering"
@@ -204,19 +206,19 @@
 
       <div *ngFor="let comment of comments" class="flex flex-col justify-start items-stretch mb-4">
         <div class="relative ml-8 flex justify-end pt-2 pr-2">
-          <div class="overflow-auto max-w-full p-4 text-right bg-bluegray-800 rounded-xl rounded-br-none ">
+          <div class="pac-indicator__comment-content overflow-auto max-w-full p-4 text-right rounded-xl rounded-tr-none ">
             <div class="whitespace-pre-line">
               {{comment.content}}
             </div>
           </div>
 
-          <button *ngIf="modeler" mat-icon-button displayDensity="compact" class="pac-indicator-app__comment-remove right-0 top-0"
+          <button *ngIf="modeler" mat-icon-button displayDensity="compact" class="pac-indicator-app__comment-remove"
             (click)="deleteComment(comment)">
             <mat-icon>close</mat-icon>
           </button>
         </div>
 
-        <span *ngIf="comment.options?.period" class="self-end text-xs font-medium mt-1 mr-2 px-2.5 py-0.5 rounded bg-bluegray-800 text-amber-400">
+        <span *ngIf="comment.options?.period" class="pac-indicator__comment-period self-end text-xs font-medium mt-1 mr-2 px-2.5 py-0.5 rounded">
           {{ comment.options?.periodCaption || comment.options?.period }}
         </span>
       </div>
diff --git a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.scss b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.scss
index 959001ad9..e6708848f 100644
--- a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.scss
+++ b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.scss
@@ -1,3 +1,8 @@
+@use '@angular/material/core/tokens/token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix-color: (ngm, color);
+
 :host {
   display: flex;
   flex: 1;
@@ -13,7 +18,7 @@
   padding: 0;
 
   .mat-mdc-card-header {
-    border-bottom: 1px solid grey;
+    // border-bottom: 1px solid grey;
     padding: 10px 10px 0 10px;
   }
 
@@ -22,23 +27,43 @@
   }
 }
 
-.pac-indicator-app__business {
-  padding: 1rem;
-  border-radius: 1rem;
-  
-  .title {
-    margin-bottom: 0.5rem;
-  }
+.pac-indicator-app__close {
+  @apply bg-white/10;
 }
 
-.pac-indicator-app__comment-remove {
-  @apply absolute top-0 right-0 bg-bluegray-800;
+.pac-indicator__period-tag {
+  @apply text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-200 dark:hover:bg-white/10 dark:focus:bg-white/20 dark:text-neutral-200;
+  &.selected {
+    @apply font-extrabold bg-neutral-200 text-neutral-800 dark:bg-white/20 dark:text-neutral-100;
+  }
 }
 
-.pac-indicator-app__comment-input {
-  @apply caret-white;
+@mixin _bg-surface-container() {
+  background-color: var(#{token-utils.get-token-variable(surface-container)});
 }
 
-.pac-indicator-app__close {
-  @apply bg-white/10;
-}
\ No newline at end of file
+@include token-utils.use-tokens($prefix-color, (surface-container: white, surface-container-low: #{theme('colors.neutral.100')})) {
+  .pac-indicator-app__business {
+    padding: 1rem;
+    border-radius: 1rem;
+    background-color: var(#{token-utils.get-token-variable(surface-container-low)});
+    
+    .title {
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  .pac-indicator__comment-input {
+    @include _bg-surface-container();
+  }
+  .pac-indicator__comment-content {
+    @include _bg-surface-container();
+  }
+  .pac-indicator__comment-period {
+    @include _bg-surface-container();
+  }
+  .pac-indicator-app__comment-remove {
+    @include _bg-surface-container();
+    @apply absolute top-0 right-0;
+  }
+}
diff --git a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts
index 300ff74f0..0d305a3cd 100644
--- a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts
+++ b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts
@@ -7,7 +7,6 @@ import {
   HostBinding,
   inject,
   Input,
-  LOCALE_ID,
   ViewChild
 } from '@angular/core'
 import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet'
@@ -48,8 +47,8 @@ import {
   TimeRangeType
 } from '@metad/ocap-core'
 import { TranslateService } from '@ngx-translate/core'
-import { CommentsService, ToastrService } from '@metad/cloud/state'
-import { convertTableToCSV } from '@metad/core'
+import { CommentsService, Store, ToastrService } from '@metad/cloud/state'
+import { convertTableToCSV, LanguagesEnum } from '@metad/core'
 import { graphic } from 'echarts/core'
 import { NGXLogger } from 'ngx-logger'
 import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
@@ -62,7 +61,6 @@ import {
   firstValueFrom,
   map,
   Observable,
-  scan,
   shareReplay,
   switchMap,
   withLatestFrom
@@ -127,15 +125,16 @@ export class IndicatorDetailComponent {
   private store = inject(IndicatorsStore)
   private indicatoryMarketComponent = inject(IndicatoryMarketComponent)
   private logger = inject(NGXLogger)
-  private locale: string = inject(LOCALE_ID)
+  // private locale: string = inject(LOCALE_ID)
   private data? = inject<{ id: string }>(MAT_BOTTOM_SHEET_DATA, { optional: true })
   private _bottomSheetRef? = inject<MatBottomSheetRef<IndicatorDetailComponent>>(MatBottomSheetRef, { optional: true })
   private _cdr = inject(ChangeDetectorRef)
   private toastrService = inject(ToastrService)
-  private translateService = inject(TranslateService)
   private copilotService = inject(CopilotService)
   private dsCoreService = inject(NgmDSCoreService)
   private commentsService = inject(CommentsService)
+  readonly #translate = inject(TranslateService)
+  readonly #store = inject(Store)
 
   private _id$ = new BehaviorSubject<string>(null)
   @Input()
@@ -154,6 +153,11 @@ export class IndicatorDetailComponent {
     return this.copilotService.enabled
   }
 
+  /**
+  |--------------------------------------------------------------------------
+  | Properties
+  |--------------------------------------------------------------------------
+  */
   businessAreaUser: IBusinessAreaUser
   get modeler() {
     return (
@@ -169,6 +173,14 @@ export class IndicatorDetailComponent {
   messages = []
   relative = true
 
+  readonly currentLang$ = toSignal(this.#translate.onLangChange.pipe(map((event) => event.lang)))
+  readonly primaryTheme$ = toSignal(this.#store.primaryTheme$)
+
+  /**
+  |--------------------------------------------------------------------------
+  | Observables
+  |--------------------------------------------------------------------------
+  */
   public readonly period$ = new BehaviorSubject(null)
   get selectedPeriod() {
     return this.period$.value
@@ -320,8 +332,7 @@ export class IndicatorDetailComponent {
     map((indicator) => indicator.trend),
     distinctUntilChanged(),
     map((indicatorTrend) => {
-      const color =
-        this.locale === 'zh-Hans'
+      const color = this.currentLang$() === LanguagesEnum.SimplifiedChinese
           ? TrendReverseColor[Trend[indicatorTrend] ?? Trend[Trend.None]]
           : TrendColor[Trend[indicatorTrend] ?? Trend[Trend.None]]
       return {
@@ -448,12 +459,13 @@ export class IndicatorDetailComponent {
     this.indicator$,
     this.periodSlicer$,
     this.freeSlicers$,
-    this.entityType$
+    this.entityType$,
+    this.#store.primaryTheme$
   ]).pipe(
-    map(([indicator, timeSlicer, freeSlicers, entityType]) => {
+    map(([indicator, timeSlicer, freeSlicers, entityType, primaryTheme]) => {
       const locale = this.store.locale
-      const pieName = this.translateService.instant('IndicatorApp.Pie', {Default: 'Pie'})
-      const barName = this.translateService.instant('IndicatorApp.Bar', {Default: 'Bar'})
+      const pieName = this.#translate.instant('IndicatorApp.Pie', {Default: 'Pie'})
+      const barName = this.#translate.instant('IndicatorApp.Bar', {Default: 'Bar'})
 
       return indicator.filters?.map((filter, index) => {
         const slicers = [...indicator.filters]
@@ -512,7 +524,7 @@ export class IndicatorDetailComponent {
             }
           },
           chartSettings: <ChartSettings>{
-            theme: 'dark',
+            theme: primaryTheme,
             universalTransition: true,
             chartTypes: [
               {
@@ -592,8 +604,16 @@ export class IndicatorDetailComponent {
   )
 
   /**
-   * Subscriptions
-   */
+  |--------------------------------------------------------------------------
+  | Signals
+  |--------------------------------------------------------------------------
+  */
+
+  /**
+  |--------------------------------------------------------------------------
+  | Subscriptions
+  |--------------------------------------------------------------------------
+  */
   // New indicator
   private _indicatorSub = this.indicator$.pipe(takeUntilDestroyed()).subscribe(async (indicator) => {
     // Clear free slicers when new indicator
@@ -707,7 +727,7 @@ export class IndicatorDetailComponent {
   async askCopilot() {
     const queryResult = this.explainData?.[1]
     if (queryResult) {
-      const lang = this.translateService.currentLang
+      const lang = this.#translate.currentLang
       const dataSource = await firstValueFrom(this.dsCoreService.getDataSource(this.explainData?.[0].dataSource))
       const entityType = await firstValueFrom(dataSource.selectEntityType(this.explainData?.[0].entitySet))
 
@@ -821,6 +841,6 @@ export class IndicatorDetailComponent {
 
   @HostBinding('class.reverse-semantic-color')
   public get reverse() {
-    return this.locale === 'zh-Hans'
+    return this.currentLang$() === LanguagesEnum.SimplifiedChinese
   }
 }
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 84e5a375a..050badde3 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.html
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.html
@@ -50,12 +50,14 @@
       </button>
     </div>
 
-    <mat-list>
-      <mat-list-item *cdkVirtualFor="let item of indicatorDataSource; trackBy: trackById; templateCacheSize: 0" matRipple
-        [class.selected]="selected$() === item.id"
-        (click)="click(item)">
-        <pac-indicator-item class="flex-1 overflow-hidden" [indicator]="item" [tag]="tag$()"></pac-indicator-item>
-      </mat-list-item>
+    <mat-list class="pac-indicator-list">
+      <ng-container *cdkVirtualFor="let item of indicatorDataSource; trackBy: trackById; templateCacheSize: 0">
+        <mat-list-item matRipple [class.selected]="selected$() === item.id"
+          (click)="click(item)">
+          <pac-indicator-item class="flex-1 overflow-hidden" [indicator]="item" [tag]="tag$()"></pac-indicator-item>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+      </ng-container>
     </mat-list>
   </cdk-virtual-scroll-viewport>
 
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 0a68186d5..1378fe098 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.scss
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.scss
@@ -1,4 +1,3 @@
-$background-color: #090909;
 $border-bottom-color: #23282a;
 $searching-transition: all 300ms;
 
@@ -84,10 +83,24 @@ $searching-transition: all 300ms;
 }
 
 .mat-datepicker-input.pac-indicator-market__date-picker {
-  background-color: $background-color;
   border: unset;
 }
 
 .pac-indicator-app__options {
   background-color: var(--ngm-card-bg-color);
 }
+
+.pac-indicator-list {
+  .mat-divider.mat-divider-horizontal {
+    @apply mx-2 border-black/5 dark:border-white/5;
+  }
+
+  .mat-mdc-list-item {
+    @apply select-none hover:bg-black/5
+    dark:hover:bg-white/10;
+
+    &.selected {
+      @apply bg-black/5 dark:bg-white/10
+    }
+  }
+}
\ No newline at end of file
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 02311eab8..455e4dd02 100644
--- a/libs/apps/indicator-market/src/lib/indicator-market.component.ts
+++ b/libs/apps/indicator-market/src/lib/indicator-market.component.ts
@@ -42,7 +42,6 @@ export class IndicatoryMarketComponent extends ComponentStore<{ id?: string }> {
   NgxPopperjsTriggers = NgxPopperjsTriggers
   NgxPopperjsPlacements = NgxPopperjsPlacements
 
-  @HostBinding('class.ngm-theme-dark') @HostBinding('class.dark')isDarkTheme = true
   @HostBinding('class.indicator-market-app') isIndicatoryMarketComponent = true
   @HostBinding('class.searching') searching = false
 
@@ -133,7 +132,7 @@ export class IndicatoryMarketComponent extends ComponentStore<{ id?: string }> {
           tap((isMobile) => {
             if (isMobile && id) {
               this._bottomSheetRef = this._bottomSheet.open(IndicatorDetailComponent, {
-                panelClass: ['pac-indicator-market__detail-container', 'ngm-theme-dark'],
+                panelClass: ['pac-indicator-market__detail-container'],
                 viewContainerRef: this._viewContainerRef,
                 data: { id }
               })
diff --git a/libs/apps/indicator-market/src/lib/shared/sparkline.directive.ts b/libs/apps/indicator-market/src/lib/shared/sparkline.directive.ts
index 23c59424a..d3b37fa5b 100644
--- a/libs/apps/indicator-market/src/lib/shared/sparkline.directive.ts
+++ b/libs/apps/indicator-market/src/lib/shared/sparkline.directive.ts
@@ -1,11 +1,25 @@
-import { AfterViewInit, DestroyRef, Directive, ElementRef, Input, LOCALE_ID, inject } from '@angular/core'
+import {
+  AfterViewInit,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  Injector,
+  Input,
+  LOCALE_ID,
+  computed,
+  effect,
+  inject,
+  runInInjectionContext,
+  signal
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { TinyArea } from '@antv/g2plot/esm/plots/tiny-area'
-import { isNil } from '@metad/ocap-core'
-import { BehaviorSubject, combineLatest } from 'rxjs'
-import { distinctUntilChanged, filter, map, pluck } from 'rxjs/operators'
-import { IndicatorState, Trend, TrendColor, TrendReverseColor } from '../types'
-import { StatisticalType } from '../types'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { Store } from '@metad/cloud/state'
+import { LanguagesEnum } from '@metad/core'
+import { TranslateService } from '@ngx-translate/core'
+import { BehaviorSubject } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { IndicatorState, StatisticalType, Trend, TrendColor, TrendReverseColor } from '../types'
 
 @Directive({
   selector: '[pacSparkLine]'
@@ -14,6 +28,9 @@ export class AppSparkLineDirective implements AfterViewInit {
   private locale = inject(LOCALE_ID)
   private elRef = inject(ElementRef)
   readonly destroyRef = inject(DestroyRef)
+  readonly #injector = inject(Injector)
+  readonly #store = inject(Store)
+  readonly #translate = inject(TranslateService)
 
   @Input() get indicator(): IndicatorState {
     return this._indicator$.value
@@ -24,42 +41,37 @@ export class AppSparkLineDirective implements AfterViewInit {
   private _indicator$ = new BehaviorSubject(null)
 
   @Input() get statisticalType() {
-    return this.statisticalType$.value
+    return this.statisticalType$()
   }
   set statisticalType(value) {
-    this.statisticalType$.next(value)
+    this.statisticalType$.set(value)
   }
-  protected statisticalType$ = new BehaviorSubject<string>(StatisticalType.CurrentPeriod)
+  readonly statisticalType$ = signal(StatisticalType.CurrentPeriod)
+  readonly indicatorTrends$ = toSignal(this._indicator$.pipe(map((indicator) => indicator?.trends)))
+  readonly primaryTheme$ = toSignal(this.#store.primaryTheme$)
 
-  public readonly config$ = combineLatest([
-    this._indicator$.pipe(
-      filter((item) => !isNil(item)),
-      pluck('trends'),
-      distinctUntilChanged(),
-    ),
-    this.statisticalType$.pipe(
-      filter((item) => !isNil(item)),
-      distinctUntilChanged(),
-    )
-  ]).pipe(
-    map(([trends, measureFilter]) => {
-      let data = []
-      switch (measureFilter) {
-        case StatisticalType.CurrentPeriod:
-          data = trends?.map((y) => y['CURRENT']) || []
-          break
-        case StatisticalType.Accumulative:
-          data = trends?.map((y) => y['YTD']) || []
-          break
-      }
+  readonly config$ = computed(() => {
+    const trends = this.indicatorTrends$()
+    const measureFilter = this.statisticalType$()
+    let data = []
+    switch (measureFilter) {
+      case StatisticalType.CurrentPeriod:
+        data = trends?.map((y) => y['CURRENT']) || []
+        break
+      case StatisticalType.Accumulative:
+        data = trends?.map((y) => y['YTD']) || []
+        break
+    }
 
-      const color = this.locale === 'zh-Hans' ? TrendReverseColor[Trend[this.indicator.trend]] : TrendColor[Trend[this.indicator.trend]]
-      return {
-        data,
-        color
-      }
-    })
-  )
+    const color =
+      this.#translate.currentLang === LanguagesEnum.SimplifiedChinese
+        ? TrendReverseColor[Trend[this.indicator.trend]]
+        : TrendColor[Trend[this.indicator.trend]]
+    return {
+      data,
+      color
+    }
+  })
 
   ngAfterViewInit(): void {
     const tinyArea = new TinyArea(this.elRef.nativeElement, {
@@ -73,41 +85,43 @@ export class AppSparkLineDirective implements AfterViewInit {
       tooltip: false
     })
 
-    this.config$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ data, color }) => {
-      tinyArea.changeData(data)
-      tinyArea.update({
-        line: {
-          color: color
-        },
-        areaStyle: {
-          fill: `l(270) 0:#00000000 1:${color}`
-        },
-        annotations: [
-          {
-            type: 'line',
-            start: ['min', 'mean'],
-            end: ['max', 'mean'],
-            // text: {
-            //   content: '平均值',
-            //   offsetY: -2,
-            //   style: {
-            //     textAlign: 'left',
-            //     fontSize: 10,
-            //     fill: 'rgba(44, 53, 66, 0.45)',
-            //     textBaseline: 'bottom',
-            //   },
-            // },
-            style: {
-              lineWidth: 2,
-              lineDash: [2, 2],
-              stroke: color,
-            },
+    runInInjectionContext(this.#injector, () => {
+      effect(() => {
+        const { data, color } = this.config$()
+        tinyArea.changeData(data)
+        tinyArea.update({
+          line: {
+            color: color
+          },
+          areaStyle: {
+            fill: `l(270) 0:${color}00 1:${color}${this.primaryTheme$() === 'dark' ? '' : '70'}`
           },
-      ]
+          annotations: [
+            {
+              type: 'line',
+              start: ['min', 'mean'],
+              end: ['max', 'mean'],
+              // text: {
+              //   content: '平均值',
+              //   offsetY: -2,
+              //   style: {
+              //     textAlign: 'left',
+              //     fontSize: 10,
+              //     fill: 'rgba(44, 53, 66, 0.45)',
+              //     textBaseline: 'bottom',
+              //   },
+              // },
+              style: {
+                lineWidth: 2,
+                lineDash: [2, 2],
+                stroke: color
+              }
+            }
+          ]
+        })
       })
     })
 
     tinyArea.render()
   }
-
 }