--- lgmc-g-dashboard/components/lgmc-g-dashboard/lgmc-g-dashboard.component.html
+++ lgmc-g-dashboard/components/lgmc-g-dashboard/lgmc-g-dashboard.component.html
@@ -2,91 +2,40 @@
   <lgmc-g-panel-tree *ngIf="isDisplayNodePanelState"></lgmc-g-panel-tree>
   <div class="dashboard" [ngClass]="{ large: large }">
 
-    <!--<ng-template [ngIf]="controls.cards.length !== 0 || data.cards.length !== 0 || data.indicators.length !== 0" [ngIfElse]="empty">-->
-    <div *ngIf="enableCards || enableControls" class="cards-grid">
-      <ng-container *ngFor="let card of orderedCards">
-        <lgmc-g-alert-card [type]="card.type" [title]="card.title" [description]="card.description" [value]="card.value"
-          [icon]="card.icon" [iconColor]="card.iconColor" [customContent]="card.customContent" [tooltip]="card.tooltip"
-          [tooltipPosition]="card.tooltipPosition" [actions]="card.actions" [actionsLabel]="card.actionsLabel"
-          [actionsButtonIcon]="card.actionsButtonIcon" [singleAction]="card.singleAction" [dropdown]="card.dropdown"
-          [disableDropdown]="reloadLocked" (onCardClick)="card.onCardClick ? card.onCardClick() : undefined">
-        </lgmc-g-alert-card>
-      </ng-container>
-    </div>
-
-    <ng-container *ngIf="enableIndicators">
-      <div class="indicators-grid">
-        <div class="indicators-legend">
-          <h4 class="lgmc-text-subheading">Device groups KPI</h4>
-          <!-- TODO: make this configurable -->
-          <!-- <div class="indicators-legend-content">
-            <div>
-              <div class="indicators-legend-circle">
-                <i class="pi pi-times-circle"></i>
-              </div>
-              <p class="lgmc-mobile-text-small"> Critical </p>
-            </div>
-            <div>
-              <div class="indicators-legend-circle">
-                <i class="pi pi-info-circle"></i>
-              </div>
-              <p class="lgmc-mobile-text-small"> Warning </p>
-            </div>
-            <div>
-              <div class="indicators-legend-circle">
-                <i class="pi pi-check-circle"></i>
-              </div>
-              <p class="lgmc-mobile-text-small"> OK </p>
-            </div>
-          </div> -->
-        </div>
-
-        <div *ngFor="let indicator of data.indicators" class="indicator">
-          <lgmc-g-circle-indicator [image]="indicator.image" [title]="indicator.title" [titleUnder]="titleUnder"
-            [valuesAround]="valuesAround" [colorUL]="indicator.colorUL" [textUL]="indicator.textUL"
-            [colorUR]="indicator.colorUR" [textUR]="indicator.textUR" [colorBL]="indicator.colorBL"
-            [textBL]="indicator.textBL" [colorBR]="indicator.colorBR" [textBR]="indicator.textBR"
-            [finalColor]="indicator.finalColor" [circleWidth]="circleWidth" [hideEmptyLabels]="hideEmptyLabels"
-            [enableTextInside]="enableTextInside" [textInside]="indicator.textCenter"
-            [large]="large" (click)="indicator.onClick()">
-          </lgmc-g-circle-indicator>
-        </div>
+    <ng-container *ngIf="gridWidgets.length">
+      <div *ngIf="gridConfigMenuItems.length" class="p-d-flex p-justify-end" [hidden]="!!widgetsGridComponent?.inEditMode">
+        <button
+          pButton
+          type="button"
+          class="p-button-secondary p-button-rounded p-button-text"
+          (click)="widgetsConfigMenu.toggle($event)"
+          icon="pi pi-ellipsis-v"
+          [disabled]="reloadLocked"
+        ></button>
+        <p-menu #widgetsConfigMenu [model]="gridConfigMenuItems" [popup]="true"></p-menu>
       </div>
 
