diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json
index be46aebec1..8e3b597c6b 100644
--- a/application/src/main/data/json/system/widget_bundles/cards.json
+++ b/application/src/main/data/json/system/widget_bundles/cards.json
@@ -271,8 +271,8 @@
     {
       "alias": "aggregated_value_card",
       "name": "Aggregated value card",
-      "image": null,
-      "description": null,
+      "image": "data:image/png;base64,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",
+      "description": "Displays current and aggregated difference values with a timeseries chart. Widget styles are customizable.",
       "descriptor": {
         "type": "timeseries",
         "sizeX": 4.5,
@@ -284,12 +284,12 @@
         "settingsSchema": "{}",
         "dataKeySettingsSchema": "{}",
         "latestDataKeySettingsSchema": "{}",
-        "settingsDirective": "",
+        "settingsDirective": "tb-aggregated-value-card-widget-settings",
         "dataKeySettingsDirective": "",
         "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
         "hasBasicMode": true,
         "basicModeDirective": "tb-aggregated-value-card-basic-config",
-        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"Main building\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"watermeter\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 10 - 5;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 80) {\\n\\tvalue = 80;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]},\"latestDataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Avg watermeter\",\"color\":\"#4caf50\",\"settings\":{\"position\":\"center\",\"font\":{\"size\":52,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"1\"},\"color\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":false},\"_hash\":0.9408410830697858,\"funcBody\":\"var value = prevValue + Math.random() * 10 - 5;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 80) {\\n\\tvalue = 80;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m³\",\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Delta percent watermeter\",\"color\":\"#f44336\",\"settings\":{\"position\":\"rightTop\",\"font\":{\"size\":14,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"20px\"},\"color\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"rangeList\":[{\"from\":null,\"to\":0,\"color\":\"#198038\"},{\"from\":0,\"to\":0,\"color\":\"rgba(0, 0, 0, 0.87)\"},{\"from\":0,\"to\":null,\"color\":\"#D12730\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":true},\"_hash\":0.06392321853157967,\"funcBody\":\"var value = prevValue + Math.random() * 6 - 3;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -25) {\\n\\tvalue = -25;\\n} else if (value > 25) {\\n\\tvalue = 25;\\n} \\nreturn value;\",\"aggregationType\":null,\"units\":\"%\",\"decimals\":0,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random 2\",\"color\":\"#607d8b\",\"settings\":{\"position\":\"rightBottom\",\"font\":{\"size\":11,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"rangeList\":[],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":false},\"_hash\":0.44695098620509865,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m³\",\"decimals\":1,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"hideInterval\":false,\"hideLastInterval\":false,\"hideQuickInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":2,\"timewindowMs\":60000,\"interval\":43200000,\"fixedTimewindow\":{\"startTimeMs\":1691927717318,\"endTimeMs\":1692014117318},\"quickInterval\":\"CURRENT_MONTH_SO_FAR\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":null,\"padding\":\"0\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":null,\"max\":null,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"bottom\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":true,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false},\"title\":\"Aggregated value card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"configMode\":\"basic\",\"actions\":{},\"showTitleIcon\":true,\"titleIcon\":\"water_drop\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"useDashboardTimewindow\":false,\"displayTimewindow\":true,\"decimals\":0,\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"24px\",\"icon\":null,\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":\"rgba(0, 0, 0, 0.38)\",\"displayTypePrefix\":false}}"
+        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"Main building\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"watermeter\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 10 - 5;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 80) {\\n\\tvalue = 80;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m³\",\"decimals\":0,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]},\"latestDataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Latest\",\"color\":\"#4caf50\",\"settings\":{\"position\":\"center\",\"font\":{\"size\":52,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"1\"},\"color\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":false},\"_hash\":0.9408410830697858,\"funcBody\":\"var value = prevValue + Math.random() * 10 - 5;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 80) {\\n\\tvalue = 80;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m³\",\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Delta percent\",\"color\":\"#f44336\",\"settings\":{\"position\":\"rightTop\",\"font\":{\"size\":14,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"20px\"},\"color\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"rangeList\":[{\"from\":null,\"to\":0,\"color\":\"#198038\"},{\"from\":0,\"to\":0,\"color\":\"rgba(0, 0, 0, 0.87)\"},{\"from\":0,\"to\":null,\"color\":\"#D12730\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":true},\"_hash\":0.06392321853157967,\"funcBody\":\"var value = prevValue + Math.random() * 6 - 3;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -25) {\\n\\tvalue = -25;\\n} else if (value > 25) {\\n\\tvalue = 25;\\n} \\nreturn value;\",\"aggregationType\":null,\"units\":\"%\",\"decimals\":0,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Delta absolute\",\"color\":\"#607d8b\",\"settings\":{\"position\":\"rightBottom\",\"font\":{\"size\":11,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"rangeList\":[],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showArrow\":false},\"_hash\":0.44695098620509865,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m³\",\"decimals\":1,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"hideInterval\":false,\"hideLastInterval\":false,\"hideQuickInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":2,\"timewindowMs\":60000,\"interval\":43200000,\"fixedTimewindow\":{\"startTimeMs\":1691927717318,\"endTimeMs\":1692014117318},\"quickInterval\":\"CURRENT_MONTH_SO_FAR\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":null,\"padding\":\"0\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":null,\"max\":null,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"bottom\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":true,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false,\"showSubtitle\":true,\"subtitle\":\"${entityName}\",\"subtitleFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"subtitleColor\":\"rgba(0, 0, 0, 0.38)\",\"showDate\":true,\"dateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"dateFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"dateColor\":\"rgba(0, 0, 0, 0.38)\",\"showChart\":true,\"chartColor\":\"rgba(0, 0, 0, 0.87)\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Aggregated value card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"configMode\":\"basic\",\"actions\":{},\"showTitleIcon\":true,\"titleIcon\":\"water_drop\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"useDashboardTimewindow\":false,\"displayTimewindow\":true,\"decimals\":0,\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"24px\",\"icon\":null,\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":\"rgba(0, 0, 0, 0.38)\",\"displayTypePrefix\":false},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"borderRadius\":null}"
       }
     }
   ]
diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index a2a33b73a1..22f50e79af 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -31,7 +31,6 @@ import {
 } from '@shared/models/dashboard.models';
 import { deepClone, isDefined, isDefinedAndNotNull, isString, isUndefined } from '@core/utils';
 import {
-  DataKey,
   Datasource,
   datasourcesHasOnlyComparisonAggregation,
   DatasourceType,
@@ -484,6 +483,14 @@ export class DashboardUtilsService {
     return widgetsArray;
   }
 
+  public isEmptyDashboard(dashboard: Dashboard): boolean {
+    if (dashboard?.configuration?.widgets) {
+      return Object.keys(dashboard?.configuration?.widgets).length === 0;
+    } else {
+      return true;
+    }
+  }
+
   public addWidgetToLayout(dashboard: Dashboard,
                            targetState: string,
                            targetLayout: DashboardLayoutId,
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 3996c1abaf..526336f5a3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -71,7 +71,6 @@ import { MediaBreakpoints } from '@shared/models/constants';
 import { AuthUser } from '@shared/models/user.model';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import {
-  DatasourceType,
   Widget,
   WidgetConfig,
   WidgetInfo,
@@ -415,6 +414,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       this.updateLayoutSizes();
     });
     this.dashboardResize$.observe(this.dashboardContainer.nativeElement);
+    if (!this.widgetEditMode && !this.readonly && this.dashboardUtils.isEmptyDashboard(this.dashboard)) {
+      this.setEditMode(true, false);
+    }
   }
 
   private init(data: DashboardPageInitData) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 6616eb02f9..60e0ab43cc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -64,6 +64,9 @@
     <tb-color-settings formControlName="color">
     </tb-color-settings>
   </div>
+  <div class="tb-arrow-field">
+    <mat-checkbox formControlName="showArrow"></mat-checkbox>
+  </div>
   <div class="tb-form-table-row-cell-buttons">
     <button type="button"
             mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.scss
index e07b9fa9ad..ce12a6fde4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.scss
@@ -49,10 +49,10 @@
 
   .tb-aggregation-field {
     flex: 1;
-    min-width: 150px;
+    min-width: 120px;
   }
 
-  .tb-units-field, .tb-decimals-field, .tb-font-field, .tb-color-field {
+  .tb-units-field, .tb-decimals-field, .tb-font-field, .tb-color-field, tb-arrow-field {
     display: flex;
     flex-direction: row;
     place-content: center;
@@ -69,14 +69,13 @@
     min-width: 60px;
   }
 
-  .tb-font-field {
-    width: 40px;
-    min-width: 40px;
-  }
-
-  .tb-color-field {
+  .tb-font-field, .tb-color-field, .tb-arrow-field {
     width: 40px;
     min-width: 40px;
+    display: none;
+    @media #{$mat-gt-xs} {
+      display: block;
+    }
   }
 
   .tb-units-field, .tb-decimals-field {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
index 411a6a03b6..3048179241 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
@@ -33,7 +33,7 @@ import {
   ComparisonResultType,
   DataKey,
   DataKeyConfigMode,
-  DatasourceType, Widget,
+  DatasourceType, JsonSettingsSchema, Widget,
   widgetType
 } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -104,6 +104,14 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
     return this.widgetConfigComponent.widget;
   }
 
+  get latestDataKeySettingsSchema(): JsonSettingsSchema {
+    return this.widgetConfigComponent.modelValue?.latestDataKeySettingsSchema;
+  }
+
+  get latestDataKeySettingsDirective(): string {
+    return this.widgetConfigComponent.modelValue?.latestDataKeySettingsDirective;
+  }
+
   get isEntityDatasource(): boolean {
     return [DatasourceType.device, DatasourceType.entity].includes(this.datasourceType);
   }
@@ -124,7 +132,8 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
       units: [null, []],
       decimals: [null, []],
       font: [null, []],
-      color: [null, []]
+      color: [null, []],
+      showArrow: [null, []]
     });
     this.keyRowFormGroup.valueChanges.subscribe(
       () => this.updateModel()
@@ -172,7 +181,8 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
         units: value?.units,
         decimals: value?.decimals,
         font: settings.font,
-        color: settings.color
+        color: settings.color,
+        showArrow: settings.showArrow
       }, {emitEvent: false}
     );
     this.cd.markForCheck();
