diff --git a/apps/cloud/src/app/@shared/_components-theme.scss b/apps/cloud/src/app/@shared/_components-theme.scss
index 82b3512a5..eaa0ba1d1 100644
--- a/apps/cloud/src/app/@shared/_components-theme.scss
+++ b/apps/cloud/src/app/@shared/_components-theme.scss
@@ -188,7 +188,7 @@
 
   .mat-toolbar.ngm-density__compact {
     &.mat-toolbar-multiple-rows {
-      min-height: 58px;
+      // min-height: 58px;
     }
     &.mat-toolbar-row, &.mat-toolbar-single-row {
       height: 33px;
diff --git a/apps/cloud/src/app/@shared/upload/upload.component.html b/apps/cloud/src/app/@shared/upload/upload.component.html
index 0dccad24e..c82556928 100644
--- a/apps/cloud/src/app/@shared/upload/upload.component.html
+++ b/apps/cloud/src/app/@shared/upload/upload.component.html
@@ -1,4 +1,4 @@
-<div class="relative flex-1 flex m-4 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50"
+<div class="container relative flex-1 flex m-4 border-2 border-dashed rounded-lg"
     ngmDnd (fileDropped)="onFileDropped($event)"
   >
     <input type="file" #fileDropRef id="fileDropRef" multiple class="invisible"
@@ -18,11 +18,13 @@ <h3 class="text-sm text-gray-500 dark:text-gray-400">
         {{ 'PAC.MODEL.CREATE_TABLE.Or' | translate: {Default: 'or'} }}
       </h3>
       
-	    <label for="fileDropRef" class="block text-sm text-slate-500
+	    <label for="fileDropRef" class="block text-sm
         py-2 px-4
         rounded-full border-0 font-semibold
+        text-slate-500
         bg-gray-100
-        hover:bg-bluegray-200"
+        hover:bg-bluegray-200
+        dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-neutral-200"
         >
         <span class="sr-only">Choose profile photo</span>
         <span>
diff --git a/apps/cloud/src/app/@shared/upload/upload.component.scss b/apps/cloud/src/app/@shared/upload/upload.component.scss
index 99d9031dc..7798dd590 100644
--- a/apps/cloud/src/app/@shared/upload/upload.component.scss
+++ b/apps/cloud/src/app/@shared/upload/upload.component.scss
@@ -1,5 +1,8 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
+  background-color: var(--mdc-elevated-card-container-color);
+  @apply flex-1 flex flex-col;
+}
+
+.container {
+  border-color: var(--mat-divider-color);
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/@shared/user/profile/profile.component.scss b/apps/cloud/src/app/@shared/user/profile/profile.component.scss
index bdbfc38f8..a1cdcaa82 100644
--- a/apps/cloud/src/app/@shared/user/profile/profile.component.scss
+++ b/apps/cloud/src/app/@shared/user/profile/profile.component.scss
@@ -1,5 +1,5 @@
 :host {
-  background-color: var(--ngm-card-bg-color);
-  border-color: var(--ngm-card-border-color);
+  background-color: var(--mdc-outlined-card-container-color);
+  border-color: var(--mdc-outlined-card-outline-color);
   @apply border rounded-lg;
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/_app.component.scss b/apps/cloud/src/app/_app.component.scss
index 6d142edaf..104a15bde 100644
--- a/apps/cloud/src/app/_app.component.scss
+++ b/apps/cloud/src/app/_app.component.scss
@@ -3,38 +3,12 @@
 @import './features/project/_project.component';
 @import './features/_features.component';
 
-.ngm-theme-dark,
-.dark {
-  --ngm-bg-color: rgb(10 10 10); // bg-neutral-950
-  --ngm-card-bg-color: theme(colors.bluegray.800);
-  --ngm-card-border-color: theme(colors.bluegray.700);
-  --ngm-primary-color: theme(colors.bluegray.500);
-  --ngm-text-primary-color: theme(colors.bluegray.200);
-
-  --mdc-theme-error: theme(colors.red.400);
-}
-
-.dark-green {
-  --ngm-primary-color: theme(colors.green.500);
-  --ngm-text-primary-color: theme(colors.green.100);
-}
 .dark.thin {
   --ngm-bg-color: rgb(46 16 101); // bg-violet-950
   --ngm-primary-color: theme(colors.green.500);
   --ngm-text-primary-color: theme(colors.green.100);
 }
 
-body,
-.light {
-  --ngm-bg-color: theme(colors.gray.50);
-  --ngm-card-bg-color: theme(colors.white);
-  --ngm-card-border-color: theme(colors.gray.100);
-
-  --ngm-text-primary-color: theme(colors.bluegray.800);
-
-  --mdc-theme-error: theme(colors.red.400);
-}
-
 // popper
 .ngxp__container.ngxp__animation {
   @apply p-0 shadow-none z-10;
@@ -66,7 +40,7 @@ body,
   @apply text-base font-light;
 }
 .pac-page-body {
-  @apply overflow-auto relative bg-slate-50 dark:bg-slate-50/10;
+  @apply overflow-auto relative ;
 }
 .pac-page-body-toolbar {
   @apply flex justify-between items-center;
@@ -87,24 +61,6 @@ body,
   @apply rounded-lg shadow-sm;
 }
 
-/**
- * 纵向 nav bar
- */
-.pac-nav__tab-bar {
-  .pac-nav__tab-bar {
-    @apply -ml-2 -mr-2 border-2 border-transparent;
-  }
-  .pac-nav__tab-bar:hover {
-    @apply bg-slate-100 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
-  }
-  .pac-nav__tab-bar:focus {
-    @apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
-  }
-  .pac-nav__tab-bar.active {
-    @apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-700 dark:border-bluegray-500;
-  }
-}
-
 .cdk-overlay-container .mat-mdc-dialog-container.mdc-dialog .mdc-dialog__content.pac-dialog-content {
   @apply p-0;
 }
diff --git a/apps/cloud/src/app/features/indicator/market/market.component.html b/apps/cloud/src/app/features/indicator/market/market.component.html
index e2d412b4f..eed3d4d3e 100644
--- a/apps/cloud/src/app/features/indicator/market/market.component.html
+++ b/apps/cloud/src/app/features/indicator/market/market.component.html
@@ -1,13 +1,9 @@
 <div class="px-4 py-2 flex flex-wrap justify-between items-center">
   <div class="flex items-center">
-    <button mat-icon-button displayDensity="cosy" (click)="drawer.toggle()">
-      <mat-icon fontSet="material-icons-round">segment</mat-icon>
-    </button>
-
     <span class="text-xl">
       {{ 'PAC.INDICATOR.IndicatorMarket' | translate: {Default: "Indicator Market"} }}
     </span>
-    <span class="text-sm ml-4">
+    <span class="text-sm ml-4 opacity-50">
       {{ 'PAC.MENU.INDICATOR.INDICATOR_MARKET_DESC' | translate: {Default: "Browse indicators and apply for permissions"} }}
     </span>
     
@@ -28,7 +24,7 @@
 </div>
 
 <mat-drawer-container autosize class="flex-1 m-2 mt-0">
-  <mat-drawer #drawer class="border border-gray-200 rounded-xl" mode="side" opened ngmResizer [resizerWidth]="272">
+  <mat-drawer #drawer class="border rounded-xl" mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
     <div class="flex justify-start items-start gap-2 p-4">
       <label class="w-10 shrink-0">{{ 'PAC.INDICATOR.Types' | translate: {Default: 'Types'} }}</label>
       <ngm-tags class="flex-1" selectable [tags]="[
@@ -74,110 +70,112 @@
     ></ngm-tree-select>
 
     <div ngmResizerBar resizerBarPosition="right"
-         cdkDrag
+         cdkDrag  
          cdkDragLockAxis="x"
     ></div>
   </mat-drawer>
 
-  <div class="pac-indicator-market__sidenav-content p-2 flex-1 h-full flex flex-col">
-    <ng-container *ngFor="let item of indicators$ | async">
-      <div class="m-2 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-2">
-        <div class="col-span-2 md:col-span-6 lg:col-span-8 text-lg my-2">
-          <a [routerLink]="['/indicator/viewer', item.id]">
+  <mat-drawer-content >
+    <div class="pac-indicator-market__sidenav-content p-2 flex-1 h-full flex flex-col overflow-auto">
+      <ng-container *ngFor="let item of indicators$ | async">
+        <div class="m-2 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-2">
+          <div class="col-span-2 md:col-span-6 lg:col-span-8 text-lg my-2">
+            <a [routerLink]="['/indicator/viewer', item.id]">
+              <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
+                [content]="item.name">
+              </span>
+            </a>
+          </div>
+  
+          <div class="col-span-2 md:col-span-6 lg:col-span-8 text-gray-500">
             <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
-              [content]="item.name">
+                  [content]="item.business"
+                >
             </span>
-          </a>
-        </div>
-
-        <div class="col-span-2 md:col-span-6 lg:col-span-8 text-gray-500">
-          <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
-                [content]="item.business"
-              >
-          </span>
-        </div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.CODE' | translate }}:
-        </div>
-        <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-          <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
-            [content]="item.code"></span>
-        </div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
-        </div>
-        <pac-indicator-type [indicator]="item"></pac-indicator-type>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
-        </div>
-        <div>
-          <span *ngIf="item.certification" class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
-            {{item.certification.name}}
-          </span>
-        </div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
-        </div>
-        <div>{{item.principal}}</div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
-        </div>
-        <pac-tags [tags]="item.tags"></pac-tags>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.CREATED_AT' | translate }}:
-        </div>
-        <div>
-          {{item.createdAt}}
-        </div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
-        </div>
-        <div>{{item.businessArea?.name}}</div>
-
-        <div class="text-right">
-          {{ 'PAC.INDICATOR.REGISTER.STATUS' | translate }}:
-        </div>
-        <div class="h-full flex items-start">
-          <span *ngIf="item.isActive" class="flex w-3 h-3 m-1 bg-green-500 rounded-full"></span>
-        </div>
-      </div>
-
-      <div class="my-2">
-        <div class="flex justify-end">
-          <div *ngIf="item.permissionRefuses">
-            <mat-icon color="warn" [matBadge]="item.permissionRefuses"
-              [matTooltip]="'PAC.INDICATOR.PermissionRefused' | translate: {Default: 'Permission Refused'}">block</mat-icon>
           </div>
   
-          <div *ngIf="item.permissionApproved">
-            <mat-icon class="text-green-600" [matTooltip]="'PAC.INDICATOR.PermissionApproved' | translate: {Default: 'Permission Approved'}">task_alt</mat-icon>
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.CODE' | translate }}:
+          </div>
+          <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
+              [content]="item.code"></span>
+          </div>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
           </div>
+          <pac-indicator-type [indicator]="item"></pac-indicator-type>
   
-          <div *ngIf="item.permissionRequests">
-            <mat-icon color="accent" fontSet="material-icons-outlined"
-              [matTooltip]="'PAC.INDICATOR.PermissionRequested' | translate: {Default: 'Permission Requested'}">pending</mat-icon>
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
           </div>
-
-          <div ngmButtonGroup displayDensity="cosy" *ngIf="!item.permissionApproved && !item.permissionRequests">
-            <button mat-button displayDensity="compact" [disabled]="!!item.permissionRequests" (click)="requestPermission(item.id)">
-              <div class="flex justify-center items-center">
-                <mat-icon fontSet="material-icons-outlined">approval</mat-icon>
-                {{ 'PAC.INDICATOR.MARKET.REQUEST' | translate: {Default: 'Request'} }}
-              </div>
-            </button>
+          <div>
+            <span *ngIf="item.certification" class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
+              {{item.certification.name}}
+            </span>
+          </div>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
+          </div>
+          <div>{{item.principal}}</div>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
+          </div>
+          <pac-tags [tags]="item.tags"></pac-tags>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.CREATED_AT' | translate }}:
+          </div>
+          <div>
+            {{item.createdAt}}
+          </div>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
+          </div>
+          <div>{{item.businessArea?.name}}</div>
+  
+          <div class="text-right">
+            {{ 'PAC.INDICATOR.REGISTER.STATUS' | translate }}:
+          </div>
+          <div class="h-full flex items-start">
+            <span *ngIf="item.isActive" class="flex w-3 h-3 m-1 bg-green-500 rounded-full"></span>
           </div>
         </div>
-      </div>
-
-      <mat-divider></mat-divider>
-    </ng-container>
-  </div>
-
+  
+        <div class="my-2">
+          <div class="flex justify-end">
+            <div *ngIf="item.permissionRefuses">
+              <mat-icon color="warn" [matBadge]="item.permissionRefuses"
+                [matTooltip]="'PAC.INDICATOR.PermissionRefused' | translate: {Default: 'Permission Refused'}">block</mat-icon>
+            </div>
+    
+            <div *ngIf="item.permissionApproved">
+              <mat-icon class="text-green-600" [matTooltip]="'PAC.INDICATOR.PermissionApproved' | translate: {Default: 'Permission Approved'}">task_alt</mat-icon>
+            </div>
+    
+            <div *ngIf="item.permissionRequests">
+              <mat-icon color="accent" fontSet="material-icons-outlined"
+                [matTooltip]="'PAC.INDICATOR.PermissionRequested' | translate: {Default: 'Permission Requested'}">pending</mat-icon>
+            </div>
+  
+            <div ngmButtonGroup displayDensity="cosy" *ngIf="!item.permissionApproved && !item.permissionRequests">
+              <button mat-button displayDensity="compact" [disabled]="!!item.permissionRequests" (click)="requestPermission(item.id)">
+                <div class="flex justify-center items-center">
+                  <mat-icon fontSet="material-icons-outlined">approval</mat-icon>
+                  {{ 'PAC.INDICATOR.MARKET.REQUEST' | translate: {Default: 'Request'} }}
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+  
+        <mat-divider></mat-divider>
+      </ng-container>
+    </div>
+    <ngm-drawer-trigger class="absolute -left-1 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" ></ngm-drawer-trigger>
+  </mat-drawer-content>
 </mat-drawer-container>
diff --git a/apps/cloud/src/app/features/indicator/market/market.component.scss b/apps/cloud/src/app/features/indicator/market/market.component.scss
index b09bf003a..1715b6dee 100644
--- a/apps/cloud/src/app/features/indicator/market/market.component.scss
+++ b/apps/cloud/src/app/features/indicator/market/market.component.scss
@@ -4,3 +4,10 @@
   display: flex;
   flex-direction: column;
 }
+
+.mat-drawer.mat-drawer-side {
+  border-color: var(--mat-divider-color);
+}
+.mat-drawer-content {
+  @apply overflow-hidden;
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/indicator/market/market.component.ts b/apps/cloud/src/app/features/indicator/market/market.component.ts
index a0cd05a57..77f1b6ca5 100644
--- a/apps/cloud/src/app/features/indicator/market/market.component.ts
+++ b/apps/cloud/src/app/features/indicator/market/market.component.ts
@@ -66,6 +66,8 @@ export class MarketComponent {
 
   PAGE_SIZE = 10
   displayCompact = false
+  // Left side menu drawer open state
+  sideMenuOpened = true
 
   businessArea = new FormControl<string>(null)
   search = new FormControl<string>(null)
diff --git a/apps/cloud/src/app/features/project/_project.component.scss b/apps/cloud/src/app/features/project/_project.component.scss
index 6d877f77e..768f3e689 100644
--- a/apps/cloud/src/app/features/project/_project.component.scss
+++ b/apps/cloud/src/app/features/project/_project.component.scss
@@ -1,12 +1,14 @@
 .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;
+  @apply hover:bg-slate-100 dark:hover:bg-slate-100/10;
+
+  &.active {
+    @apply bg-slate-100 hover:bg-slate-200 dark:bg-slate-100/10 dark:hover:bg-slate-200/10;
+  }
 }
-.mdc-list-item.pac-project__router-link {
+
+.mat-mdc-list-item.mdc-list-item.pac-project__router-link {
   --mdc-list-list-item-one-line-container-height: 30px;
-  @apply rounded-md p-0;
+  @apply rounded-md p-0 cursor-pointer;
 }
 .pac-project__anchor {
   @apply border-bluegray-100 text-bluegray-100 hover:border-bluegray-200 hover:text-bluegray-200;
diff --git a/apps/cloud/src/app/features/project/indicators/all/all.component.html b/apps/cloud/src/app/features/project/indicators/all/all.component.html
index 2b9b8a3ad..1f002a6c7 100644
--- a/apps/cloud/src/app/features/project/indicators/all/all.component.html
+++ b/apps/cloud/src/app/features/project/indicators/all/all.component.html
@@ -1,4 +1,4 @@
-<ngm-table class="flex-1 overflow-hidden rounded-lg border border-gray-200 mt-2"
+<ngm-table class="flex-1 overflow-hidden rounded-lg border mt-2"
   displayDensity="cosy"
   paging
   selectable
diff --git a/apps/cloud/src/app/features/project/indicators/all/all.component.scss b/apps/cloud/src/app/features/project/indicators/all/all.component.scss
index b38f13e75..7ab35664c 100644
--- a/apps/cloud/src/app/features/project/indicators/all/all.component.scss
+++ b/apps/cloud/src/app/features/project/indicators/all/all.component.scss
@@ -1,3 +1,7 @@
 :host {
   @apply w-full overflow-hidden flex-1 max-w-full flex flex-col p-4;
+}
+
+.ngm-table {
+  border-color: var(--mat-divider-color);
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.html b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.html
index e5e215b63..2fbaa8d8b 100644
--- a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.html
+++ b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.html
@@ -1,4 +1,4 @@
-<ngm-table class="flex-1 overflow-hidden rounded-lg border border-gray-200 mt-2"
+<ngm-table class="flex-1 overflow-hidden rounded-lg border mt-2"
     paging
     [data]="approvals$ | async"
     [columns]="[
diff --git a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
index 809713427..e76646163 100644
--- a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
+++ b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
@@ -1,3 +1,7 @@
 :host {
   @apply flex-1 w-full max-w-full overflow-hidden flex flex-col p-4;
 }
+
+.ngm-table {
+  border-color: var(--mat-divider-color);
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/indicators/register/register.component.html b/apps/cloud/src/app/features/project/indicators/register/register.component.html
index b489db239..ce761f459 100644
--- a/apps/cloud/src/app/features/project/indicators/register/register.component.html
+++ b/apps/cloud/src/app/features/project/indicators/register/register.component.html
@@ -18,7 +18,7 @@
         {{ 'PAC.MENU.INDICATOR.DownloadAsTemplate' | translate: {Default: "Download as Template"} }}
       </button>
   
-      <button mat-raised-button *ngIf="type !== 'copy' && (indicator$ | async) as indicator" color="primary" displayDensity="cosy"
+      <button mat-raised-button *ngIf="type !== 'copy' && (indicator$ | async) as indicator" displayDensity="cosy"
         (click)="copy(indicator)">
         {{ 'PAC.ACTIONS.COPY' | translate: {Default: "Copy"} }}
       </button>
@@ -42,163 +42,6 @@
     [models]="models$ | async"
     [(ngModel)]="indicator"
   ></pac-indicator-register-form>
-
-  <!-- <form [formGroup]="formGroup" class="pac-indicator-register__form pac-page__body flex flex-col w-full md:w-[600px] mx-auto" >
-
-    <div class="w-full m-auto grid grid-cols-1 gap-0 sm:grid-cols-2 sm:gap-3">
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.NAME' | translate: {Default: 'Name'} }}</mat-label>
-        <input matInput formControlName="name" placeholder="{{ 'PAC.INDICATOR.REGISTER.NAME_PLACEHOLDER' | translate: {Default: 'Indicator Name'} }}">
-      </mat-form-field>
-  
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.CODE' | translate: {Default: 'Code'} }}</mat-label>
-        <input matInput formControlName="code" placeholder="{{ 'PAC.INDICATOR.REGISTER.CODE_PLACEHOLDER' | translate: {Default: 'Indicator Unique Code'} }}">
-      </mat-form-field>
-    </div>
-  
-    <div class="text-xl p-2 mb-4">
-      {{ 'PAC.INDICATOR.REGISTER.BASIC_INFO' | translate: {Default: 'Basic Info'} }}
-    </div>
-
-    <div class="w-full m-auto grid grid-cols-1 gap-0 sm:grid-cols-2 sm:gap-3">
-      <ngm-tree-select formControlName="businessAreaId" [appearance]="appearance"
-        label="{{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate: {Default: 'Business Area'} }}"
-        [treeNodes]="groupTree$ | async"
-        displayBehaviour="descriptionOnly"
-        searchable
-      ></ngm-tree-select>
-
-      <ngm-select [appearance]="appearance" displayBehaviour="descriptionOnly"
-        [label]=" 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} "
-        [selectOptions]="certifications$ | async"
-        formControlName="certificationId"
-      ></ngm-select>
-  
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.CREATED_BY' | translate: {Default: 'Created By'} }}</mat-label>
-        <input matInput formControlName="createdByName">
-      </mat-form-field>
-  
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate: {Default: 'Principal'} }}</mat-label>
-        <input matInput formControlName="principal" placeholder="{{ 'PAC.INDICATOR.REGISTER.PRINCIPAL_PLACEHOLDER' | translate: {Default: 'Business Principal'} }}">
-      </mat-form-field>
-  
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.UNIT' | translate: {Default: 'Unit'} }}</mat-label>
-        <input matInput formControlName="unit" placeholder="{{ 'PAC.INDICATOR.REGISTER.UNIT_PLACEHOLDER' | translate: {Default: 'Measure Unit of Indicator'} }}">
-      </mat-form-field>
-  
-      <mat-form-field [appearance]="appearance">
-        <mat-label>{{ 'PAC.INDICATOR.REGISTER.VALIDITY' | translate: {Default: 'Validity'} }}</mat-label>
-        <input matInput [matDatepicker]="picker" formControlName="validity">
-        <mat-hint>YYYY/MM/DD</mat-hint>
-        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-        <mat-datepicker #picker></mat-datepicker>
-      </mat-form-field>
-
-      <mat-checkbox formControlName="isActive" class="my-4">{{ 'PAC.INDICATOR.REGISTER.IsActive' | translate: {Default: 'Active'} }}</mat-checkbox>
-      <mat-checkbox formControlName="isApplication" class="my-4">{{ 'PAC.INDICATOR.REGISTER.AvailableInApplication' | translate: {Default: 'Available in App'} }}</mat-checkbox>
-      
-      <mat-form-field [appearance]="appearance" class="col-span-1 sm:col-span-2">
-        <mat-label>
-          {{ 'PAC.INDICATOR.REGISTER.BUSINESS' | translate: {Default: 'Business'} }}
-        </mat-label>
-        <textarea matInput formControlName="business" placeholder="{{ 'PAC.INDICATOR.REGISTER.BUSINESS_PLACEHOLDER' | translate: {Default: 'Business Description'} }}"></textarea>
-      </mat-form-field>
-
-      <pac-tag-editor class="col-span-1 sm:col-span-2" formControlName="tags" category="indicator"></pac-tag-editor>
-    </div>
-  
-    <div class="text-xl p-2 mb-4 mt-8">
-      {{ 'PAC.INDICATOR.REGISTER.MODEL_INFO' | translate: {Default: 'Model Info'} }}
-    </div>
-
-    <div class="w-full m-auto grid grid-cols-1 gap-0 sm:grid-cols-2 sm:gap-3">
-  
-      <ngm-select [appearance]="appearance" label="{{ 'PAC.INDICATOR.REGISTER.MODEL' | translate: {Default: 'Semantic Model'} }}"
-        [selectOptions]="models$ | async"
-        displayBehaviour="descriptionOnly"
-        virtualScroll
-        formControlName="modelId"
-        >
-      </ngm-select>
-  
-      <ngm-select [appearance]="appearance"
-        label="{{ 'PAC.INDICATOR.REGISTER.ENTITY' | translate: {Default: 'Entity'} }}"
-        placeholder="{{ 'PAC.INDICATOR.REGISTER.ENTITY_PLACEHOLDER' | translate: {Default: 'Select one Entity'} }}"
-        [loading]="entitiesLoading$ | async"
-        [selectOptions]="entities$ | async"
-        virtualScroll
-        displayBehaviour="descriptionAndId"
-        formControlName="entity"
-      ></ngm-select>
-  
-      <mat-checkbox formControlName="visible" class="my-4">{{ 'PAC.INDICATOR.REGISTER.Visible' | translate: {Default: 'Visible'} }}</mat-checkbox>
-  
-      <mat-radio-group formControlName="type" class="my-4">
-        <mat-radio-button [value]="IndicatorType.BASIC">
-          {{ 'PAC.INDICATOR.REGISTER.TYPE_BASIC' | translate: {Default: 'Basic'} }}
-        </mat-radio-button>
-        <mat-radio-button [value]="IndicatorType.DERIVE">
-          {{ 'PAC.INDICATOR.REGISTER.TYPE_DERIVE' | translate: {Default: 'Derive'} }}
-        </mat-radio-button>
-      </mat-radio-group>
-    
-      <ngm-select *ngIf="typeControl.value===IndicatorType.BASIC" [appearance]="appearance"
-        label="{{ 'PAC.INDICATOR.REGISTER.MEASURE' | translate: {Default: 'Measure'} }}"
-        placeholder="{{ 'PAC.INDICATOR.REGISTER.MEASURE_PLACEHOLDER' | translate: {Default: 'Select Measure'} }}"
-        [loading]="entityTypeLoading$ | async"
-        [selectOptions]="measures$ | async"
-        formControlName="measure"
-      ></ngm-select>
-  
-      <mat-form-field *ngIf="typeControl.value===IndicatorType.DERIVE" class="col-span-1 sm:col-span-2" [appearance]="appearance">
-        <mat-label>
-          {{ 'PAC.INDICATOR.REGISTER.FORMULA' | translate: {Default: 'Formula'} }}
-        </mat-label>
-        <textarea matInput formControlName="formula" placeholder="{{ 'PAC.INDICATOR.REGISTER.FORMULA_PLACEHOLDER' | translate: {Default: 'Calculation Formula'} }}"
-          cdkTextareaAutosize
-        ></textarea>
-  
-        <button mat-icon-button matSuffix [disabled]="entityType$ | async | isNil" (click)="openFormula()">
-          <mat-icon>code</mat-icon>
-        </button>
-      </mat-form-field>
-  
-      <ngm-select *ngIf="typeControl.value===IndicatorType.DERIVE && (syntax$ | async) === Syntax.SQL" [appearance]="appearance"
-        [label]=" 'PAC.INDICATOR.REGISTER.Aggregator' | translate: {Default: 'Aggregator'} "
-        placeholder="{{ 'PAC.INDICATOR.REGISTER.Aggregator' | translate: {Default: 'Aggregator'} }}"
-        [selectOptions]="AGGREGATORS"
-        formControlName="aggregator"
-      ></ngm-select>
-  
-      <ngm-hierarchy-select formControlName="calendar"
-        [appearance]="appearance"
-        [label]=" 'PAC.INDICATOR.REGISTER.Calendar' | translate: {Default: 'Calendar'} "
-        [dimensions]="calendars$ | async"
-      ></ngm-hierarchy-select>
-  
-      <ngm-select class="col-span-1 sm:col-span-2" [appearance]="appearance"
-        label="{{ 'PAC.INDICATOR.REGISTER.DIMENSIONS' | translate: {Default: 'Free Dimensions'} }}"
-        placeholder="{{ 'PAC.INDICATOR.REGISTER.DIMENSIONS_PLACEHOLDER' | translate: {Default: 'Select Free Dimensions'} }}"
-        [loading]="entityTypeLoading$ | async"
-        [selectOptions]="dimensions$ | async"
-        multiple
-        formControlName="dimensions"
-      ></ngm-select>
-  
-      <div class="col-span-1 sm:col-span-2 text-base font-medium">{{ 'PAC.INDICATOR.REGISTER.RestrictiveCondition' | translate: {Default: 'Restrictive Condition'} }}</div>
-      <ngm-slicers class="col-span-1 sm:col-span-2" editable inline
-        [dataSettings]="dataSettings$ | async"
-        [capacities]="[SlicersCapacity.CombinationSlicer]"
-        formControlName="filters"
-      ></ngm-slicers>
-    </div>
-
-  </form> -->
-
     
   <div *ngIf="loading" class="absolute top-1/2 left-1/2 -mt-4 -ml-4 z-10">
     <mat-spinner diameter="30" strokeWidth="2">
diff --git a/apps/cloud/src/app/features/project/members/members.component.html b/apps/cloud/src/app/features/project/members/members.component.html
index 8cb1d231d..22a6c9a16 100644
--- a/apps/cloud/src/app/features/project/members/members.component.html
+++ b/apps/cloud/src/app/features/project/members/members.component.html
@@ -62,7 +62,7 @@
       </button>
     </div>
   </div>
-  <ngm-table class="overflow-hidden rounded-lg border border-gray-200 mt-2"
+  <ngm-table class="overflow-hidden rounded-lg border mt-2"
     paging
     [data]="certifications"
     [columns]="[
diff --git a/apps/cloud/src/app/features/project/members/members.component.ts b/apps/cloud/src/app/features/project/members/members.component.ts
index 815c5e4b0..30051ff2b 100644
--- a/apps/cloud/src/app/features/project/members/members.component.ts
+++ b/apps/cloud/src/app/features/project/members/members.component.ts
@@ -44,13 +44,16 @@ import { NgmTableComponent } from '@metad/ocap-angular/common'
   templateUrl: 'members.component.html',
   styles: [
     `
-      :host {
-        width: 100%;
-        overflow: auto;
-      }
-      .rounded-full.mat-stroked-button {
-        border-radius: 50%;
-      }
+:host {
+  width: 100%;
+  overflow: auto;
+}
+.rounded-full.mat-stroked-button {
+  border-radius: 50%;
+}
+.ngm-table {
+  border-color: var(--mat-divider-color);
+}
     `
   ]
 })
diff --git a/apps/cloud/src/app/features/semantic-model/model/_model-theme.scss b/apps/cloud/src/app/features/semantic-model/model/_model-theme.scss
index b01030e25..cdda79bb7 100644
--- a/apps/cloud/src/app/features/semantic-model/model/_model-theme.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/_model-theme.scss
@@ -17,10 +17,6 @@
   @include dimension.color($config-or-theme);
   @include query-lab.color($config-or-theme);
 
-  .pac-data-type-tag {
-    @apply text-xs inline-flex items-center uppercase px-3 py-1 rounded-full bg-white text-gray-700 overflow-hidden text-ellipsis;
-  }
-
   .pac-model__nav-list {
 
     .mat-mdc-list-item.selected {
@@ -65,9 +61,9 @@
       }
     }
 
-    .mat-toolbar {
-      border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
-    }
+    // .mat-toolbar {
+    //   border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
+    // }
 
     .pac-model__tables-viewport {
       overflow-x: hidden;
diff --git a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
index edeb75db2..0a4e96c79 100644
--- a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
@@ -1,3 +1,32 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '@angular/material/core/tokens/token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (ngm, model);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    border-color: theme('colors.gray.200'),
+    // container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
+}
+
+.ngm-semanctic-model {
+  .pac-model__shell-bar {
+    @include token-utils.use-tokens($prefix, get-unthemable-tokens()) {
+      border-bottom: solid 1px var(#{token-utils.get-token-variable(border-color)});
+    }
+
+    --mat-icon-color: theme('colors.gray.500');
+  }
+
+  .mat-drawer-container {
+    --mat-toolbar-container-background-color: transparent;
+  }
+}
+
 .ngm-table {
   @apply border-gray-200 dark:border-gray-700;
 }
@@ -5,7 +34,7 @@
 // Toolbar styles
 .mat-toolbar.pac-sub-toolbar {
   min-height: 33px;
-  background-color: var(--ngm-card-bg-color);
+  // background-color: var(--ngm-card-bg-color);
   @apply text-gray-500 dark:text-gray-200;
 
   &.ngm-density__compact.mat-toolbar-row,
@@ -14,4 +43,4 @@
     padding: 0 6px;
     font-size: 1rem;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/cloud/src/app/features/semantic-model/model/dimension/dimension.component.html b/apps/cloud/src/app/features/semantic-model/model/dimension/dimension.component.html
index a4212ed0e..1a696f21b 100644
--- a/apps/cloud/src/app/features/semantic-model/model/dimension/dimension.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/dimension/dimension.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="pac-nav-toolbar flex items-center" displayDensity="compact">
+<mat-toolbar class="pac-nav-toolbar pac-model__shell-bar flex items-center" displayDensity="compact">
     <button mat-icon-button displayDensity="cosy"
         [matMenuTriggerFor]="menu"
         >
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.html b/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.html
index e94e289e1..ce0a92e6f 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.html
@@ -10,6 +10,7 @@
     } @else if (entityType().syntax === Syntax.MDX) {
       <ngm-calculated-measure class="pac-cdk-drop__list flex-1 w-full h-full" cdkDropList
         (cdkDropListDropped)="dropFormula($event)"
+        [theme]="themeName()"
         [syntax]="Syntax.MDX"
         [dataSettings]="dataSettings()"
         [entityType]="entityType()"
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.ts b/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.ts
index e9c122e10..197a82e1a 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.ts
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/calculation/calculation.component.ts
@@ -25,7 +25,7 @@ import { TranslationBaseComponent } from '../../../../../@shared/'
 import { differenceBy, isEmpty, isNil, negate, uniq } from 'lodash-es'
 import { BehaviorSubject, combineLatest, from, of } from 'rxjs'
 import { filter, map, startWith, switchMap } from 'rxjs/operators'
-import { uuid } from '../../../../../@core'
+import { Store, uuid } from '../../../../../@core'
 import { AppService } from '../../../../../app.service'
 import { CalculatedMeasureSchema, zodToAnnotations } from '../../copilot'
 import { SemanticModelService } from '../../model.service'
@@ -59,6 +59,7 @@ export class ModelEntityCalculationComponent extends TranslationBaseComponent im
   readonly #route = inject(ActivatedRoute)
   readonly #router = inject(Router)
   readonly #logger = inject(NGXLogger)
+  readonly #store = inject(Store)
 
   @ViewChild('editor') editor!: BaseEditorDirective
   @ViewChild(AnalyticalGridComponent) grid!: AnalyticalGridComponent<any>
@@ -123,6 +124,12 @@ export class ModelEntityCalculationComponent extends TranslationBaseComponent im
     })
   )
 
+  manualRefresh = false
+  entities = []
+
+  public readonly options$ = this.modelService.wordWrap$.pipe(map((wordWrap) => ({ wordWrap })))
+  public readonly isMobile$ = this.appService.isMobile$
+
   /**
   |--------------------------------------------------------------------------
   | Signals
@@ -167,11 +174,7 @@ export class ModelEntityCalculationComponent extends TranslationBaseComponent im
   readonly modelType = toSignal(this.modelService.modelType$)
   readonly dialect = toSignal(this.modelService.dialect$)
 
-  public readonly options$ = this.modelService.wordWrap$.pipe(map((wordWrap) => ({ wordWrap })))
-  public readonly isMobile$ = this.appService.isMobile$
-
-  manualRefresh = false
-  entities = []
+  readonly themeName = toSignal(this.#store.primaryTheme$)
 
   /**
   |--------------------------------------------------------------------------
diff --git a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/_cube-structure-theme.scss b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/_cube-structure-theme.scss
index 5564a9eb5..fa81ada68 100644
--- a/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/_cube-structure-theme.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/entity/cube-structure/_cube-structure-theme.scss
@@ -56,9 +56,9 @@
       }
     }
 
-    .mat-tree.ngm-tree_selection {
-      background-color: unset;
-    }
+    // .mat-tree.ngm-tree_selection {
+    //   background-color: unset;
+    // }
 
     .ngm-list-item {
       .ngm-entity-property {
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 3aeab5181..5edbfed32 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,5 +1,5 @@
 :host {
-  @apply mx-1 mb-1 rounded-lg overflow-hidden shadow-lg border border-solid border-slate-200 bg-white;
+  @apply overflow-hidden;
 }
 
 .pac-cdk-drop__placeholder {
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 3f10af8d1..eb93c4b92 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,7 +1,7 @@
 :host {
-  @apply relative h-full flex-1 flex flex-col bg-white;
+  @apply relative h-full flex-1 flex flex-col;
 
-  --mat-sidenav-content-background-color: theme(colors.white);
+  // --mat-sidenav-content-background-color: theme(colors.white);
 
   &.pac-fullscreen {
     position: fixed;
@@ -16,7 +16,7 @@
 }
 
 .pac-model-entity__workspace-router {
-  @apply flex flex-col rounded-lg overflow-hidden shadow-lg mb-1 mr-1 border border-solid border-slate-200 bg-white;
+  @apply flex flex-col rounded-lg overflow-hidden shadow-lg mb-1 mr-1 border border-solid dark:border-slate-700;
 }
 
 .ngm-property-modeling {
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 8de561f43..137f3edd5 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
@@ -61,7 +61,7 @@
                     [cdkDropListEnterPredicate]="dropEnterPredicate"
                     (cdkDropListDropped)="dropProperty($event)">
                     <mat-list class="overflow-y-auto" displayDensity="compact">
-                        <mat-list-item *ngFor="let property of dimensions" class="flex justify-between hover:bg-slate-100 focus:bg-slate-200"
+                        <mat-list-item *ngFor="let property of dimensions" class="flex justify-between hover:bg-slate-100 focus:bg-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-900"
                             cdkDrag
                             [cdkDragData]="property"
                             (cdkDragReleased)="onDragReleased($event)">
@@ -89,7 +89,7 @@
                     [cdkDropListEnterPredicate]="dropEnterPredicate"
                     (cdkDropListDropped)="dropProperty($event)">
                     <mat-list class="overflow-y-auto" displayDensity="compact">
-                        <mat-list-item *ngFor="let property of measures" class="flex justify-between hover:bg-slate-100 focus:bg-slate-200"
+                        <mat-list-item *ngFor="let property of measures" class="flex justify-between hover:bg-slate-100 focus:bg-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-900"
                             cdkDrag
                             [cdkDragData]="property"
                             (cdkDragReleased)="onDragReleased($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 e6c0e660a..fd0394a86 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
@@ -102,3 +102,8 @@
     min-width: unset;
   }
 }
+
+.pac-data-type-tag {
+  @apply text-xs inline-flex items-center uppercase px-3 py-1 rounded-full overflow-hidden text-ellipsis
+    bg-white text-gray-700 dark:bg-slate-800 dark:text-slate-400;
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/semantic-model/model/model.component.html b/apps/cloud/src/app/features/semantic-model/model/model.component.html
index efdf55585..70a7e662e 100644
--- a/apps/cloud/src/app/features/semantic-model/model/model.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/model.component.html
@@ -228,35 +228,11 @@
             cdkDragLockAxis="x"
         ></div>
     </mat-drawer>
-    <mat-drawer-content class="flex">
-        <!-- <mat-drawer-container class="flex-1 h-full" [hasBackdrop]="false" autosize>
-            <mat-drawer #copilotDrawer class="mat-elevation-z" position="end" mode="side" ngmResizer [resizerWidth]="400"
-                [(opened)]="copilotDrawerOpened"
-            >
-                <ngm-copilot-chat #copilotChat class="pac-cdk-drop__list pac-cdk-drop__area"
-                    [copilotEngine]="copilotEngine"
-                    [user]="user"
-                    cdkDropList
-                    (cdkDropListDropped)="dropCopilot($event)"
-                ></ngm-copilot-chat>
-                
-                <div ngmResizerBar resizerBarPosition="left"
-                    cdkDrag
-                    cdkDragLockAxis="x"
-                ></div>
-            </mat-drawer>
-
-            <mat-drawer-content [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path" class="relative">
-                
-
-                <ngm-drawer-trigger class="absolute -right-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="copilotDrawerOpened" side="right"></ngm-drawer-trigger>
-                
-            </mat-drawer-content>
-        </mat-drawer-container> -->
-
+    <mat-drawer-content>
+      <div class="w-full flex-1 overflow-auto">
         <router-outlet #o="outlet"></router-outlet>
-
-        <ngm-drawer-trigger class="absolute -left-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" ></ngm-drawer-trigger>
+      </div>
+      <ngm-drawer-trigger class="absolute -left-1 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" ></ngm-drawer-trigger>
     </mat-drawer-content>
 </mat-drawer-container>
     
diff --git a/apps/cloud/src/app/features/semantic-model/model/model.component.scss b/apps/cloud/src/app/features/semantic-model/model/model.component.scss
index 40db5b88c..c515b6580 100644
--- a/apps/cloud/src/app/features/semantic-model/model/model.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/model.component.scss
@@ -76,4 +76,8 @@ list-content-loader {
 
 .ngm-copilot-chat {
   @apply w-full h-full rounded-lg shadow-lg overflow-hidden;
+}
+
+.mat-drawer-content {
+  @apply flex overflow-hidden;
 }
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/semantic-model/upload/upload.component.html b/apps/cloud/src/app/features/semantic-model/upload/upload.component.html
index 6e840bb34..2261f5a9b 100644
--- a/apps/cloud/src/app/features/semantic-model/upload/upload.component.html
+++ b/apps/cloud/src/app/features/semantic-model/upload/upload.component.html
@@ -120,7 +120,7 @@
                                     <input matInput [(ngModel)]="header.length" placeholder="length" class="pac-upload-preview__length"/>
                                 </div>
 
-                                <input matInput [(ngModel)]="header.fieldName" class="ngm-input hover:bg-slate-100" />
+                                <input matInput [(ngModel)]="header.fieldName" class="ngm-input hover:bg-neutral-100 dark:hover:bg-neutral-700" />
                             </div>
                         </th>
                         <td mat-cell *matCellDef="let element"> {{element[header.name]}} </td>
diff --git a/apps/cloud/src/app/features/setting/settings.component.html b/apps/cloud/src/app/features/setting/settings.component.html
new file mode 100644
index 000000000..91a54fc5a
--- /dev/null
+++ b/apps/cloud/src/app/features/setting/settings.component.html
@@ -0,0 +1,24 @@
+<div class="z-10 flex flex-col w-36 md:w-64 max-w-xs p-2 md:p-4 md:pr-0">
+  <ul class="pac-nav__tab-bar flex-1 py-2 rounded-lg shadow-lg ">
+    <li
+      class="pac-nav__tab flex justify-start items-center px-4 py-2 cursor-pointer"
+      *ngFor="let e of menus$ | async"
+      [routerLink]="e.link"
+      [routerLinkActiveOptions]="{ exact: false }"
+      routerLinkActive
+      #rla="routerLinkActive"
+      [class.active]="rla.isActive"
+    >
+      <mat-icon *ngIf="e.icon" displayDensity="cosy" fontSet="material-icons-outlined">{{ e.icon }}</mat-icon>
+      <span class="ml-2">
+        {{ 'PAC.MENU.' + e.label | translate: { Default: e.label } }}
+      </span>
+    </li>
+  </ul>
+</div>
+
+<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>
+</div>
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/setting/settings.component.scss b/apps/cloud/src/app/features/setting/settings.component.scss
index 027a073e2..89e688cf9 100644
--- a/apps/cloud/src/app/features/setting/settings.component.scss
+++ b/apps/cloud/src/app/features/setting/settings.component.scss
@@ -7,7 +7,26 @@
 }
 .pac-nav__router {
   display: flex;
-  /* max-height: calc(100% - 37px); */
   overflow-y: auto;
   overflow-x: hidden;
-}
\ No newline at end of file
+}
+
+/**
+ * 纵向 nav bar
+ */
+.pac-nav__tab-bar {
+  background-color: var(--mdc-outlined-card-container-color);
+
+  .pac-nav__tab {
+    @apply -ml-2 -mr-2 border-2 border-transparent;
+  }
+  .pac-nav__tab:hover {
+    @apply bg-slate-100 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
+  }
+  .pac-nav__tab:focus {
+    @apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
+  }
+  .pac-nav__tab.active {
+    @apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-700 dark:border-bluegray-500;
+  }
+}
diff --git a/apps/cloud/src/app/features/setting/settings.component.ts b/apps/cloud/src/app/features/setting/settings.component.ts
index c22a29e01..74ffac984 100644
--- a/apps/cloud/src/app/features/setting/settings.component.ts
+++ b/apps/cloud/src/app/features/setting/settings.component.ts
@@ -5,33 +5,8 @@ import { AnalyticsPermissionsEnum, FeatureEnum, PermissionsEnum, RolesEnum, Stor
 
 @Component({
   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">
-      <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"
-          *ngFor="let e of menus$ | async"
-          [routerLink]="e.link"
-          [routerLinkActiveOptions]="{ exact: false }"
-          routerLinkActive
-          #rla="routerLinkActive"
-          [class.active]="rla.isActive"
-        >
-          <mat-icon *ngIf="e.icon" displayDensity="cosy" fontSet="material-icons-outlined">{{ e.icon }}</mat-icon>
-          <span class="ml-2">
-            {{ 'PAC.MENU.' + e.label | translate: { Default: e.label } }}
-          </span>
-        </li>
-      </ul>
-    </div>
-
-    <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>
-    </div>
-  `,
-  styleUrls: ['./settings.component.scss'],
+  templateUrl: `settings.component.html`,
+  styleUrl: './settings.component.scss',
   animations: [routeAnimations],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
index 8c68db87f..b051625ae 100644
--- a/apps/cloud/src/styles.scss
+++ b/apps/cloud/src/styles.scss
@@ -19,6 +19,9 @@
 
 @import './styles/base';
 @import './styles/scrollbar';
+@import './styles/default';
+@import './styles/dark';
+@import './styles/dark-green';
 
 @include features.theme(ngm-theme.$mat-theme);
 @include shared.theme(ngm-theme.$mat-theme);
@@ -63,6 +66,7 @@ body {
   --mat-table-row-item-label-text-font: $text-font;
   --mat-table-header-headline-font: $text-font;
 
+  color: var(--ngm-text-primary-color);
   display: flex;
   margin: 0;
 
diff --git a/apps/cloud/src/styles/dark-green.scss b/apps/cloud/src/styles/dark-green.scss
new file mode 100644
index 000000000..6bd4410ee
--- /dev/null
+++ b/apps/cloud/src/styles/dark-green.scss
@@ -0,0 +1,8 @@
+@use '@angular/material/core/tokens/token-utils';
+
+body.dark.dark-green {
+  @include token-utils.create-token-values((ngm), (
+    primary-color: theme('colors.green.500'),
+    text-primary-color: theme('colors.green.100')
+  ));
+}
diff --git a/apps/cloud/src/styles/dark.scss b/apps/cloud/src/styles/dark.scss
new file mode 100644
index 000000000..736a113e9
--- /dev/null
+++ b/apps/cloud/src/styles/dark.scss
@@ -0,0 +1,21 @@
+@use '@angular/material/core/tokens/token-utils';
+@use '../app/features/semantic-model/model/_model.component' as model;
+
+body.dark {
+  /* 暗色主题下的样式 */
+  --mdc-theme-error: theme('colors.red.400');
+
+  @include token-utils.create-token-values(ngm, (
+    bg-color: rgb(10 10 10),
+    card-bg-color: theme('colors.bluegray.800'),
+    card-border-color: theme('colors.bluegray.700'),
+    primary-color: theme('colors.bluegray.500'),
+    text-primary-color: theme('colors.bluegray.200'),
+    scrollbar-color: theme('colors.neutral.900'),
+  ));
+
+  @include token-utils.create-token-values(model.$prefix, (
+    border-color: theme('colors.neutral.800'),
+  ));
+  
+}
diff --git a/apps/cloud/src/styles/default.scss b/apps/cloud/src/styles/default.scss
new file mode 100644
index 000000000..aecc5a9b5
--- /dev/null
+++ b/apps/cloud/src/styles/default.scss
@@ -0,0 +1,17 @@
+@use '@angular/material/core/tokens/token-utils';
+@use '../app/features/semantic-model/model/_model.component' as model;
+
+body.default, body.light {
+  --ngm-bg-color: theme(colors.gray.50);
+  --ngm-card-bg-color: theme(colors.white);
+  --ngm-card-border-color: theme(colors.gray.100);
+
+  --ngm-text-primary-color: theme(colors.bluegray.800);
+
+  --mdc-theme-error: theme(colors.red.400);
+  
+  /* 暗色主题下的样式 */
+  @include token-utils.create-token-values(model.$prefix, (
+    border-color: theme('colors.gray.200'),
+  ));
+}
diff --git a/apps/cloud/src/styles/scrollbar.scss b/apps/cloud/src/styles/scrollbar.scss
index 1f90e99cd..665593631 100644
--- a/apps/cloud/src/styles/scrollbar.scss
+++ b/apps/cloud/src/styles/scrollbar.scss
@@ -43,5 +43,5 @@ body {
  */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--sb-col, rgba(0, 0, 0, 0.12)) transparent;
+  scrollbar-color: var(--ngm-scrollbar-color, rgba(0, 0, 0, 0.12)) transparent;
 }
diff --git a/libs/apps/state/src/lib/store.service.ts b/libs/apps/state/src/lib/store.service.ts
index b262d6eef..0bab3c728 100644
--- a/libs/apps/state/src/lib/store.service.ts
+++ b/libs/apps/state/src/lib/store.service.ts
@@ -146,6 +146,7 @@ export class Store {
 	preferredTheme$ = this.persistQuery.select(
 		(state) => state.preferredTheme
 	);
+	readonly primaryTheme$ = this.preferredTheme$.pipe(map((theme) => theme?.split('-')[0]))
 	preferredComponentLayout$ = this.persistQuery.select(
 		(state) => state.preferredComponentLayout
 	);
diff --git a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.html b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.html
index 15e77b471..8f3241b1c 100644
--- a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.html
+++ b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.html
@@ -28,7 +28,7 @@
                         [cdkDropListData]="calculations"
                         (cdkDropListDropped)="drop($event)"
                         >
-                        <mat-list-item role="listitem" *ngFor="let property of calculations$ | async" class="hover:bg-gray-100"
+                        <mat-list-item role="listitem" *ngFor="let property of calculations$ | async" class="hover:bg-neutral-100 dark:hover:bg-neutral-800"
                             cdkDrag
                             [cdkDragData]="property"
                         >
@@ -129,6 +129,7 @@
                 (cdkDropListDropped)="drop($event)"
                 [entityType]="entityType"
                 [disabled]="disabled"
+                [theme]="theme"
                 [(ngModel)]="statement"
                 >
             </ngm-editor-mdx-member>
@@ -140,6 +141,7 @@
                 (cdkDropListDropped)="drop($event)"
                 [entityType]="entityType"
                 [disabled]="disabled"
+                [theme]="theme"
                 [(ngModel)]="statement"
             >
             </ngm-editor-sql>
diff --git a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.scss b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.scss
index eacab689e..2cef0852b 100644
--- a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.scss
+++ b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.scss
@@ -57,7 +57,7 @@
         position: absolute;
         right: 0;
         border-radius: 2px;
-        @apply bg-gray-100;
+        @apply bg-gray-100 dark:bg-neutral-700;
       }
 
       &:not(.mdc-tab--active) {
diff --git a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.ts b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.ts
index 56dc61484..e01a92816 100644
--- a/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.ts
+++ b/libs/component-angular/property/calculation/calculated-measure/calculated-measure.component.ts
@@ -114,6 +114,8 @@ export class CalculatedMeasureComponent implements ControlValueAccessor {
   }
   private _disabled = false
 
+  @Input() theme: string
+
   @ViewChild('editor') editor!: BaseEditorDirective
 
   opened = false
diff --git a/libs/material-theme/src/styles/material/_dark.theme.scss b/libs/material-theme/src/styles/material/_dark.theme.scss
index b4670a98e..a2fe1da2a 100644
--- a/libs/material-theme/src/styles/material/_dark.theme.scss
+++ b/libs/material-theme/src/styles/material/_dark.theme.scss
@@ -13,7 +13,7 @@
 $material-typeface: Lato, 'Noto Serif SC', monospace;
 
 // Define a theme.
-$dark-primary: mat.define-palette(mat.$blue-grey-palette, 600);
+$dark-primary: mat.define-palette(mat.$blue-palette, 500);
 $dark-accent: mat.define-palette(mat.$amber-palette, A700, A400, A200);
 
 $light-secondary-text: rgba(white, 0.7);
@@ -23,11 +23,11 @@ $grey-palette: mat.$blue-grey-palette;
 
 $background: (
   status-bar: #151a30,
-  app-bar:    #263238,
-  background: #263238,
+  app-bar:    theme('colors.neutral.900'),
+  background: black,
   hover:      rgba(white, 0.1), // TODO(kara): check style with Material Design UX
-  card:       mat.get-color-from-palette($dark-primary, 900), //#192038, //#222b45,
-  dialog:     mat.get-color-from-palette($dark-primary, 800),
+  card:       rgb(22, 24, 28), // rgb(23, 23, 23), // theme('colors.neutral.900'), //#192038, //#222b45,
+  dialog:     theme('colors.neutral.900'),
   disabled-button: rgba(white, 0.12),
   raised-button: map.get($grey-palette, 800),
   // focused-button: $light-focused,
@@ -36,7 +36,7 @@ $background: (
   disabled-button-toggle: black,
   unselected-chip: map.get($grey-palette, 700),
   disabled-list-option: black,
-  tooltip: map.get($grey-palette, 700),
+  tooltip: theme('colors.neutral.700'),
 );
 $foreground: (
   base:              white,
diff --git a/packages/angular/common/drawer-trigger/drawer-trigger.component.html b/packages/angular/common/drawer-trigger/drawer-trigger.component.html
index 93572e401..2e8d64f78 100644
--- a/packages/angular/common/drawer-trigger/drawer-trigger.component.html
+++ b/packages/angular/common/drawer-trigger/drawer-trigger.component.html
@@ -4,10 +4,12 @@
             <div class="flex h-6 w-6 flex-col items-center opacity-25 group-hover:opacity-100"
                 [class.rotate-180]="opened && side === 'right' || !opened && side === 'left'"
             >
-                <div class="h-4 w-1 rounded-full bg-slate-800 transition-transform translate-y-[1px] group-hover:rotate-12"
+                <div class="h-4 w-1 rounded-full transition-transform translate-y-[1px] group-hover:rotate-12
+                    bg-slate-800 dark:bg-slate-200"
                     [class.rotate-12]="!opened"
                 ></div>
-                <div class="h-4 w-1 rounded-full bg-slate-800 transition-transform -translate-y-[1px] group-hover:-rotate-12"
+                <div class="h-4 w-1 rounded-full transition-transform -translate-y-[1px] group-hover:-rotate-12
+                    bg-slate-800 dark:bg-slate-200"
                     [class.-rotate-12]="!opened"
                 ></div>
             </div>
diff --git a/packages/angular/core/style/_density-theme.scss b/packages/angular/core/style/_density-theme.scss
index 19585b168..8593a6ed2 100644
--- a/packages/angular/core/style/_density-theme.scss
+++ b/packages/angular/core/style/_density-theme.scss
@@ -85,7 +85,7 @@
   // For toolbar
   .mat-toolbar.ngm-density__compact {
     &.mat-toolbar-multiple-rows {
-      min-height: 58px;
+      // min-height: 58px;
     }
     &.mat-toolbar-row,
     &.mat-toolbar-single-row {