-    </ng-container>
-
-    <div *ngIf="enablePaginationElements" class="indicator">
-      <div class="p-grid" style="width: 100%; " >
-        <div class="p-col-12" style="width: 100%;">
-          <div class="p-grid"  style="width: 100%;">
-            <div class="p-col-4" style="text-align: right;">
-              <button pButton pRipple type="button" icon="pi pi-angle-left"
-                class="p-button-rounded p-button-secondary p-button-text" (click)="OnPageLeft()"></button>
-            </div>
-            <div class="p-col-4 centerPagination">
-              <p>{{pageGroupSel + 1}}/{{pageGroupMax}}({{nGroupsDispl}})</p>
-            </div>
-            <div class="p-col-4">
-              <button pButton pRipple type="button" icon="pi pi-angle-right"
-                class="p-button-rounded p-button-secondary p-button-text" (click)="OnPageRight()"></button>
-            </div>
-          </div>
-        </div>
-        <div class="p-col-12">
-
-
-            <div class="p-inputgroup">
-              <button type="button" pButton pRipple icon="pi pi-search" styleClass="p-button-success" (click)="OnSearch()"></button>
-              <input type="text" pInputText placeholder="" [(ngModel)]="searchGroupName" >
-              <button type="button" pButton pRipple icon="pi pi-times" styleClass="p-button-danger" (click)="OnSearchCancel()"></button>
-            </div>
-
-
-
-        </div>
+      <lgmc-g-grid #widgetsGrid [components]="gridWidgets"></lgmc-g-grid>
+
+      <div [hidden]="!widgetsGridComponent?.inEditMode" class="p-d-flex" style="gap:1rem">
+        <button
+          pButton
+          type="button"
+          [disabled]="configTimeLocked"
+          class="lgmc-button" [icon]="'pi ' + (configTimeLocked ? 'pi-lock' : 'pi-check')" iconPos="left"
+          label="{{'lgmc-gui-configs.detail.update' | translate}}"
+          (click)="stopEditingWidgetsGrid(true)"
+        ></button>
+        <button
+          pButton
+          type="button"
+          class="lgmc-button p-button-secondary" icon="pi pi-times" iconPos="left"
+          label="{{'lgmc-gui-configs.detail.cancel' | translate}}"
+          (click)="stopEditingWidgetsGrid(false)"
+        ></button>
       </div>
-    </div>
-    <!--</ng-template>-->
+    </ng-container>
+    
     <ng-template #empty>
       <lgmc-g-not-found></lgmc-g-not-found>
     </ng-template>
--- lgmc-g-dashboard/components/lgmc-g-dashboard/lgmc-g-dashboard.component.ts
+++ lgmc-g-dashboard/components/lgmc-g-dashboard/lgmc-g-dashboard.component.ts
@@ -1,16 +1,21 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Params } from '@angular/router';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 
 import {
-	LgmcGDashboardCardModel,
-	LgmcGDashboardControls,
-	LgmcGDashboardData,
-	LgmcGDashboardProvider,
-	LgmcGDashboardReloadDataListener,
+  LgmcGDashboardProvider,
+  LgmcGDashboardReloadDataListener,
+  LgmcGDashboardWidgets,
 } from '../../model/lgmc-g-dashboard.model';
 import { TreeNode } from 'primeng/api';
 import { LgmcPlatformAppStateService } from 'src/shared/lgmc-platform/lgmc-platform-app-state/services/lgmc-platform-app-state.service';
+import { TranslateService } from '@ngx-translate/core';
+import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
+import { LgmcGGridInput } from '../../../lgmc-g-grid/model/lgmc-g-grid-input';
+import { LgmcGGridComponent } from '../../../lgmc-g-grid/components/lgmc-g-grid/lgmc-g-grid.component';
+import { MenuItem } from 'primeng/api';
+import { lgmcGuiConfigsModuleId, LgmcGuiConfigsConfig } from 'src/shared/lgmc-gui/lgmc-gui-configs/model/lgmc-gui-configs.model';
+import { LgmcGGridWidgetConfig, LgmcGuiDashboardConfig, lgmcGuiDashboardModuleId } from 'src/shared/lgmc-gui/lgmc-gui-dashboard/model/lgmc-gui-dashboard.model';
+import { LgmcGWidgetInput } from 'src/shared/lgmc-g/lgmc-g-widget/models/lgmc-g-widget-input';
 
 const minRefreshTimeout = 5000;
 