@@ -190,8 +200,8 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
         data: {
           dataKey: deepClone(this.modelValue),
           dataKeyConfigMode: DataKeyConfigMode.general,
-          dataKeySettingsSchema: null,
-          dataKeySettingsDirective: null,
+          dataKeySettingsSchema: this.latestDataKeySettingsSchema,
+          dataKeySettingsDirective: this.latestDataKeySettingsDirective,
           dashboard: null,
           aliasController: null,
           widget: this.widget,
@@ -207,6 +217,11 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
       }).afterClosed().subscribe((updatedDataKey) => {
       if (updatedDataKey) {
         this.modelValue = updatedDataKey;
+        const settings: AggregatedValueCardKeySettings = (this.modelValue.settings || {});
+        this.keyRowFormGroup.get('position').patchValue(settings.position, {emitEvent: false});
+        this.keyRowFormGroup.get('font').patchValue(settings.font, {emitEvent: false});
+        this.keyRowFormGroup.get('color').patchValue(settings.color, {emitEvent: false});
+        this.keyRowFormGroup.get('showArrow').patchValue(settings.showArrow, {emitEvent: false});
         this.keyRowFormGroup.get('units').patchValue(this.modelValue.units, {emitEvent: false});
         this.keyRowFormGroup.get('decimals').patchValue(this.modelValue.decimals, {emitEvent: false});
         this.updateModel();
@@ -220,6 +235,7 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
     this.modelValue.settings.position = value.position;
     this.modelValue.settings.font = value.font;
     this.modelValue.settings.color = value.color;
+    this.modelValue.settings.showArrow = value.showArrow;
     this.modelValue.units = value.units;
     this.modelValue.decimals = value.decimals;
     this.propagateChange(this.modelValue);
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index 5ffbc2a018..e507334aac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -25,6 +25,7 @@
       <div class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
       <div class="tb-form-table-header-cell tb-font-header" translate>widgets.aggregated-value-card.font</div>
       <div class="tb-form-table-header-cell tb-color-header" translate>widgets.aggregated-value-card.color</div>
+      <div class="tb-form-table-header-cell tb-arrow-header" translate>widgets.aggregated-value-card.arrow</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
     <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss
index 9280b98ff6..6ce4e5b9b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss
@@ -25,7 +25,7 @@
 
     &.tb-aggregation-header {
       flex: 1;
-      min-width: 150px;
+      min-width: 120px;
     }
 
     &.tb-units-header {
@@ -38,14 +38,13 @@
       min-width: 60px;
     }
 
-    &.tb-font-header {
-      width: 40px;
-      min-width: 40px;
-    }
-
-    &.tb-color-header {
+    &.tb-font-header, &.tb-color-header, &.tb-arrow-header {
       width: 40px;
       min-width: 40px;
+      display: none;
+      @media #{$mat-gt-xs} {
+        display: block;
+      }
     }
 
     &.tb-actions-header {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 4c2742173b..8f0b79cca6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -29,7 +29,7 @@
   </tb-datasources>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
@@ -48,7 +48,7 @@
         </tb-color-input>
       </div>
     </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
@@ -68,7 +68,7 @@
         </tb-color-input>
       </div>
     </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
@@ -80,8 +80,10 @@
                           clearButton
                           [previewText]="aggregatedValueCardWidgetConfigForm.get('subtitle').value">
         </tb-font-settings>
-        <tb-color-settings formControlName="subtitleColor">
-        </tb-color-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="subtitleColor">
+        </tb-color-input>
       </div>
     </div>
     <div class="tb-form-row column-xs">
@@ -93,16 +95,27 @@
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
-        <tb-color-settings formControlName="dateColor">
-        </tb-color-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="dateColor">
+        </tb-color-input>
       </div>
     </div>
-    <div class="tb-form-row space-between">
-      <mat-slide-toggle class="mat-slide" formControlName="showChart">
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChart">
         {{ 'widgets.aggregated-value-card.chart' | translate }}
       </mat-slide-toggle>
-      <tb-color-settings formControlName="chartColor">
-      </tb-color-settings>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-unit-input class="flex" formControlName="chartUnits"></tb-unit-input>
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput formControlName="chartDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="chartColor">
+        </tb-color-input>
+      </div>
     </div>
   </div>
   <tb-aggregated-data-keys-panel
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
index 2770539245..f8e69c9d7a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
@@ -90,7 +90,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
   protected setupDefaults(configData: WidgetConfigComponentData) {
     this.setupDefaultDatasource(configData, [
-        { name: 'watermeter', label: 'Watermeter', type: DataKeyType.timeseries }
+        { name: 'watermeter', label: 'Watermeter', type: DataKeyType.timeseries, color: 'rgba(0, 0, 0, 0.87)', units: 'm³', decimals: 0 }
       ],
       createDefaultAggregatedValueLatestDataKeys('watermeter', 'm³')
     );
@@ -141,7 +141,9 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
       dateColor: [settings.dateColor, []],
 
       showChart: [settings.showChart, []],
-      chartColor: [settings.chartColor, []],
+      chartUnits: [dataKey?.units, []],
+      chartDecimals: [dataKey?.decimals, []],
+      chartColor: [dataKey?.color, []],
 
       values: [this.getValues(configData.config.datasources, keyName), []],
 
@@ -181,7 +183,13 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
     this.widgetConfig.config.settings.dateColor = config.dateColor;
 
     this.widgetConfig.config.settings.showChart = config.showChart;
-    this.widgetConfig.config.settings.chartColor = config.chartColor;
+
+    const dataKey = getDataKey(this.widgetConfig.config.datasources);
+    if (dataKey) {
+      dataKey.units = config.chartUnits;
+      dataKey.decimals = config.chartDecimals;
+      dataKey.color = config.chartColor;
+    }
 
     this.setValues(config.values, this.widgetConfig.config.datasources);
 
@@ -253,8 +261,12 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
     }
 
     if (showChart) {
+      this.aggregatedValueCardWidgetConfigForm.get('chartUnits').enable();
+      this.aggregatedValueCardWidgetConfigForm.get('chartDecimals').enable();
       this.aggregatedValueCardWidgetConfigForm.get('chartColor').enable();
     } else {
+      this.aggregatedValueCardWidgetConfigForm.get('chartUnits').disable();
+      this.aggregatedValueCardWidgetConfigForm.get('chartDecimals').disable();
       this.aggregatedValueCardWidgetConfigForm.get('chartColor').disable();
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
index e265ea01d3..971164f767 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
@@ -78,76 +78,87 @@
         </tb-js-func>
       </section>
       <ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries">
-        <mat-form-field subscriptSizing="dynamic">
-          <mat-label translate>datakey.aggregation</mat-label>
-          <mat-select formControlName="aggregationType" style="min-width: 150px;">
-            <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-              {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <div class="tb-hint after-fields">
-          {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
-          <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
-            {{ 'datakey.aggregation-type-hint-common' | translate }}
-          </section>
+        <div class="tb-form-row column">
+          <div class="tb-form-row space-between no-border no-padding">
+            <div>{{ 'datakey.aggregation' | translate }}</div>
+            <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
+              <mat-select formControlName="aggregationType">
+                <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
+                  {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div class="tb-form-hint tb-primary-fill">
+            {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
+            <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
+              {{ 'datakey.aggregation-type-hint-common' | translate }}
+            </section>
+          </div>
         </div>
       </ng-container>
     </div>
     <div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"
-         class="tb-form-panel tb-slide-toggle">
+         class="tb-form-panel">
       <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
-      <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
+      <div class="tb-form-panel stroked tb-slide-toggle">
+        <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
         <mat-expansion-panel-header fxLayout="row wrap">
-          <mat-panel-title fxLayout="column" fxLayoutAlign="center start">
+          <mat-panel-title fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="8px">
             <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
               {{ 'datakey.enable-delta-calculation' | translate }}
             </mat-slide-toggle>
-            <mat-hint class="tb-hint" style="line-height: 15px; padding-left: 52px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
+            <mat-hint class="tb-form-hint tb-primary-fill">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value">
-            <mat-form-field fxFlex class="mat-block">
-              <mat-label translate>widgets.chart.time-for-comparison</mat-label>
-              <mat-select formControlName="timeForComparison">
-                <mat-option [value]="'previousInterval'">
-                  {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
-                </mat-option>
-                <mat-option [value]="'days'">
-                  {{ 'widgets.chart.time-for-comparison-days' | translate }}
-                </mat-option>
-                <mat-option [value]="'weeks'">
-                  {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
-                </mat-option>
-                <mat-option [value]="'months'">
-                  {{ 'widgets.chart.time-for-comparison-months' | translate }}
-                </mat-option>
-                <mat-option [value]="'years'">
-                  {{ 'widgets.chart.time-for-comparison-years' | translate }}
-                </mat-option>
-                <mat-option [value]="'customInterval'">
-                  {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block">
-              <mat-label translate>widgets.chart.custom-interval-value</mat-label>
-              <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
-            </mat-form-field>
-            <mat-form-field style="padding-bottom: 16px;">
-              <mat-label translate>datakey.delta-calculation-result</mat-label>
-              <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
-                <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
-                  {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </section>
+          <ng-container *ngIf="dataKeyFormGroup.get('comparisonEnabled').value">
+            <div class="tb-form-row space-between">
+              <div>{{ 'widgets.chart.time-for-comparison' | translate }}</div>
+              <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
+                <mat-select formControlName="timeForComparison">
+                  <mat-option [value]="'previousInterval'">
+                    {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'days'">
+                    {{ 'widgets.chart.time-for-comparison-days' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'weeks'">
+                    {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'months'">
+                    {{ 'widgets.chart.time-for-comparison-months' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'years'">
+                    {{ 'widgets.chart.time-for-comparison-years' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'customInterval'">
+                    {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between">
+              <div>{{ 'widgets.chart.custom-interval-value' | translate }}</div>
+              <mat-form-field class="medium-width number" subscriptSizing="dynamic" appearance="outline">
+                <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
+              </mat-form-field>
+            </div>
+            <div class="tb-form-row space-between">
+              <div>{{ 'datakey.delta-calculation-result' | translate }}</div>
+              <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
+                <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
+                  <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
+                    {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </ng-container>
         </ng-template>
       </mat-expansion-panel>
+      </div>
     </div>
-
     <div class="tb-form-panel tb-slide-toggle"
          *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing">
       <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
index a42020611d..a173debf8c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../../../theme";
+@import "../../../../../../scss/constants";
 
 .tb-datasource-list-item {
   &.mat-mdc-list-item {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
index b20431fa64..edd0cda3b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
@@ -28,7 +28,7 @@
 
 <ng-template #subtitleTpl>
   <div *ngIf="showSubtitle" class="tb-aggregated-value-card-subtitle"
-       [style]="subtitleStyle" [style.color]="subtitleColor.color">{{ subtitle$ | async }}</div>
+       [style]="subtitleStyle" [style.color]="subtitleColor">{{ subtitle$ | async }}</div>
 </ng-template>
 <ng-template #valuesTpl>
   <div *ngIf="showValues" class="tb-aggregated-value-card-values">
@@ -73,7 +73,7 @@
   </div>
 </ng-template>
 <ng-template #dateTpl>
-  <div *ngIf="showDate" [style]="dateStyle" [style.color]="dateColor.color" [innerHTML]="dateFormat.formatted"></div>
+  <div *ngIf="showDate" [style]="dateStyle" [style.color]="dateColor" [innerHTML]="dateFormat.formatted"></div>
 </ng-template>
 <ng-template #valueTpl let-value="value">
   <div class="tb-aggregated-value-card-value" [style]="value.style" [style.color]="value.color.color">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
index fca9f31084..991dbe80f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
@@ -36,9 +36,9 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { Observable } from 'rxjs';
 import {
   backgroundStyle,
-  ColorProcessor,
   ComponentStyle,
-  DateFormatProcessor, getDataKey,
+  DateFormatProcessor,
+  getDataKey,
   getLatestSingleTsValue,
   overlayStyle,
   textStyle
@@ -47,7 +47,7 @@ import { DatePipe } from '@angular/common';
 import { TbFlot } from '@home/components/widget/lib/flot-widget';
 import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
 import { DataKey } from '@shared/models/widget.models';
-import { formatNumberValue, formatValue, isDefined, isNumeric } from '@core/utils';
+import { formatNumberValue, formatValue, isDefined } from '@core/utils';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -72,19 +72,18 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
   showSubtitle = true;
   subtitle$: Observable<string>;
   subtitleStyle: ComponentStyle = {};
-  subtitleColor: ColorProcessor;
+  subtitleColor: string;
 
   showValues = false;
 
   values: {[key: string]: AggregatedValueCardValue} = {};
 
   showChart = true;
-  chartColor: ColorProcessor;
 
   showDate = true;
   dateFormat: DateFormatProcessor;
   dateStyle: ComponentStyle = {};
-  dateColor: ColorProcessor;
+  dateColor: string;
 
   backgroundStyle: ComponentStyle = {};
   overlayStyle: ComponentStyle = {};
@@ -108,7 +107,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
     const subtitle = this.settings.subtitle;
     this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$);
     this.subtitleStyle = textStyle(this.settings.subtitleFont, '0.25px');
-    this.subtitleColor =  ColorProcessor.fromSettings(this.settings.subtitleColor);
+    this.subtitleColor =  this.settings.subtitleColor;
 
     const dataKey = getDataKey(this.ctx.defaultSubscription.datasources);
     if (dataKey?.name && this.ctx.defaultSubscription.firstDatasource?.latestDataKeys?.length) {
@@ -123,7 +122,6 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
     }
 
     this.showChart = this.settings.showChart;
-    this.chartColor = ColorProcessor.fromSettings(this.settings.chartColor);
     if (this.showChart) {
       if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {
         this.flotDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
@@ -132,14 +130,13 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
           showLines: true,
           lineWidth: 2
         } as TbFlotKeySettings;
-        this.flotDataKey.color = this.chartColor.color;
       }
     }
 
     this.showDate = this.settings.showDate;
     this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat);
     this.dateStyle = textStyle(this.settings.dateFont,  '0.25px');
-    this.dateColor = ColorProcessor.fromSettings(this.settings.dateColor);
+    this.dateColor = this.settings.dateColor;
 
     this.backgroundStyle = backgroundStyle(this.settings.background);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
@@ -188,17 +185,11 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
   public onDataUpdated() {
     const tsValue = getLatestSingleTsValue(this.ctx.data);
     let ts;
-    let value;
     if (tsValue) {
       ts = tsValue[0];
-      value = tsValue[1];
     }
-    this.subtitleColor.update(value);
-    this.dateColor.update(value);
 
     if (this.showChart) {
-      this.chartColor.update(value);
-      this.flot.updateSeriesColor(this.chartColor.color);
       this.flot.update();
     }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
index 273ca1edaa..c1e4fafeff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
@@ -24,7 +24,6 @@ import {
   constantColor,
   DateFormatSettings,
   Font,
-  iconStyle,
   lastUpdateAgoDateFormat,
   textStyle
 } from '@shared/models/widget-settings.models';
@@ -36,13 +35,12 @@ export interface AggregatedValueCardWidgetSettings {
   showSubtitle: boolean;
   subtitle: string;
   subtitleFont: Font;
-  subtitleColor: ColorSettings;
+  subtitleColor: string;
   showDate: boolean;
   dateFormat: DateFormatSettings;
   dateFont: Font;
-  dateColor: ColorSettings;
+  dateColor: string;
   showChart: boolean;
-  chartColor: ColorSettings;
   background: BackgroundSettings;
 }
 
@@ -83,7 +81,8 @@ export interface AggregatedValueCardValue {
   downArrow: boolean;
 }
 
-export const computeAggregatedCardValue = (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => {
+export const computeAggregatedCardValue =
+  (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => {
   const key = dataKeys.find(dataKey => ( dataKey.name === keyName && (dataKey.settings?.position === position ||
                                          (!dataKey.settings?.position && position === AggregatedValueCardKeyPosition.center)) ));
   if (key) {
@@ -123,7 +122,7 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin
     weight: '400',
     lineHeight: '16px'
   },
-  subtitleColor: constantColor('rgba(0, 0, 0, 0.38)'),
+  subtitleColor: 'rgba(0, 0, 0, 0.38)',
   showDate: true,
   dateFormat: lastUpdateAgoDateFormat(),
   dateFont: {
@@ -134,9 +133,8 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin
     weight: '400',
     lineHeight: '16px'
   },
-  dateColor: constantColor('rgba(0, 0, 0, 0.38)'),
+  dateColor: 'rgba(0, 0, 0, 0.38)',
   showChart: true,
-  chartColor: constantColor('rgba(0, 0, 0, 0.87)'),
   background: {
     type: BackgroundType.color,
     color: '#fff',
@@ -164,7 +162,7 @@ export const aggregatedValueCardDefaultKeySettings: AggregatedValueCardKeySettin
 
 export const createDefaultAggregatedValueLatestDataKeys = (keyName: string, units): DataKey[] => [
     {
-      name: keyName, label: keyName, type: DataKeyType.timeseries, units, decimals: 0,
+      name: keyName, label: 'Latest', type: DataKeyType.timeseries, units, decimals: 0,
       aggregationType: AggregationType.NONE,
       settings: {
         position: AggregatedValueCardKeyPosition.center,
@@ -181,7 +179,7 @@ export const createDefaultAggregatedValueLatestDataKeys = (keyName: string, unit
       } as AggregatedValueCardKeySettings
     },
     {
-      name: keyName, label: 'Delta percent ' + keyName, type: DataKeyType.timeseries, units: '%', decimals: 0,
+      name: keyName, label: 'Delta percent', type: DataKeyType.timeseries, units: '%', decimals: 0,
       aggregationType: AggregationType.AVG,
       comparisonEnabled: true,
       timeForComparison: 'previousInterval',
@@ -210,7 +208,7 @@ export const createDefaultAggregatedValueLatestDataKeys = (keyName: string, unit
       } as AggregatedValueCardKeySettings
     },
     {
-      name: keyName, label: 'Delta absolute ' + keyName, type: DataKeyType.timeseries, units, decimals: 1,
+      name: keyName, label: 'Delta absolute', type: DataKeyType.timeseries, units, decimals: 1,
       aggregationType: AggregationType.AVG,
       comparisonEnabled: true,
       timeForComparison: 'previousInterval',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
new file mode 100644
index 0000000000..c4af456487
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -0,0 +1,65 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<ng-container [formGroup]="aggregatedValueCardWidgetSettingsForm">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.aggregated-value-card.aggregated-value-card-style</div>
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
+        {{ 'widgets.aggregated-value-card.subtitle' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="subtitleFont"
+                          clearButton
+                          [previewText]="aggregatedValueCardWidgetSettingsForm.get('subtitle').value">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="subtitleColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
+        {{ 'widgets.value-card.date' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+        <tb-font-settings formControlName="dateFont"
+                          [previewText]="datePreviewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="dateColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="showChart">
+        {{ 'widgets.aggregated-value-card.chart' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widgets.background.background' | translate }}</div>
+      <tb-background-settings formControlName="background">
+      </tb-background-settings>
+    </div>
+  </div>
+</ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
new file mode 100644
index 0000000000..bb2fda0b50
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
@@ -0,0 +1,111 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Injector } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models';
+import { aggregatedValueCardDefaultSettings } from '@home/components/widget/lib/cards/aggregated-value-card.models';
+
+@Component({
+  selector: 'tb-aggregated-value-card-widget-settings',
+  templateUrl: './aggregated-value-card-widget-settings.component.html',
+  styleUrls: []
+})
+export class AggregatedValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  aggregatedValueCardWidgetSettingsForm: UntypedFormGroup;
+
+  datePreviewFn = this._datePreviewFn.bind(this);
+
+  constructor(protected store: Store<AppState>,
+              private $injector: Injector,
+              private fb: UntypedFormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): UntypedFormGroup {
+    return this.aggregatedValueCardWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {...aggregatedValueCardDefaultSettings};
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.aggregatedValueCardWidgetSettingsForm = this.fb.group({
+
+      showSubtitle: [settings.showSubtitle, []],
+      subtitle: [settings.subtitle, []],
+      subtitleFont: [settings.subtitleFont, []],
+      subtitleColor: [settings.subtitleColor, []],
+
+      showDate: [settings.showDate, []],
+      dateFormat: [settings.dateFormat, []],
+      dateFont: [settings.dateFont, []],
+      dateColor: [settings.dateColor, []],
+
+      showChart: [settings.showChart, []],
+
+      background: [settings.background, []]
+    });
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showSubtitle', 'showDate'];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const showSubtitle: boolean = this.aggregatedValueCardWidgetSettingsForm.get('showSubtitle').value;
+    const showDate: boolean = this.aggregatedValueCardWidgetSettingsForm.get('showDate').value;
+
+    if (showSubtitle) {
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitle').enable();
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitleFont').enable();
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitleColor').enable();
+    } else {
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitle').disable();
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitleFont').disable();
+      this.aggregatedValueCardWidgetSettingsForm.get('subtitleColor').disable();
+    }
+
+    if (showDate) {
+      this.aggregatedValueCardWidgetSettingsForm.get('dateFormat').enable();
+      this.aggregatedValueCardWidgetSettingsForm.get('dateFont').enable();
+      this.aggregatedValueCardWidgetSettingsForm.get('dateColor').enable();
+    } else {
+      this.aggregatedValueCardWidgetSettingsForm.get('dateFormat').disable();
+      this.aggregatedValueCardWidgetSettingsForm.get('dateFont').disable();
+      this.aggregatedValueCardWidgetSettingsForm.get('dateColor').disable();
+    }
+
+    this.aggregatedValueCardWidgetSettingsForm.get('subtitle').updateValueAndValidity({emitEvent});
+    this.aggregatedValueCardWidgetSettingsForm.get('subtitleFont').updateValueAndValidity({emitEvent});
+    this.aggregatedValueCardWidgetSettingsForm.get('subtitleColor').updateValueAndValidity({emitEvent});
+    this.aggregatedValueCardWidgetSettingsForm.get('dateFormat').updateValueAndValidity({emitEvent});
+    this.aggregatedValueCardWidgetSettingsForm.get('dateFont').updateValueAndValidity({emitEvent});
+    this.aggregatedValueCardWidgetSettingsForm.get('dateColor').updateValueAndValidity({emitEvent});
+  }
+
+  private _datePreviewFn(): string {
+    const dateFormat: DateFormatSettings = this.aggregatedValueCardWidgetSettingsForm.get('dateFormat').value;
+    const processor = DateFormatProcessor.fromSettings(this.$injector, dateFormat);
+    processor.update(Date.now());
+    return processor.formatted;
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
index 0f467ba917..34b4712a6f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
@@ -270,6 +270,9 @@ import { WidgetSettingsCommonModule } from '@home/components/widget/lib/settings
 import {
   AggregatedValueCardKeySettingsComponent
 } from '@home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component';
+import {
+  AggregatedValueCardWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -370,7 +373,8 @@ import {
     DocLinksWidgetSettingsComponent,
     QuickLinksWidgetSettingsComponent,
     ValueCardWidgetSettingsComponent,
-    AggregatedValueCardKeySettingsComponent
+    AggregatedValueCardKeySettingsComponent,
+    AggregatedValueCardWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -476,7 +480,8 @@ import {
     DocLinksWidgetSettingsComponent,
     QuickLinksWidgetSettingsComponent,
     ValueCardWidgetSettingsComponent,
-    AggregatedValueCardKeySettingsComponent
+    AggregatedValueCardKeySettingsComponent,
+    AggregatedValueCardWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -548,4 +553,5 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-quick-links-widget-settings': QuickLinksWidgetSettingsComponent,
   'tb-value-card-widget-settings': ValueCardWidgetSettingsComponent,
   'tb-aggregated-value-card-key-settings': AggregatedValueCardKeySettingsComponent,
+  'tb-aggregated-value-card-widget-settings': AggregatedValueCardWidgetSettingsComponent
 };
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
index cd6c18af9e..e8da0e042a 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../../theme";
+@import "../../../../../scss/constants";
 
 :host {
   .fields-group {
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 097902d087..084faebefc 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -103,9 +103,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     this.config.deleteEntitiesContent = () => this.translate.instant('dashboard.delete-dashboards-text');
 
     this.config.loadEntity = id => this.dashboardService.getDashboard(id.id);
-    this.config.saveEntity = dashboard => {
-      return this.dashboardService.saveDashboard(dashboard as Dashboard);
-    };
+    this.config.saveEntity = dashboard => this.dashboardService.saveDashboard(dashboard as Dashboard);
     this.config.onEntityAction = action => this.onDashboardAction(action);
     this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
       this.config.componentsData.dashboardScope === 'edge_customer_user');
@@ -118,6 +116,10 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
       }
       return true;
     };
+
+    this.config.entityAdded = dashboard => {
+      this.openDashboard(null, dashboard);
+    };
   }
 
   resolve(route: ActivatedRouteSnapshot): Observable<EntityTableConfig<DashboardInfo | Dashboard>> {
@@ -178,13 +180,9 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     if (dashboardScope === 'tenant') {
       columns.push(
         new EntityTableColumn<DashboardInfo>('customersTitle', 'dashboard.assignedToCustomers',
-          '50%', entity => {
-            return getDashboardAssignedCustomersText(entity);
-          }, () => ({}), false),
+          '50%', entity => getDashboardAssignedCustomersText(entity), () => ({}), false),
         new EntityTableColumn<DashboardInfo>('dashboardIsPublic', 'dashboard.public', '60px',
-          entity => {
-            return checkBoxCell(isPublicDashboard(entity));
-          }, () => ({}), false),
+          entity => checkBoxCell(isPublicDashboard(entity)), () => ({}), false),
       );
     }
     return columns;
@@ -269,7 +267,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
         {
           name: this.translate.instant('edge.unassign-from-edge'),
           icon: 'assignment_return',
-          isEnabled: (entity) => true,
+          isEnabled: () => true,
           onAction: ($event, entity) => this.unassignFromEdge($event, entity)
         }
       );
@@ -383,7 +381,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     }
   }
 
-  importDashboard($event: Event) {
+  importDashboard(_$event: Event) {
     this.importExport.importDashboard().subscribe(
       (dashboard) => {
         if (dashboard) {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
index 01519235aa..628a964d4d 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../../../theme";
+@import "../../../../../../scss/constants";
 
 :host ::ng-deep {
   .mat-button-toggle-group.tb-notification-unread-toggle-group {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
index 8406cae3fe..8dfc5db5d5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 @import "../../../../../../scss/constants";
-@import "../../../../../../theme";
 
 :host {
   form.tb-dialog-container {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
index 7e582d2b7d..8aae1a038f 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../../../theme";
 @import "../../../../../../scss/constants";
 
 :host {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 0702d6bf52..6459ac3b64 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 @import "../../../../../../scss/constants";
-@import "../../../../../../theme";
 
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
   width: 820px;
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index 0818466a38..e26f6978cb 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../theme";
+@import "../../../../scss/constants";
 
 :host {
   .mini-button {
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
index 47a745819d..5990caa6ed 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
@@ -18,6 +18,7 @@ import { Component, forwardRef, OnDestroy } from '@angular/core';
 import { Color, ColorPickerControl } from '@iplab/ngx-color-picker';
 import { Subscription } from 'rxjs';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
+import { isString } from '@core/utils';
 
 export enum ColorType {
   hex = 'hex',
@@ -87,8 +88,9 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy {
   }
 
   writeValue(value: string): void {
-    this.setValue = !!value;
-    this.control.setValueFrom(value || '#fff');
+    const valid = this.isValidColorValue(value);
+    this.setValue = valid;
+    this.control.setValueFrom(valid ? value : '#fff');
     this.modelValue = value;
 
     if (this.control.initType === ColorType.hexa) {
@@ -101,6 +103,10 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy {
     this.presentationControl.patchValue(this.presentations.indexOf(this.control.initType), {emitEvent: false});
   }
 
+  private isValidColorValue(value: string): boolean {
+    return value && isString(value) && value.trim().length > 0;
+  }
+
   private updateModel() {
     const color: string = this.getValueByType(this.control.value, this.presentations[this.presentationControl.value]);
     if (this.modelValue !== color) {
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html
index 79476572f6..bbc50a9292 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.html
+++ b/ui-ngx/src/app/shared/components/material-icons.component.html
@@ -53,22 +53,24 @@
       </ng-container>
     </div>
   </cdk-virtual-scroll-viewport>
-  <button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
-    {{ 'action.show-more' | translate }}
-  </button>
   <ng-container *ngIf="notFound">
     <div class="tb-no-data-available" [ngStyle]="{width: iconsPanelWidth}">
       <div class="tb-no-data-bg"></div>
       <div class="tb-no-data-text">{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}</div>
     </div>
   </ng-container>
-  <div *ngIf="iconClearButton" class="tb-material-icons-panel-buttons">
-    <button mat-button
+  <div class="tb-material-icons-panel-buttons" *ngIf="iconClearButton || !showAllSubject.value">
+    <button *ngIf="iconClearButton"
+            mat-button
             color="primary"
             type="button"
             (click)="clearIcon()"
             [disabled]="!selectedIcon">
       {{ 'action.clear' | translate }}
     </button>
+    <span fxFlex></span>
+    <button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
+      {{ 'action.show-more' | translate }}
+    </button>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.scss b/ui-ngx/src/app/shared/components/material-icons.component.scss
index 8cf84e0687..b9c7a74c9a 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.scss
+++ b/ui-ngx/src/app/shared/components/material-icons.component.scss
@@ -26,7 +26,7 @@
     letter-spacing: 0.25px;
     color: rgba(0, 0, 0, 0.87);
   }
-  .tb-material-icons-title, .tb-material-icons-search, .tb-material-icons-show-more {
+  .tb-material-icons-title, .tb-material-icons-search {
     width: 100%;
   }
   .tb-material-icons-viewport {
@@ -64,6 +64,6 @@
     flex-direction: row;
     gap: 16px;
     align-items: flex-start;
-    align-self: flex-start;
+    align-self: stretch;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index ac24f7bf29..7091c68c93 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-@import "../../../theme";
 @import "../../../scss/constants";
 
 :host {
diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts
index fb15622754..4bba815a37 100644
--- a/ui-ngx/src/app/shared/models/widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts
@@ -149,7 +149,7 @@ type ValueColorFunction = (value: any) => string;
 export abstract class ColorProcessor {
 
   static fromSettings(color: ColorSettings): ColorProcessor {
-    const settings = color || constantColor('rgba(0, 0, 0, 0.87)');
+    const settings = color || constantColor(null);
     switch (settings.type) {
       case ColorType.constant:
         return new ConstantColorProcessor(settings);
@@ -192,7 +192,7 @@ class RangeColorProcessor extends ColorProcessor {
     if (this.settings.rangeList?.length && isDefinedAndNotNull(value) && isNumeric(value)) {
       const num = Number(value);
       for (const range of this.settings.rangeList) {
-        if (this.constantRange(range) && range.from === num) {
+        if (RangeColorProcessor.constantRange(range) && range.from === num) {
           return range.color;
         } else if ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)) {
           return range.color;
@@ -202,7 +202,7 @@ class RangeColorProcessor extends ColorProcessor {
     return this.settings.color;
   }
 
-  private constantRange(range: ColorRange): boolean {
+  private static constantRange(range: ColorRange): boolean {
     return isNumber(range.from) && isNumber(range.to) && range.from === range.to;
   }
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 8f2f338800..7f601189a0 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5769,11 +5769,13 @@
             "position-left-bottom": "Left bottom",
             "font": "Font",
             "color": "Color",
+            "arrow": "Arrow",
             "display-up-down-arrow": "Display Up/Down arrow",
             "add-value": "Add value",
             "remove-value": "Remove value",
             "no-values": "No values configured",
-            "aggregation": "Aggregation"
+            "aggregation": "Aggregation",
+            "aggregated-value-card-style": "Aggregated value card style"
         },
         "table": {
             "common-table-settings": "Common Table Settings",
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index c5115add1b..141a8db6ea 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -16,12 +16,16 @@
 
 @import './scss/constants';
 
-@mixin form-row-column($breakpoint) {
+@mixin form-row-column() {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  padding: 12px 7px 12px 16px;
+}
+
+@mixin form-row-column-breakpoint($breakpoint) {
   @media #{$breakpoint} {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-    padding: 12px 7px 12px 16px;
+    @include form-row-column;
     .mat-mdc-form-field, tb-unit-input {
       width: auto;
       &.medium-width {
@@ -132,6 +136,16 @@
     font-size: 12px;
     color: #808080;
   }
+  .tb-form-hint {
+    padding: 12px 16px;
+    font-size: var(--mdc-typography-caption-font-size, 12px);
+    line-height: var(--mdc-typography-caption-line-height, 20px);
+    font-weight: var(--mdc-typography-caption-font-weight, 400);
+    letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+    color: rgba(0, 0, 0, 0.6);
+    white-space: normal;
+    border-radius: 6px;
+  }
   .tb-form-row {
     height: 100%;
     display: flex;
@@ -142,11 +156,12 @@
     border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 6px;
     &.column {
+      @include form-row-column;
       &-xs {
-        @include form-row-column($mat-xs)
+        @include form-row-column-breakpoint($mat-xs)
       }
       &-lt-md {
-        @include form-row-column($mat-lt-md)
+        @include form-row-column-breakpoint($mat-lt-md)
       }
     }
     &.no-border {
@@ -450,7 +465,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: #305680;
+      background: $tb-primary-color;
       mask-image: url(/assets/home/no_data_folder_bg.svg);
       mask-repeat: no-repeat;
       mask-size: contain;
@@ -470,6 +485,23 @@
     }
   }
 
+  .tb-primary-fill {
+    position: relative;
+    overflow: hidden;
+    &:before {
+      display: block;
+      height: auto;
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: $tb-primary-color;
+      opacity: 0.04;
+    }
+  }
+
   button.mat-mdc-button-base.tb-box-button, .tb-form-table-row-cell-buttons button.mat-mdc-icon-button.mat-mdc-button-base {
     width: 40px;
     min-width: 40px;
diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss
index f19480ecef..9b410612a7 100644
--- a/ui-ngx/src/scss/constants.scss
+++ b/ui-ngx/src/scss/constants.scss
@@ -30,3 +30,10 @@ $mat-gt-xl: "screen and (min-width: 1920px)";
 $mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)";
 
 $primary-hue-3: rgb(207, 216, 220) !default;
+
+$tb-primary-color: #305680;
+$tb-secondary-color: #527dad;
+$tb-hue3-color: #a7c1de;
+
+$tb-dark-primary-color: #9fa8da;
+
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index df1b2bca3e..a8a3943660 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -21,12 +21,6 @@
 @include mat.all-component-typographies();
 @include mat.core();
 
-$tb-primary-color: #305680;
-$tb-secondary-color: #527dad;
-$tb-hue3-color: #a7c1de;
-
-$tb-dark-primary-color: #9fa8da;
-
 $tb-mat-indigo: (
   50: #e8eaf6,
   100: #c5cae9,