diff --git a/examples/energy-monitor/ui/mobile_main.slint b/examples/energy-monitor/ui/mobile_main.slint
index d5ada095cac..c09f40a7978 100644
--- a/examples/energy-monitor/ui/mobile_main.slint
+++ b/examples/energy-monitor/ui/mobile_main.slint
@@ -7,10 +7,11 @@ import { Balance, Overview, Usage, UsageAdapter, Weather, MenuPage, MenuOverview
 import { Images } from "images.slint";
 
 import { TabWidget, TabItem } from "widgets/widgets.slint";
-import { DashboardMobile, Weather } from "pages/pages.slint";
+import { DashboardMobile, Weather, About } from "pages/pages.slint";
 import { MobileHeader } from "blocks/blocks.slint";
 import { MenuBackground } from "components/menu_background.slint";
 
+
 export component MobileMain {
     tab-widget := TabWidget {
         y: header.height + 16px;
@@ -19,6 +20,7 @@ export component MobileMain {
         tabs: [
             { text: "Dashboard", icon: Images.dashboard },
             { text: "Weather", icon: Images.sunny },
+            { text: "About", icon: Images.information },
         ];
 
         DashboardMobile {
@@ -30,6 +32,11 @@ export component MobileMain {
             index: 1;
             current-index: tab-widget.selected-tab;
         }
+
+        About {
+            index: 2;
+            current-index: tab-widget.selected-tab;
+        }
     }
 
     menu := MobileMenu {
diff --git a/examples/energy-monitor/ui/pages/dashboard.slint b/examples/energy-monitor/ui/pages/dashboard.slint
index a8230ea7839..bdbcebb69a8 100644
--- a/examples/energy-monitor/ui/pages/dashboard.slint
+++ b/examples/energy-monitor/ui/pages/dashboard.slint
@@ -32,10 +32,14 @@ export component BarChartTile {
     in property <float> max <=> i-bar-chart.max;
     in property <bool> active;
 
+    height: i-group-box.min-height;
+
     i-group-box := GroupBox {
+        preferred-width: 100%;
+        min-height: 124px;
+
         i-value-display := ValueDisplay {
             width: 100%;
-            horizontal-stretch: 0;
             alternative-colors: true;
             active: root.active;
             vertical: true;
diff --git a/examples/energy-monitor/ui/pages/dashboard_mobile.slint b/examples/energy-monitor/ui/pages/dashboard_mobile.slint
index 0b43db84bd1..3a4d6bd7045 100644
--- a/examples/energy-monitor/ui/pages/dashboard_mobile.slint
+++ b/examples/energy-monitor/ui/pages/dashboard_mobile.slint
@@ -2,10 +2,12 @@
 // SPDX-License-Identifier: MIT
 
 import { Page } from "page.slint";
+import { Usage } from "usage.slint";
 import { OverviewAdapter } from "overview.slint";
 import { BalanceAdapter } from "balance.slint";
 import { UsageAdapter } from "usage.slint";
-import { ScrollView} from "../widgets/widgets.slint";
+import { UsageAdapter } from "usage.slint";
+import { ScrollView, GroupBox, BalanceChart, BarChart, ValueDisplay} from "../widgets/widgets.slint";
 import { ValueTile, BalanceTile, BarChartTile } from "dashboard.slint";
 
 export component DashboardMobile inherits Page {
@@ -27,13 +29,39 @@ export component DashboardMobile inherits Page {
                 active: root.active;
              }
 
-             BarChartTile {
+            GroupBox {
                 title: UsageAdapter.title;
-                model: UsageAdapter.model;
-                min: UsageAdapter.min;
-                max: UsageAdapter.max;
-                value-model: UsageAdapter.overview-model;
-                active: root.active;
+
+                VerticalLayout {
+                    ValueDisplay {
+                        model: UsageAdapter.overview-model;
+                        transparent-background: true;
+                        alternative-colors: true;
+                        active: root.active;
+                    }
+
+                    BarChart {
+                        model: UsageAdapter.model;
+                        min: UsageAdapter.min;
+                        max: UsageAdapter.max;
+                        active: root.active;
+                    }
+                }
+            }
+
+            GroupBox {
+                title: BalanceAdapter.title;
+
+                BalanceChart {
+                    x-axis-model: BalanceAdapter.x-axis-model;
+                    y-axis-model: BalanceAdapter.y-axis-model;
+                    model: BalanceAdapter.model;
+                    min: BalanceAdapter.min;
+                    max: BalanceAdapter.max;
+                    y-unit: BalanceAdapter.y-unit;
+                    active: root.active;
+                    min-height: 200px;
+                }
             }
         }
     }
diff --git a/examples/energy-monitor/ui/widgets/bar_chart.slint b/examples/energy-monitor/ui/widgets/bar_chart.slint
index d89c67b7035..85d90edb9b4 100644
--- a/examples/energy-monitor/ui/widgets/bar_chart.slint
+++ b/examples/energy-monitor/ui/widgets/bar_chart.slint
@@ -40,13 +40,14 @@ export component BarChart {
         count: model.length / 2;
     }
 
-    HorizontalLayout {
+    layout := HorizontalLayout {
         spacing: 1px;
 
         for value in model : Bar {
             private property <float> display-value;
 
-            height: 100%;
+            min-height: 120px;
+            preferred-height: 100%;
             bar-height: parent.height * (display-value - root.min) / (root.max - root.min);
 
             states [
diff --git a/examples/energy-monitor/ui/widgets/group_box.slint b/examples/energy-monitor/ui/widgets/group_box.slint
index 996f1f7e59b..cf69a0ff21e 100644
--- a/examples/energy-monitor/ui/widgets/group_box.slint
+++ b/examples/energy-monitor/ui/widgets/group_box.slint
@@ -7,10 +7,7 @@ export component GroupBox {
     in property <string> title <=> i-title.text;
     in property <length> spacing;
 
-    preferred-width: 100%;
-    preferred-height: 100%;
-
-    VerticalLayout {
+    layout := VerticalLayout {
         spacing: Theme.spaces.medium;
 
         i-title := Text {