--- lgmc-gui-kpi.module.ts
+++ lgmc-gui-kpi.module.ts
@@ -32,7 +32,6 @@ import { LgmcPlatformUtilsModule } from 'src/shared/lgmc-platform/lgmc-platform-
 import { LgmcGeovistoModule } from 'src/shared/lgmc-geovisto/lgmc-geovisto.module';
 
 import { IconNameModule } from 'src/shared/lgmc-g/icon-name/icon-name.module';
-import { LgmcGCustomButtonModule } from 'src/shared/lgmc-g/lgmc-g-button/lgmc-g-button.module';
 import { LgmcGKpiIndicatorModule } from 'src/shared/lgmc-g/lgmc-g-kpi-indicator/lgmc-g-kpi-indicator.module';
 import { LgmcGLayoutModule } from 'src/shared/lgmc-g/lgmc-g-layout/lgmc-g-layout.module';
 import { LgmcGTableMapModule } from 'src/shared/lgmc-g/lgmc-g-table-map/lgmc-g-table-map.module';
@@ -93,7 +92,6 @@ import { LgmcGuiKpiL2FloorMapComponent } from './components/lgmc-gui-kpi-l2-floo
     CheckboxModule,
     IconNameModule,
     InputTextModule,
-    LgmcGCustomButtonModule,
     LgmcGeovistoModule,
     LgmcGKpiIndicatorModule,
     LgmcGLayoutModule,
