diff --git a/module-gui/gui/widgets/CMakeLists.txt b/module-gui/gui/widgets/CMakeLists.txt
index 8b7381c06..315ce88c0 100644
--- a/module-gui/gui/widgets/CMakeLists.txt
+++ b/module-gui/gui/widgets/CMakeLists.txt
@@ -22,7 +22,9 @@ target_sources( ${PROJECT_NAME}
 		"${CMAKE_CURRENT_LIST_DIR}/BoxLayoutSizeStore.cpp"
 		"${CMAKE_CURRENT_LIST_DIR}/TopBar.cpp"
 		"${CMAKE_CURRENT_LIST_DIR}/TopBar/SIM.cpp"
-		"${CMAKE_CURRENT_LIST_DIR}/TopBar/BatteryWidget.cpp"
+		"${CMAKE_CURRENT_LIST_DIR}/TopBar/BatteryWidgetBase.cpp"
+		"${CMAKE_CURRENT_LIST_DIR}/TopBar/BatteryWidgetBar.cpp"
+		"${CMAKE_CURRENT_LIST_DIR}/TopBar/BatteryWidgetText.cpp"
 		"${CMAKE_CURRENT_LIST_DIR}/Text.cpp"
 		"${CMAKE_CURRENT_LIST_DIR}/TextBlock.cpp"
 		"${CMAKE_CURRENT_LIST_DIR}/TextDocument.cpp"
@@ -72,4 +74,3 @@ target_sources( ${PROJECT_NAME}
 		"${CMAKE_CURRENT_LIST_DIR}/visitor/ItemTree.hpp"
 		"${CMAKE_CURRENT_LIST_DIR}/visitor/DepthFirstItemTree.hpp"
 )
-
diff --git a/module-gui/gui/widgets/TopBar.cpp b/module-gui/gui/widgets/TopBar.cpp
index 6238e7f8e..6c978dfe3 100644
--- a/module-gui/gui/widgets/TopBar.cpp
+++ b/module-gui/gui/widgets/TopBar.cpp
@@ -8,11 +8,15 @@
 #include "TopBar.hpp"
 #include <time/time_conversion.hpp>
 #include "Style.hpp"
-
+#include "TopBar/BatteryWidgetBar.hpp"
+#include "TopBar/BatteryWidgetText.hpp"
 #include "common_data/EventStore.hpp"
 
 namespace gui::top_bar
 {
+    constexpr auto batteryWidgetAsText = false;
+    using BatteryWidgetType = std::conditional<batteryWidgetAsText, BatteryWidgetText, BatteryWidgetBar>::type;
+
     namespace networkTechnology
     {
         constexpr uint32_t x = 80;
@@ -24,8 +28,8 @@ namespace gui::top_bar
     static constexpr uint32_t signalOffset  = 35;
     static constexpr uint32_t batteryOffset = 413;
 
-    TopBar::TimeMode TopBar::timeMode      = TimeMode::TIME_24H;
-    uint32_t TopBar::time                  = 0;
+    TopBar::TimeMode TopBar::timeMode = TimeMode::TIME_24H;
+    uint32_t TopBar::time             = 0;
 
     void Configuration::enable(Indicator indicator)
     {
@@ -84,7 +88,7 @@ namespace gui::top_bar
         signal[5] = new gui::Image(this, signalOffset, 17, 0, 0, "signal5");
         updateSignalStrength();
 
-        batteryWidget = new BatteryWidget(this, batteryOffset, 15);
+        batteryWidget = new BatteryWidgetType(this, batteryOffset, 15, 60, 24);
 
         const auto design_sim_offset = 376; // this offset is not final, but it is pixel Purefect
         sim                          = new SIM(this, design_sim_offset, 12);
@@ -229,8 +233,8 @@ namespace gui::top_bar
     void TopBar::setTime(uint32_t value, bool mode24H)
     {
         setTime(utils::time::Time());
-        timeMode   = (mode24H ? TimeMode::TIME_24H : TimeMode::TIME_12H);
-        time       = value;
+        timeMode = (mode24H ? TimeMode::TIME_24H : TimeMode::TIME_12H);
+        time     = value;
     }
 
     UTF8 TopBar::getTimeString()
@@ -256,4 +260,4 @@ namespace gui::top_bar
     {
         visitor.visit(*this);
     }
-} /* namespace gui */
+} // namespace gui::top_bar
diff --git a/module-gui/gui/widgets/TopBar.hpp b/module-gui/gui/widgets/TopBar.hpp
index d23bcd45f..7cd08d77e 100644
--- a/module-gui/gui/widgets/TopBar.hpp
+++ b/module-gui/gui/widgets/TopBar.hpp
@@ -7,7 +7,7 @@
 #include "Label.hpp"
 #include "Rect.hpp"
 #include "TopBar/SIM.hpp"
-#include "TopBar/BatteryWidget.hpp"
+#include "TopBar/BatteryWidgetBase.hpp"
 #include <common_data/EventStore.hpp>
 
 #include <vector>
@@ -83,7 +83,7 @@ namespace gui::top_bar
         std::map<const Store::Battery::State, Image *> batteryChargings = {
             {Store::Battery::State::Charging, nullptr}, {Store::Battery::State::PluggedNotCharging, nullptr}};
         gui::SIM *sim = nullptr;
-        gui::BatteryWidget *batteryWidget = nullptr;
+        gui::BatteryWidgetBase *batteryWidget = nullptr;
         Configuration configuration;
         static TimeMode timeMode;
 
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidget.cpp b/module-gui/gui/widgets/TopBar/BatteryWidget.cpp
deleted file mode 100644
index d30996661..000000000
--- a/module-gui/gui/widgets/TopBar/BatteryWidget.cpp
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
-// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
-
-#include "BatteryWidget.hpp"
-
-namespace gui
-{
-    namespace
-    {
-        constexpr auto batteryLow           = "battery_low_W_M";
-        constexpr auto batteryCharging      = "battery_charging_W_M";
-        constexpr auto batteryChargingReady = "battery_charging_ready_W_M";
-        constexpr auto battery1             = "battery1_W_M";
-        constexpr auto battery2             = "battery2_W_M";
-        constexpr auto battery3             = "battery3_W_M";
-        constexpr auto battery4             = "battery4_W_M";
-        constexpr auto battery5             = "battery5_W_M";
-
-        constexpr auto level1Threshold = 5;
-        constexpr auto level2Threshold = 27;
-        constexpr auto level3Threshold = 50;
-        constexpr auto level4Threshold = 73;
-        constexpr auto level5Threshold = 95;
-    } // namespace
-
-    BatteryWidget::BatteryWidget(Item *parent, uint32_t x, uint32_t y) : Image(parent, x, y, 0, 0)
-    {
-        set(battery1);
-    }
-
-    void BatteryWidget::show(const Store::Battery batteryContext, bool shown)
-    {
-        if (shown) {
-            switch (batteryContext.state) {
-            case Store::Battery::State::Discharging:
-                showBatteryBars(batteryContext.level);
-                break;
-            case Store::Battery::State::Charging:
-                set(batteryCharging);
-                break;
-            case Store::Battery::State::PluggedNotCharging:
-                set(batteryChargingReady);
-                break;
-            }
-        }
-        else {
-            setVisible(false);
-        }
-    }
-
-    void BatteryWidget::showBatteryBars(std::uint32_t percentage)
-    {
-        if (percentage <= level1Threshold)
-            set(batteryLow);
-        else if (percentage <= level2Threshold)
-            set(battery1);
-        else if (percentage <= level3Threshold)
-            set(battery2);
-        else if (percentage <= level4Threshold)
-            set(battery3);
-        else if (percentage <= level5Threshold)
-            set(battery4);
-        else
-            set(battery5);
-    }
-
-} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidget.hpp b/module-gui/gui/widgets/TopBar/BatteryWidget.hpp
deleted file mode 100644
index 050d06b77..000000000
--- a/module-gui/gui/widgets/TopBar/BatteryWidget.hpp
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
-// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
-
-#pragma once
-
-#include "../Image.hpp"
-#include <common_data/EventStore.hpp>
-
-namespace gui
-{
-    class BatteryWidget : public Image
-    {
-      public:
-        BatteryWidget(Item *parent, uint32_t x, uint32_t y);
-        void show(const Store::Battery batteryContext, bool shown);
-
-      private:
-        void showBatteryBars(std::uint32_t percentage);
-    };
-} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetBar.cpp b/module-gui/gui/widgets/TopBar/BatteryWidgetBar.cpp
new file mode 100644
index 000000000..990db6e43
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetBar.cpp
@@ -0,0 +1,67 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "BatteryWidgetBar.hpp"
+#include "Style.hpp"
+#include "Utils.hpp"
+#include "visitor/GuiVisitor.hpp"
+
+namespace gui
+{
+    namespace
+    {
+        constexpr auto batteryLow           = "battery_low_W_M";
+        constexpr auto batteryCharging      = "battery_charging_W_M";
+        constexpr auto batteryChargingReady = "battery_charging_ready_W_M";
+        constexpr auto battery1             = "battery1_W_M";
+        constexpr auto battery2             = "battery2_W_M";
+        constexpr auto battery3             = "battery3_W_M";
+        constexpr auto battery4             = "battery4_W_M";
+        constexpr auto battery5             = "battery5_W_M";
+
+        constexpr auto level1Threshold = 5;
+        constexpr auto level2Threshold = 27;
+        constexpr auto level3Threshold = 50;
+        constexpr auto level4Threshold = 73;
+        constexpr auto level5Threshold = 95;
+    } // namespace
+
+    BatteryWidgetBar::BatteryWidgetBar(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h)
+        : BatteryWidgetBase(parent, x, y, w, h)
+    {
+        img = new Image(this, battery1);
+    }
+
+    void BatteryWidgetBar::showBatteryLevel(std::uint32_t percentage)
+    {
+        if (percentage <= level1Threshold) {
+            img->set(batteryLow);
+        }
+        else if (percentage <= level2Threshold) {
+            img->set(battery1);
+        }
+        else if (percentage <= level3Threshold) {
+            img->set(battery2);
+        }
+        else if (percentage <= level4Threshold) {
+            img->set(battery3);
+        }
+        else if (percentage <= level5Threshold) {
+            img->set(battery4);
+        }
+        else {
+            img->set(battery5);
+        }
+    }
+
+    void BatteryWidgetBar::showBatteryCharging()
+    {
+        img->set(batteryCharging);
+    }
+
+    void BatteryWidgetBar::showBatteryPluggedNotCharging()
+    {
+        img->set(batteryChargingReady);
+    }
+
+} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetBar.hpp b/module-gui/gui/widgets/TopBar/BatteryWidgetBar.hpp
new file mode 100644
index 000000000..64f444fbb
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetBar.hpp
@@ -0,0 +1,23 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include "BatteryWidgetBase.hpp"
+#include "Image.hpp"
+
+namespace gui
+{
+    class BatteryWidgetBar : public BatteryWidgetBase
+    {
+      public:
+        BatteryWidgetBar(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h);
+
+      private:
+        void showBatteryLevel(std::uint32_t percentage) override;
+        void showBatteryPluggedNotCharging() override;
+        void showBatteryCharging() override;
+
+        Image *img = nullptr;
+    };
+} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetBase.cpp b/module-gui/gui/widgets/TopBar/BatteryWidgetBase.cpp
new file mode 100644
index 000000000..394b64b86
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetBase.cpp
@@ -0,0 +1,35 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "BatteryWidgetBase.hpp"
+#include "BoxLayout.hpp"
+
+namespace gui
+{
+    BatteryWidgetBase::BatteryWidgetBase(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h)
+        : HBox(parent, x, y, w, h)
+    {
+        setBorderColor(gui::ColorNoColor);
+    }
+
+    void BatteryWidgetBase::show(const Store::Battery batteryContext, bool shown)
+    {
+        if (shown) {
+            setVisible(true);
+            switch (batteryContext.state) {
+            case Store::Battery::State::Discharging:
+                showBatteryLevel(batteryContext.level);
+                break;
+            case Store::Battery::State::Charging:
+                showBatteryCharging();
+                break;
+            case Store::Battery::State::PluggedNotCharging:
+                showBatteryPluggedNotCharging();
+                break;
+            }
+        }
+        else {
+            setVisible(false);
+        }
+    }
+} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetBase.hpp b/module-gui/gui/widgets/TopBar/BatteryWidgetBase.hpp
new file mode 100644
index 000000000..95974c7d3
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetBase.hpp
@@ -0,0 +1,23 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include "BoxLayout.hpp"
+#include <common_data/EventStore.hpp>
+
+namespace gui
+{
+    class HBox;
+
+    class BatteryWidgetBase : public HBox
+    {
+        virtual void showBatteryLevel(std::uint32_t percentage) = 0;
+        virtual void showBatteryPluggedNotCharging()            = 0;
+        virtual void showBatteryCharging()                      = 0;
+
+      public:
+        BatteryWidgetBase(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h);
+        void show(const Store::Battery batteryContext, bool shown);
+    };
+} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetText.cpp b/module-gui/gui/widgets/TopBar/BatteryWidgetText.cpp
new file mode 100644
index 000000000..c75066df2
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetText.cpp
@@ -0,0 +1,37 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "BatteryWidgetText.hpp"
+#include "Label.hpp"
+#include <Utils.hpp>
+#include <Style.hpp>
+
+namespace gui
+{
+    BatteryWidgetText::BatteryWidgetText(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h)
+        : BatteryWidgetBase(parent, x, y, w, h)
+    {
+        label = new Label(this, 0, 0, 0, 0);
+        label->setFilled(false);
+        label->setBorderColor(gui::ColorNoColor);
+        label->setFont(style::header::font::modes);
+        label->setAlignment(gui::Alignment(gui::Alignment::Horizontal::Left, gui::Alignment::Vertical::Center));
+        label->setMaximumSize(this->getWidth(), this->getHeight());
+    }
+
+    void BatteryWidgetText::showBatteryLevel(std::uint32_t percentage)
+    {
+        label->setText(utils::to_string(percentage) + " %");
+    }
+
+    void BatteryWidgetText::showBatteryCharging()
+    {
+        label->setText(utils::localize.get("topbar_battery_charging"));
+    }
+
+    void BatteryWidgetText::showBatteryPluggedNotCharging()
+    {
+        label->setText(utils::localize.get("topbar_battery_plugged"));
+    }
+
+} // namespace gui
diff --git a/module-gui/gui/widgets/TopBar/BatteryWidgetText.hpp b/module-gui/gui/widgets/TopBar/BatteryWidgetText.hpp
new file mode 100644
index 000000000..37349420a
--- /dev/null
+++ b/module-gui/gui/widgets/TopBar/BatteryWidgetText.hpp
@@ -0,0 +1,22 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include "BatteryWidgetBase.hpp"
+
+namespace gui
+{
+    class Label;
+    class BatteryWidgetText : public BatteryWidgetBase
+    {
+      public:
+        BatteryWidgetText(Item *parent, uint32_t x, uint32_t y, uint32_t w, uint32_t h);
+
+      private:
+        void showBatteryLevel(std::uint32_t percentage) override;
+        void showBatteryPluggedNotCharging() override;
+        void showBatteryCharging() override;
+        Label *label = nullptr;
+    };
+} // namespace gui