@@ -102,19 +107,19 @@ export class LgmcGDashboardComponent implements OnInit {
    * Help loading flag
    */
   public loaded = false;
+  @ViewChild('widgetsGrid') widgetsGridComponent: LgmcGGridComponent;
+  isEditShowed = false;
+  isDialogVisible = true;
 
   isDisplayNodePanelState = false;
 
-  public controls: LgmcGDashboardControls = {
-    cards: []
-  }
-
-  public data: LgmcGDashboardData = {
-    cards: [],
-    indicators: []
-  }
+  
+  protected widgetsFromProviders: {widget: LgmcGWidgetInput<any>, loadOnce: boolean}[] = [];
+  public gridWidgets: LgmcGGridInput<any>[] = [];
+  public gridConfigMenuItems: MenuItem[] = [];
+  public configTimeLocked: boolean = true;
+  protected gridConfigGlobalScope: boolean = false;
 
-  public orderedCards: LgmcGDashboardCardModel[];
 
   protected timeout: NodeJS.Timeout;
 
@@ -122,10 +127,10 @@ export class LgmcGDashboardComponent implements OnInit {
 
   public reloadLocked: boolean = false;
 
-	public nodes: TreeNode[] = [];
-	//public isDisplayNodePanel: boolean = true;
+  public nodes: TreeNode[] = [];
+  //public isDisplayNodePanel: boolean = true;
 
-	private subscriptions: Array<Subscription> = [];
+  private subscriptions: Array<Subscription> = [];
 
   public nGroups = 0;
   public pageGroupSel = 0;
@@ -134,46 +139,71 @@ export class LgmcGDashboardComponent implements OnInit {
   public searchGroupName: string;
   public nGroupsDispl = 0;
 
-	constructor(protected appStateService: LgmcPlatformAppStateService) {}
+  constructor(
+    protected appStateService: LgmcPlatformAppStateService,
+    protected messageService: MessageService,
+    protected translateService: TranslateService
+  ) {}
 
-	ngOnInit(): void {
-		this.registerDataChangeListener();
-		this.reload(true);
+  ngOnInit(): void {
+    this.registerDataChangeListener();
+    this.reload(true);
     if (this.isDisplayNodePanel) {
-		this.subscriptions.push(
-      this.appStateService.toolbarClicked.subscribe((x) => {
-				this.isDisplayNodePanelState = x;
-			})
-		);
+      this.subscriptions.push(
+        this.appStateService.toolbarClicked.subscribe((x) => { this.isDisplayNodePanelState = x})
+      );
     }
-	}
+
+    this.subscriptions.push(
+      this.appStateService.forms.subscribe(() => this.buildConfigMenus()),
+    );
+  }
 
   ngOnDestroy() {
     clearTimeout(this.timeout);
 
-		// remove data change listener
-		for (let i = 0; i < this.dataProviders.length; i++) {
-			this.dataProviders[i].provider.addReloadDataListener(
-				this.dataChangeListener
-			);
-		}
-
-		this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
-	}
-
-	protected registerDataChangeListener(): void {
-		this.dataChangeListener = {
-			reloadData: () => {
-				this.reload(false);
-			},
-		};
-
-		for (let i = 0; i < this.dataProviders.length; i++) {
-			this.dataProviders[i].provider.addReloadDataListener(
-				this.dataChangeListener
-			);
-		}
-	}
+    // remove data change listener
+    for (let i = 0; i < this.dataProviders.length; i++) {
+      this.dataProviders[i].provider.addReloadDataListener(
+        this.dataChangeListener
+      );
+    }
+
+    this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
+
+    this.stopEditingWidgetsGrid(false);
+  }
+
+  protected buildConfigMenus() {
+    const cardsConfigMenuItems = [];
+    const lgmcGuiConfigsModuleConfig = this.appStateService.getModuleConfig(lgmcGuiConfigsModuleId) as LgmcGuiConfigsConfig;
+
+    if (this.appStateService.isAllowed(lgmcGuiConfigsModuleConfig.globalConfigScopeAccessForm)) {
+      const globalConfigItem: MenuItem = { label: this.translateService.instant('lgmc-gui-dashboard.dashboard.config.scope.global'), icon: 'pi pi-pencil' };
+      cardsConfigMenuItems.push({...globalConfigItem, command: () => this.startEditingWidgetsGrid(true)});
+    }
+
+    if (this.appStateService.isAllowed(lgmcGuiConfigsModuleConfig.pages.configs.accessForm)) {
+      const userConfigItem: MenuItem = { label: this.translateService.instant('lgmc-gui-dashboard.dashboard.config.scope.user'), icon: 'pi pi-user-edit' };
+      cardsConfigMenuItems.push({...userConfigItem, command: () => this.startEditingWidgetsGrid(false)});
+    }
+
+    this.gridConfigMenuItems = cardsConfigMenuItems;
+  }
+
+  protected registerDataChangeListener(): void {
+    this.dataChangeListener = {
+      reloadData: () => {
+        this.reload(false);
+      },
+    };
+
+    for (let i = 0; i < this.dataProviders.length; i++) {
+      this.dataProviders[i].provider.addReloadDataListener(
+        this.dataChangeListener
+      );
+    }
+  }
 
   /**
    * Help method which locks reloading
@@ -194,130 +224,119 @@ export class LgmcGDashboardComponent implements OnInit {
   }
 
   protected reload(init: boolean): void {
-    if(!this.lockReload()) {
-      this.onLoading.emit(true);
-
-			this.reloadComponents(init).then(
-				(result: {
-					controls: LgmcGDashboardControls;
-					data: LgmcGDashboardData;
-				}) => {
-					if (result.controls) {
-						// update controls
-						// TODO: update only the changed ones
-						this.controls.cards = result.controls.cards;
-					}
-
-					if (result.data) {
-						// update cards
-						// TODO: update only the changed ones
-						this.data.cards = result.data.cards;
-
-          // update indicators
-          // TODO: update only the changed ones
-          this.data.indicators = result.data.indicators;
+    if (this.lockReload())
+      return;
+
+    this.onLoading.emit(true);
+
+    this.reloadWidgets(init).then((result: {
+      controls: LgmcGDashboardWidgets;
+      data: LgmcGDashboardWidgets;
+    })=> {
+      // controls should only be loaded at init, so keep them
+      this.widgetsFromProviders = this.widgetsFromProviders.filter(widgetFromProvider => widgetFromProvider.loadOnce);
+
+      if (result.controls) {
+        // update controls
+        // TODO: update only the changed ones
+        this.widgetsFromProviders.push(...result.controls.map(widget => ({widget: widget, loadOnce: true})));
+      }
+
+      if (result.data) {
+        // update indicators
+        // TODO: update only the changed ones
+        this.widgetsFromProviders.push(...result.data.map(widget => ({widget: widget, loadOnce: false})));
+      }
+
+      this.mapWidgetsToGrid(true);
+
+      // schedule reload of indicators
+      if (this.refreshTimeout > 0) {
+        this.refreshTimeout = Math.max(
+          this.refreshTimeout,
+          minRefreshTimeout
+        );
+        if (this.timeout) {
+          clearTimeout(this.timeout);
         }
+        this.timeout = setTimeout(() => {
+          this.reload(false);
+        }, this.refreshTimeout);
+        this.unlockReload();
+      }
+      this.loaded = true;
+
+      this.onLoading.emit(false);
+    });
+  }
+
+  protected mapWidgetsToGrid(includeUserConfig: boolean): void {
+    const widgetsConfig: LgmcGGridWidgetConfig[] = (
+      this.appStateService.getModuleConfig(lgmcGuiDashboardModuleId, includeUserConfig) as LgmcGuiDashboardConfig
+    ).pages.dashboard.gridWidgets;
+
+    this.gridWidgets = this.widgetsFromProviders.map(widgetFromProvider => {
+      let widgetConfigGridPos =
+        widgetsConfig.find(widgetConfig => widgetConfig?.id === widgetFromProvider.widget.id)?.gridPosition
+        ?? { order: 1, defaultSize: { rows: 1, cols: 1 } };
+
+      return {
+        component: widgetFromProvider.widget,
+        gridPosition: widgetConfigGridPos
+      }
+    });
+  }
 
-					// order cards
-					// this is temporary solution since controls are represented by cards
-					const orderedCards = [
-						...this.controls.cards,
-						...this.data.cards,
-					].sort(
-						(
-							card1: LgmcGDashboardCardModel,
-							card2: LgmcGDashboardCardModel
-						) => {
-							return card1.order
-								? card2.order
-									? card1.order - card2.order
-									: -1
-								: card2.order
-								? 1
-								: 0;
-						}
-					);
-					this.orderedCards = orderedCards;
-
-					// schedule reload of indicators
-					if (this.refreshTimeout > 0) {
-						this.refreshTimeout = Math.max(
-							this.refreshTimeout,
-							minRefreshTimeout
-						);
-						if (this.timeout) {
-							clearTimeout(this.timeout);
-						}
-						this.timeout = setTimeout(() => {
-							this.reload(false);
-						}, this.refreshTimeout);
-						this.unlockReload();
-					}
-					this.loaded = true;
-
-					this.onLoading.emit(false);
-				}
-			);
-		}
-	}
-
-	/**
-	 * Help method which reloads components
-	 */
-	protected async reloadComponents(
-		init: boolean
-	): Promise<{ controls?: LgmcGDashboardControls; data?: LgmcGDashboardData }> {
-		return {
-			controls: init ? await this.reloadControls() : undefined,
-			data: await this.reloadData(),
-		};
-	}
-
-	/**
-	 * Help method which reloads controls.
-	 *
-	 * @returns controls
-	 */
-	protected async reloadControls(): Promise<LgmcGDashboardControls> {
-		const controls: LgmcGDashboardControls = {
-			cards: [],
-		};
-
-		if (this.dataProviders && this.enableControls) {
-			let actControls: LgmcGDashboardControls;
-			for (let i = 0; i < this.dataProviders.length; i++) {
-				this.dataProviders[i].provider.setData(this.dataProviders[i].data);
-				actControls = await this.dataProviders[
-					i
-				].provider.loadDashboardControls(this.enableControls);
-				if (actControls) {
-					if (actControls.cards) {
-						for (let j = 0; j < actControls.cards.length; j++) {
-							controls.cards.push(actControls.cards[j]);
-						}
-					}
-				}
-			}
-		}
-
-		return controls;
-	}
-
-	/**
-	 * Help method which reloads indicators.
-	 *
-	 * @returns indicators
-	 */
-	protected async reloadData(): Promise<LgmcGDashboardData> {
-		const data: LgmcGDashboardData = {
-			cards: [],
-			indicators: [],
-		};
-
-		if (this.dataProviders && (this.enableCards || this.enableIndicators)) {
-			let actData: LgmcGDashboardData;
-			for (let i = 0; i < this.dataProviders.length; i++) {
-				this.dataProviders[i].provider.setData(this.dataProviders[i].data);
+  /**
+   * Help method which reloads components
+   */
+  protected async reloadWidgets(
+    init: boolean
+  ): Promise<{ controls?: LgmcGDashboardWidgets; data?: LgmcGDashboardWidgets }> {
+    return {
+      controls: init ? await this.reloadControls() : undefined,
+      data: await this.reloadData(),
+    };
+  }
+
+  /**
+   * Help method which reloads controls.
+   *
+   * @returns controls
+   */
+  protected async reloadControls(): Promise<LgmcGDashboardWidgets> {
+    const controls: LgmcGDashboardWidgets = [];
+
+    if (this.dataProviders && this.enableControls) {
+      let actControls: LgmcGDashboardWidgets;
+      for (let i = 0; i < this.dataProviders.length; i++) {
+        this.dataProviders[i].provider.setData(this.dataProviders[i].data);
+        actControls = await this.dataProviders[
+          i
+        ].provider.loadDashboardControls(this.enableControls);
+        if (actControls) {
+          for (let j = 0; j < actControls.length; j++) {
+            controls.push(actControls[j]);
+          }
+        }
+      }
+    }
+
+    return controls;
+  }
+
+  /**
+   * Help method which reloads indicators.
+   *
+   * @returns indicators
+   */
+  protected async reloadData(): Promise<LgmcGDashboardWidgets> {
+    const data: LgmcGDashboardWidgets = [];
+
+    if (this.dataProviders && (this.enableCards || this.enableIndicators)) {
+      let actData: LgmcGDashboardWidgets;
+      for (let i = 0; i < this.dataProviders.length; i++) {
+        this.dataProviders[i].provider.setData(this.dataProviders[i].data);
 
         this.nGroups = await this.dataProviders[i].provider.getNumberGroups();
 
@@ -340,27 +359,21 @@ export class LgmcGDashboardComponent implements OnInit {
         //console.log('************************skipGrps...' + skipGrps);
         //console.log('************************takeGrps...' + takeGrps);
 
-				actData = await this.dataProviders[i].provider.loadDashboardData(
-					this.enableCards,
-					this.enableIndicators,
+        actData = await this.dataProviders[i].provider.loadDashboardData(
+          this.enableCards,
+          this.enableIndicators,
           skipGrps,
           takeGrps,
           this.searchGroupName
-				);
-				if (actData) {
-					if (actData.cards && this.enableCards) {
-						for (let j = 0; j < actData.cards.length; j++) {
-							data.cards.push(actData.cards[j]);
-						}
-					}
-					if (actData.indicators && this.enableIndicators) {
-						for (let j = 0; j < actData.indicators.length; j++) {
-							data.indicators.push(actData.indicators[j]);
-						}
-					}
-				}
-			}
-		}
+        );
+
+        if (actData) {
+          for (let j = 0; j < actData.length; j++) {
+            data.push(actData[j]);
+          }
+        }
+      }
+    }
 
     return data;
   }
@@ -369,24 +382,21 @@ export class LgmcGDashboardComponent implements OnInit {
     if (this.pageGroupSel < this.pageGroupMax - 1) {
       this.pageGroupSel ++;
     }
-    this.unlockReload();
 
+    this.unlockReload();
     await this.reload(false);
   }
 
   async OnPageLeft() {
-
     if (this.pageGroupSel > 0) {
       this.pageGroupSel --;
     }
 
     this.unlockReload();
-
     await this.reload(true);
   }
 
   async OnSearch() {
-
     await this.reload(true);
   }
 
@@ -396,4 +406,64 @@ export class LgmcGDashboardComponent implements OnInit {
     await this.reload(true);
   }
 
+
+
+  protected async fetchTimeLockStatus(): Promise<boolean> {
+    this.configTimeLocked = true;
+    const res = await this.appStateService.isModuleConfigTimeLocked(lgmcGuiDashboardModuleId);
+    return this.configTimeLocked = res;
+  }
+
+  protected async startEditingWidgetsGrid(globalScope: boolean) {
+    if (this.widgetsGridComponent.inEditMode || this.reloadLocked) return;
+    this.gridConfigGlobalScope = globalScope;
+    this.lockReload();
+    this.fetchTimeLockStatus().then(isLocked => {
+      if (!isLocked && globalScope)
+        this.appStateService.timeLockModuleConfig(lgmcGuiDashboardModuleId);
+    });
+
+    if (globalScope){
+      this.mapWidgetsToGrid(false);
+    }
+
+    this.widgetsGridComponent.startEditionGrid();
+  }
+
+  public async stopEditingWidgetsGrid(saveChanges: boolean) {
+    const wasLoading = this.appStateService.isLoading();
+    if (!this.widgetsGridComponent.inEditMode) return;
+
+    try {
+      this.appStateService.setLoading(true);
+      this.widgetsGridComponent.stopEditionGrid(saveChanges);
+      await this.appStateService.timeUnlockModuleConfig(lgmcGuiDashboardModuleId);
+      if (this.configTimeLocked || !saveChanges)
+        return;
+      
+      const newWidgetsConfig: LgmcGGridWidgetConfig[] = this.widgetsGridComponent.getComponentsList().map(component => {
+        return {
+          id: component.component.id,
+          gridPosition: component.gridPosition,
+        };
+      });
+
+      const dashboardConfigCopy: LgmcGuiDashboardConfig = this.appStateService.getModuleConfig(lgmcGuiDashboardModuleId, !this.gridConfigGlobalScope, true);
+      dashboardConfigCopy.pages.dashboard.gridWidgets = newWidgetsConfig;
+      await this.appStateService.updateModuleConfig(lgmcGuiDashboardModuleId, dashboardConfigCopy, this.gridConfigGlobalScope).then(() => {
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('lgmc-gui-configs.configs.toast.success'),
+          detail: this.translateService.instant('lgmc-gui-configs.configs.toast.configUpdatedSuccessfully')
+        });
+      });
+
+    } finally {
+      if (this.gridConfigGlobalScope)
+        this.mapWidgetsToGrid(true);
+
+      this.unlockReload();
+      this.appStateService.setLoading(wasLoading);
+    }
+  }
 }
--- lgmc-g-dashboard/lgmc-g-dashboard.module.ts
+++ lgmc-g-dashboard/lgmc-g-dashboard.module.ts
@@ -4,6 +4,8 @@ import { TooltipModule } from 'primeng/tooltip';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
 import { FormsModule } from '@angular/forms';
+import { MenuModule } from 'primeng/menu';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
 import { LgmcGAlertCardModule } from '../lgmc-g-alert-card/lgmc-g-alert-card.module';
 import { LgmcGCircleIndicatorModule } from '../lgmc-g-circle-indicator/lgmc-g-circle-indicator.module';
@@ -11,6 +13,9 @@ import { LgmcGCircleIndicatorModule } from '../lgmc-g-circle-indicator/lgmc-g-ci
 import { LgmcGDashboardComponent } from './components/lgmc-g-dashboard/lgmc-g-dashboard.component';
 import { LgmcGNotFoundModule } from '../lgmc-g-not-found/lgmc-g-not-found.module';
 import { LgmcGPanelTreeModule } from '../lgmc-g-panel-tree/lgmc-g-panel-tree.module';
+import { LgmcGGridModule } from '../lgmc-g-grid/lgmc-g-grid.module';
+import { LgmcGWidgetModule } from '../lgmc-g-widget/lgmc-g-widget.module';
+import { DialogModule } from 'primeng/dialog';
 
 @NgModule({
   declarations: [
@@ -24,7 +29,15 @@ import { LgmcGPanelTreeModule } from '../lgmc-g-panel-tree/lgmc-g-panel-tree.mod
     LgmcGPanelTreeModule,
     ButtonModule,
     InputTextModule,
-    FormsModule
+    FormsModule,
+    MenuModule,
+    LgmcGGridModule,
+    LgmcGWidgetModule,
+    DialogModule,
+    TranslateModule,
+  ],
+  providers: [
+    TranslateService
   ],
   exports: [
     LgmcGDashboardComponent
--- lgmc-g-dashboard/model/lgmc-g-dashboard.model.ts
+++ lgmc-g-dashboard/model/lgmc-g-dashboard.model.ts
@@ -1,9 +1,10 @@
-import { Component, Type } from "@angular/core";
+import { Type } from "@angular/core";
 import { Params } from "@angular/router";
-import { listeners } from "process";
 import { LgmcGAlertCardType } from "../../lgmc-g-alert-card/model/lgmc-g-alert-card.model";
+import { LgmcGWidgetInput } from "../../lgmc-g-widget/models/lgmc-g-widget-input";
 
-export type LgmcGDashboardIndicatorModel = {
+/* export type LgmcGDashboardIndicatorModel = {
+  id: string,
   image: string,
   title: string,
   colorUL: string,
@@ -17,9 +18,10 @@ export type LgmcGDashboardIndicatorModel = {
   finalColor?: string,
   textCenter: string,
   onClick: () => void
-}
+} */
 
 export type LgmcGDashboardCardModel = {
+  id: string,
   type: LgmcGAlertCardType,
   title?: string,
   description?: string,
@@ -50,16 +52,18 @@ export type LgmcGDashboardCardModel = {
   onCardClick?: () => void,
 }
 
-export type LgmcGDashboardControlModel = LgmcGDashboardCardModel;
+/* export type LgmcGDashboardControlModel = LgmcGDashboardCardModel; */
 
-export type LgmcGDashboardControls = {
+/* export type LgmcGDashboardControls = {
   cards: LgmcGDashboardControlModel[],
-}
+} */
 
-export type LgmcGDashboardData = {
+/* export type LgmcGDashboardData = {
   cards: LgmcGDashboardCardModel[],
   indicators: LgmcGDashboardIndicatorModel[],
-}
+} */
+
+export type LgmcGDashboardWidgets = LgmcGWidgetInput<any>[];
 
 export interface LgmcGDashboardProvider {
 
@@ -69,9 +73,9 @@ export interface LgmcGDashboardProvider {
 
   setParams(params: Params): void;
 
-  loadDashboardData(enableCards: boolean, enableIndicators: boolean, skipGrps: number, takeGrps: number, searchTerm: string): Promise<LgmcGDashboardData>;
+  loadDashboardData(enableCards: boolean, enableIndicators: boolean, skipGrps: number, takeGrps: number, searchTerm: string): Promise<LgmcGDashboardWidgets>;
 
-  loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardControls>;
+  loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardWidgets>;
 
   addReloadDataListener(listener: LgmcGDashboardReloadDataListener);
 
@@ -125,17 +129,12 @@ export class LgmcGDashboardAbstractProvider implements LgmcGDashboardProvider {
     }
   }
 
-  public async loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardControls> {
-    return {
-      cards: []
-    }
+  public async loadDashboardControls(enableCards: boolean): Promise<LgmcGDashboardWidgets> {
+    return [];
   }
 
-  public async loadDashboardData(): Promise<LgmcGDashboardData> {
-    return {
-      cards: [],
-      indicators: []
-    }
+  public async loadDashboardData(): Promise<LgmcGDashboardWidgets> {
+    return [];
   }
 
   public async getNumberGroups(): Promise<number> {