--- model/lgmc-gui-kpi.model.ts
+++ model/lgmc-gui-kpi.model.ts
@@ -127,6 +127,7 @@ export type LgmcGuiKpiConfig = LgmcModuleConfig & {
   providers?: {
     dashboard?: {
       sgCard?: {
+        id: string,
         enabled?: boolean,
         title?: string,
         description?: string,
@@ -136,6 +137,7 @@ export type LgmcGuiKpiConfig = LgmcModuleConfig & {
         selectedIndex?: number
       },
       kpiCard?: {
+        id: string,
         enabled?: boolean,
         title?: string,
         description?: string,
@@ -145,6 +147,7 @@ export type LgmcGuiKpiConfig = LgmcModuleConfig & {
         iconColor?: string
       },
       kpiIndicators?: {
+        id: string
         enabled?: boolean,
         unknownDeviceImage?: string,
         textInsideBubble?: {
--- services/lgmc-gui-kpi-alert.service.ts
+++ services/lgmc-gui-kpi-alert.service.ts
@@ -32,7 +32,7 @@ export class LgmcGuiKpiAlertService {
   }
 
   public getGroupImage(group: MnDeviceGroup): string {
-    return this.lgmcOnPremisePathToUrlPipe.transform(group?.mnImage?.image, this.appStateService.appConfig.value.api.urls.reports) ?? '/assets/images/unknown-150.png';
+    return this.lgmcOnPremisePathToUrlPipe.transform(group?.mnImage?.image, this.appStateService.globalAppConfig.value.api.urls.reports) ?? '/assets/images/unknown-150.png';
   }
 
   GetParamValueString2(device: MnDevice, devMods: DeviceModel[], confArr: any[]): string | undefined {
--- services/lgmc-gui-kpi-dashboard-provider.service.ts
+++ services/lgmc-gui-kpi-dashboard-provider.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { LgmcGDashboardCardModel, LgmcGDashboardControlModel, LgmcGDashboardControls, LgmcGDashboardData, LgmcGDashboardProvider, LgmcGDashboardIndicatorModel, LgmcGDashboardAbstractProvider } from 'src/shared/lgmc-g/lgmc-g-dashboard/model/lgmc-g-dashboard.model';
+import { LgmcGDashboardProvider, LgmcGDashboardAbstractProvider, LgmcGDashboardWidgets } from 'src/shared/lgmc-g/lgmc-g-dashboard/model/lgmc-g-dashboard.model';
 import { LgmcPlatformAppStateService } from 'src/shared/lgmc-platform/lgmc-platform-app-state/services/lgmc-platform-app-state.service';
 
 import { LgmcPlatformDbApiKpiService } from 'src/shared/lgmc-platform/lgmc-platform-db-api/services/lgmc-platform-db-api-kpi.service';
@@ -21,6 +21,10 @@ import {
 import {
   LgmcOnPremisePathToUrlPipe
 } from '../../../lgmc-platform/lgmc-platform-utils/pipes/lgmc-on-premise-path-to-url.pipe';
+import { LgmcGWidgetInput } from 'src/shared/lgmc-g/lgmc-g-widget/models/lgmc-g-widget-input';
+import { LgmcGAlertCardComponent } from 'src/shared/lgmc-g/lgmc-g-alert-card/components/lgmc-g-alert-card/lgmc-g-alert-card.component';
+import { LgmcGCircleIndicatorComponent } from 'src/shared/lgmc-g/lgmc-g-circle-indicator/components/lgmc-g-circle-indicator/lgmc-g-circle-indicator.component';
+import { EventEmitter } from '@angular/core';
 
 type DashboardData = {
   groupKpis?: MnDeviceGroupWithKpi[],
@@ -64,16 +68,14 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
    *
    * @returns dashboard data
    */
-  public async loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardControls> {
+  public async loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardWidgets> {
     this.moduleConfig = <LgmcGuiKpiConfig> this.appStateService.getModuleConfig(lgmcGuiKpiModuleId);
     this.processParameters();
     if(this.moduleConfig.enabled && this.paramSystemId) {
-      return {
-        cards: enableCards ? await this.createControlCards() : [],
-      };
+      return enableCards ? await this.createControlCards() : [];
     }
 
-    return { cards: [] };
+    return [];
   }
 
   /**
@@ -81,7 +83,7 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
    *
    * @returns cards
    */
-  protected async createControlCards(): Promise<LgmcGDashboardControlModel[]> {
+  protected async createControlCards(): Promise<LgmcGWidgetInput<LgmcGAlertCardComponent>[]> {
     const sgCardConfig = this.moduleConfig?.providers?.dashboard?.sgCard;
 
     const superGroups = ((sgCardConfig?.enabled ?? true)) ? await this.apiDevModelSrvc.getSuperGroupList(this.paramSystemId) : undefined;
@@ -100,21 +102,25 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
 
     if(superGroups && (sgCardConfig?.enabled ?? true)) {
       return [{
-        type: "dropdown",
-        title: sgCardConfig?.title ?? "lgmc-gui-kpi.dashboard-card.supergroups.title",
-        description: sgCardConfig?.description ?? "lgmc-gui-kpi.dashboard-card.supergroups.description",
-        tooltip: sgCardConfig?.tooltip ?? "lgmc-gui-kpi.dashboard-card.supergroups.tooltip",
-        tooltipPosition: sgCardConfig?.tooltipPosition ?? "right",
-        dropdown: {
-          options: superGroups,
-          default: selectedSg,
-          optionLabel: "label",
-          optionValue: "",
-          clearButton: true,
-          onChange: (sg: MnSuperGroup) => { this.onSgChanged(sg) },
-          placeholder: sgCardConfig?.dropdownAllLabel ?? "lgmc-gui-kpi.dashboard-card.supergroups.dropdownAll",
-        }
-      }];
+          id: sgCardConfig.id,
+          component: LgmcGAlertCardComponent,
+          inputs: {
+            type: "dropdown",
+            title: sgCardConfig?.title ?? "lgmc-gui-kpi.dashboard-card.supergroups.title",
+            description: sgCardConfig?.description ?? "lgmc-gui-kpi.dashboard-card.supergroups.description",
+            tooltip: sgCardConfig?.tooltip ?? "lgmc-gui-kpi.dashboard-card.supergroups.tooltip",
+            tooltipPosition: sgCardConfig?.tooltipPosition ?? "right",
+            dropdown: {
+              options: superGroups,
+              default: selectedSg,
+              optionLabel: "label",
+              optionValue: "",
+              clearButton: true,
+              onChange: (sg: MnSuperGroup) => { this.onSgChanged(sg) },
+              placeholder: sgCardConfig?.dropdownAllLabel ?? "lgmc-gui-kpi.dashboard-card.supergroups.dropdownAll",
+            }
+          }
+        }];
     }
 
     return [];
@@ -141,7 +147,7 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
    *
    * @returns dashboard data
    */
-  public async loadDashboardData(enableCards: boolean = true, enableIndicators: boolean = true, skipGrps: number = undefined, takeGrps: number = undefined, searchTerm: string = undefined): Promise<LgmcGDashboardData> {
+  public async loadDashboardData(enableCards: boolean = true, enableIndicators: boolean = true, skipGrps: number = undefined, takeGrps: number = undefined, searchTerm: string = undefined): Promise<LgmcGDashboardWidgets> {
     this.moduleConfig = <LgmcGuiKpiConfig> this.appStateService.getModuleConfig(lgmcGuiKpiModuleId);
     this.processParameters();
     if(this.moduleConfig.enabled && this.paramSystemId) {
@@ -150,19 +156,23 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
 
       //console.log('DD: ' + JSON.stringify(data.groupKpis, null, 1));
 
-      for (const g of data.groupKpis) {
+      /* for (const g of data.groupKpis) {
         g.mnKpis.sort((a, b) => a.ordLvl1 > b.ordLvl1 ? 1 : -1);
 
-      }
+      } */
 
       //sort them by the order flag..
-
-      return {
-        cards: enableCards ? this.createCards(data, this.moduleConfig) : [],
-        indicators: enableIndicators ? await this.createIndicators(data, this.moduleConfig) : []
-      };
+      
+      let widgets: LgmcGDashboardWidgets = [];
+      if (enableCards)
+        widgets.push(...await this.createCards(data, this.moduleConfig));
+      if (enableIndicators)
+        widgets.push(...await this.createIndicators(data, this.moduleConfig));
+
+      return widgets;
     }
-    return { cards: [], indicators: [] };
+
+    return [];
   }
 
   /**
@@ -224,21 +234,25 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
    *
    * @returns cards
    */
-  protected createCards(data: DashboardData, moduleConfig: LgmcGuiKpiConfig): LgmcGDashboardCardModel[] {
+  protected createCards(data: DashboardData, moduleConfig: LgmcGuiKpiConfig): LgmcGDashboardWidgets {
     const kpiCardConfig = moduleConfig?.providers?.dashboard?.kpiCard;
 
     if(data.summary && (kpiCardConfig?.enabled ?? true)) {
 
-      const t: LgmcGDashboardCardModel = {
-        type: "value",
-        title: kpiCardConfig?.title ?? "lgmc-gui-kpi.dashboard-card.summary.title",
-        description: kpiCardConfig?.description ?? "lgmc-gui-kpi.dashboard-card.summary.description",
-        tooltip: kpiCardConfig?.tooltip ?? "lgmc-gui-kpi.dashboard-card.summary.tooltip",
-        tooltipPosition: kpiCardConfig?.tooltipPosition ?? "right",
-        icon: kpiCardConfig?.icon ?? "pi pi-bell",
-        iconColor: kpiCardConfig?.iconColor ?? "#f57c00",
-        value: data.summary.toString(),
-        onCardClick: () => { this.onCardClick(); },
+      const t: LgmcGWidgetInput<LgmcGAlertCardComponent> = {
+        id: kpiCardConfig.id,
+        component: LgmcGAlertCardComponent,
+        inputs: {
+          type: "value",
+          title: kpiCardConfig?.title ?? "lgmc-gui-kpi.dashboard-card.summary.title",
+          description: kpiCardConfig?.description ?? "lgmc-gui-kpi.dashboard-card.summary.description",
+          tooltip: kpiCardConfig?.tooltip ?? "lgmc-gui-kpi.dashboard-card.summary.tooltip",
+          tooltipPosition: kpiCardConfig?.tooltipPosition ?? "right",
+          icon: kpiCardConfig?.icon ?? "pi pi-bell",
+          iconColor: kpiCardConfig?.iconColor ?? "#f57c00",
+          value: data.summary,
+          onCardClick: this.onCardClick as any,
+        }
       };
       return [t];
     }
@@ -270,14 +284,14 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
    *
    * @returns indicators
    */
-  protected async createIndicators(data: DashboardData, moduleConfig: LgmcGuiKpiConfig): Promise< LgmcGDashboardIndicatorModel[]> {
-    const indicators = [];
+  protected async createIndicators(data: DashboardData, moduleConfig: LgmcGuiKpiConfig): Promise<LgmcGDashboardWidgets> {
+    const indicators: LgmcGDashboardWidgets = [];
 
     const kpiIndicatorsConfig = moduleConfig?.providers?.dashboard?.kpiIndicators;
 
     if(data.groupKpis && (kpiIndicatorsConfig?.enabled ?? true)) {
       // sort group kpis
-      data.groupKpis.sort((a, b) => a.order - b.order);
+      //data.groupKpis.sort((a, b) => a.order - b.order);
 
       const devGroups = data.groupKpis;
       let devGroup: MnDeviceGroupWithKpi;
@@ -303,19 +317,23 @@ export class LgmcGuiKpiDashboardProviderService extends LgmcGDashboardAbstractPr
         //console.log('PARAMS: ' + JSON.stringify(prs, null, 1));
 
         indicators.push({
-          image: this.getGroupImage(devGroup, kpiIndicatorsConfig.unknownDeviceImage),
-          title: devGroup.label,
-          colorUL: this.getGroupKpiColor(devGroup, 0),
-          textUL: this.getGroupKpiName(devGroup, 0),
-          colorUR: this.getGroupKpiColor(devGroup, 1),
-          textUR: this.getGroupKpiName(devGroup, 1),
-          colorBL: this.getGroupKpiColor(devGroup, 2),
-          textBL: this.getGroupKpiName(devGroup, 2),
-          colorBR: this.getGroupKpiColor(devGroup, 3),
-          textBR: this.getGroupKpiName(devGroup, 3),
-          finalColor: devGroup.alertSummaryStatus,
-          textCenter: textCenter,
-          onClick: () => { this.onIndicatorClick(str) }
+          id: `kpi-indicator-${str}`,
+          component: LgmcGCircleIndicatorComponent,
+          inputs: {
+            image: this.getGroupImage(devGroup, kpiIndicatorsConfig.unknownDeviceImage),
+            title: devGroup.label,
+            colorUL: this.getGroupKpiColor(devGroup, 0),
+            textUL: this.getGroupKpiName(devGroup, 0),
+            colorUR: this.getGroupKpiColor(devGroup, 1),
+            textUR: this.getGroupKpiName(devGroup, 1),
+            colorBL: this.getGroupKpiColor(devGroup, 2),
+            textBL: this.getGroupKpiName(devGroup, 2),
+            colorBR: this.getGroupKpiColor(devGroup, 3),
+            textBR: this.getGroupKpiName(devGroup, 3),
+            finalColor: devGroup.alertSummaryStatus,
+            textCenter: textCenter,
+            onClick: () => { this.onIndicatorClick(str) }
+          }
         });
       }
     }
