diff --git a/src/ui/CMakeLists.txt b/src/ui/CMakeLists.txt
index 6b5c393a..af261412 100644
--- a/src/ui/CMakeLists.txt
+++ b/src/ui/CMakeLists.txt
@@ -8,6 +8,8 @@ idf_component_register(
   "themes.cpp" "widget_top_bar.cpp" "screen.cpp" "screen_onboarding.cpp"
   "modal_progress.cpp" "modal.cpp" "modal_confirm.cpp" "screen_settings.cpp"
   "splash.c" "font_fusion.c" "font_symbols.c"
+  "icons/battery_empty.c" "icons/battery_full.c" "icons/battery_20.c"
+  "icons/battery_40.c" "icons/battery_60.c" "icons/battery_80.c"
   INCLUDE_DIRS "include"
   REQUIRES "drivers" "lvgl" "tinyfsm" "events" "system_fsm" "database" "esp_timer" "battery")
 target_compile_options(${COMPONENT_LIB} PRIVATE ${EXTRA_WARNINGS})
diff --git a/src/ui/icons/battery_20.c b/src/ui/icons/battery_20.c
new file mode 100644
index 00000000..0ae909b9
--- /dev/null
+++ b/src/ui/icons/battery_20.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_20
+#define LV_ATTRIBUTE_IMG_BATTERY_20
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_20 uint8_t battery_20_map[] = {
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 0*/
+  0xfd, 0xfe, 0xfd, 0xff, 	/*Color of index 1*/
+  0x26, 0xc1, 0x38, 0xff, 	/*Color of index 2*/
+  0x01, 0xbe, 0x37, 0xff, 	/*Color of index 3*/
+
+  0x55, 0x00, 0x55, 
+  0x54, 0x00, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0x00, 0x15, 
+};
+
+const lv_img_dsc_t battery_20 = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_20_map,
+};
diff --git a/src/ui/icons/battery_40.c b/src/ui/icons/battery_40.c
new file mode 100644
index 00000000..07310273
--- /dev/null
+++ b/src/ui/icons/battery_40.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_40
+#define LV_ATTRIBUTE_IMG_BATTERY_40
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_40 uint8_t battery_40_map[] = {
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 0*/
+  0xfd, 0xfe, 0xfd, 0xff, 	/*Color of index 1*/
+  0x26, 0xc1, 0x38, 0xff, 	/*Color of index 2*/
+  0x01, 0xbe, 0x37, 0xff, 	/*Color of index 3*/
+
+  0x55, 0x00, 0x55, 
+  0x54, 0x00, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0x00, 0x15, 
+};
+
+const lv_img_dsc_t battery_40 = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_40_map,
+};
diff --git a/src/ui/icons/battery_60.c b/src/ui/icons/battery_60.c
new file mode 100644
index 00000000..ac7db567
--- /dev/null
+++ b/src/ui/icons/battery_60.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_60
+#define LV_ATTRIBUTE_IMG_BATTERY_60
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_60 uint8_t battery_60_map[] = {
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 0*/
+  0xfd, 0xfe, 0xfd, 0xff, 	/*Color of index 1*/
+  0x26, 0xc1, 0x38, 0xff, 	/*Color of index 2*/
+  0x01, 0xbe, 0x37, 0xff, 	/*Color of index 3*/
+
+  0x55, 0x00, 0x55, 
+  0x54, 0x00, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0x00, 0x15, 
+};
+
+const lv_img_dsc_t battery_60 = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_60_map,
+};
diff --git a/src/ui/icons/battery_80.c b/src/ui/icons/battery_80.c
new file mode 100644
index 00000000..086c0708
--- /dev/null
+++ b/src/ui/icons/battery_80.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_80
+#define LV_ATTRIBUTE_IMG_BATTERY_80
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_80 uint8_t battery_80_map[] = {
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 0*/
+  0xfd, 0xfe, 0xfd, 0xff, 	/*Color of index 1*/
+  0x26, 0xc1, 0x38, 0xff, 	/*Color of index 2*/
+  0x01, 0xbe, 0x37, 0xff, 	/*Color of index 3*/
+
+  0x55, 0x00, 0x55, 
+  0x54, 0x00, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0x55, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0x00, 0x15, 
+};
+
+const lv_img_dsc_t battery_80 = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_80_map,
+};
diff --git a/src/ui/icons/battery_empty.c b/src/ui/icons/battery_empty.c
new file mode 100644
index 00000000..ed356167
--- /dev/null
+++ b/src/ui/icons/battery_empty.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_EMPTY
+#define LV_ATTRIBUTE_IMG_BATTERY_EMPTY
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_EMPTY uint8_t battery_empty_map[] = {
+  0xfd, 0xfd, 0xfd, 0xff, 	/*Color of index 0*/
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 1*/
+  0x26, 0x2c, 0xfa, 0xff, 	/*Color of index 2*/
+  0x00, 0x00, 0x00, 0x00, 	/*Color of index 3*/
+
+  0x00, 0x55, 0x00, 
+  0x01, 0x55, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0x00, 0x40, 
+  0x01, 0xaa, 0x40, 
+  0x01, 0xaa, 0x40, 
+  0x01, 0x55, 0x40, 
+};
+
+const lv_img_dsc_t battery_empty = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_empty_map,
+};
diff --git a/src/ui/icons/battery_full.c b/src/ui/icons/battery_full.c
new file mode 100644
index 00000000..fffd5a73
--- /dev/null
+++ b/src/ui/icons/battery_full.c
@@ -0,0 +1,52 @@
+#ifdef __has_include
+    #if __has_include("lvgl.h")
+        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
+            #define LV_LVGL_H_INCLUDE_SIMPLE
+        #endif
+    #endif
+#endif
+
+#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
+    #include "lvgl.h"
+#else
+    #include "lvgl/lvgl.h"
+#endif
+
+
+#ifndef LV_ATTRIBUTE_MEM_ALIGN
+#define LV_ATTRIBUTE_MEM_ALIGN
+#endif
+
+#ifndef LV_ATTRIBUTE_IMG_BATTERY_FULL
+#define LV_ATTRIBUTE_IMG_BATTERY_FULL
+#endif
+
+const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_BATTERY_FULL uint8_t battery_full_map[] = {
+  0x00, 0x00, 0x00, 0xff, 	/*Color of index 0*/
+  0xfd, 0xfe, 0xfd, 0xff, 	/*Color of index 1*/
+  0x26, 0xc1, 0x38, 0xff, 	/*Color of index 2*/
+  0x01, 0xbe, 0x37, 0xff, 	/*Color of index 3*/
+
+  0x55, 0x00, 0x55, 
+  0x54, 0x00, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xaa, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0xff, 0x15, 
+  0x54, 0x00, 0x15, 
+};
+
+const lv_img_dsc_t battery_full = {
+  .header.cf = LV_IMG_CF_INDEXED_2BIT,
+  .header.always_zero = 0,
+  .header.reserved = 0,
+  .header.w = 12,
+  .header.h = 12,
+  .data_size = 52,
+  .data = battery_full_map,
+};
diff --git a/src/ui/widget_top_bar.cpp b/src/ui/widget_top_bar.cpp
index 851b617f..c5c3d88b 100644
--- a/src/ui/widget_top_bar.cpp
+++ b/src/ui/widget_top_bar.cpp
@@ -16,6 +16,13 @@
 #include "widgets/lv_img.h"
 #include "widgets/lv_label.h"
 
+LV_IMG_DECLARE(battery_empty);
+LV_IMG_DECLARE(battery_20);
+LV_IMG_DECLARE(battery_40);
+LV_IMG_DECLARE(battery_60);
+LV_IMG_DECLARE(battery_80);
+LV_IMG_DECLARE(battery_full);
+
 namespace ui {
 namespace widgets {
 
@@ -48,8 +55,7 @@ TopBar::TopBar(lv_obj_t* parent, const Configuration& config) {
   playback_ = lv_label_create(container_);
   lv_label_set_text(playback_, "");
 
-  battery_ = lv_label_create(container_);
-  lv_label_set_text(battery_, "");
+  battery_ = lv_img_create(container_);
 }
 
 auto TopBar::Update(const State& state) -> void {
@@ -65,18 +71,21 @@ auto TopBar::Update(const State& state) -> void {
       break;
   }
 
-  lv_label_set_text(battery_, std::to_string(state.battery_percent).c_str());
-  // if (state.battery_percent >= 95) {
-  //   lv_label_set_text(battery_, "100");
-  // } else if (state.battery_percent >= 70) {
-  //   lv_label_set_text(battery_, ">70");
-  // } else if (state.battery_percent >= 40) {
-  //   lv_label_set_text(battery_, ">40");
-  // } else if (state.battery_percent >= 10) {
-  //   lv_label_set_text(battery_, ">10");
-  // } else {
-  //   lv_label_set_text(battery_, "0");
-  // }
+  if (state.battery_percent >= 95) {
+    lv_img_set_src(battery_, &battery_full);
+  } else if (state.battery_percent >= 75) {
+    lv_img_set_src(battery_, &battery_80);
+    lv_label_set_text(battery_, ">70");
+  } else if (state.battery_percent >= 55) {
+    lv_img_set_src(battery_, &battery_60);
+    lv_label_set_text(battery_, ">40");
+  } else if (state.battery_percent >= 35) {
+    lv_img_set_src(battery_, &battery_40);
+  } else if (state.battery_percent >= 15) {
+    lv_img_set_src(battery_, &battery_20);
+  } else {
+    lv_img_set_src(battery_, &battery_empty);
+  }
 }
 
 }  // namespace widgets
diff --git a/tools/mkfonts.sh b/tools/fonts/mkfonts.sh
similarity index 100%
rename from tools/mkfonts.sh
rename to tools/fonts/mkfonts.sh
diff --git a/tools/icons/raw/battery_20.png b/tools/icons/raw/battery_20.png
new file mode 100644
index 00000000..9012376f
Binary files /dev/null and b/tools/icons/raw/battery_20.png differ
diff --git a/tools/icons/raw/battery_40.png b/tools/icons/raw/battery_40.png
new file mode 100644
index 00000000..88a0b448
Binary files /dev/null and b/tools/icons/raw/battery_40.png differ
diff --git a/tools/icons/raw/battery_60.png b/tools/icons/raw/battery_60.png
new file mode 100644
index 00000000..d86c997a
Binary files /dev/null and b/tools/icons/raw/battery_60.png differ
diff --git a/tools/icons/raw/battery_80.png b/tools/icons/raw/battery_80.png
new file mode 100644
index 00000000..344b3703
Binary files /dev/null and b/tools/icons/raw/battery_80.png differ
diff --git a/tools/icons/raw/battery_empty.png b/tools/icons/raw/battery_empty.png
new file mode 100644
index 00000000..c9176e8c
Binary files /dev/null and b/tools/icons/raw/battery_empty.png differ
diff --git a/tools/icons/raw/battery_full.png b/tools/icons/raw/battery_full.png
new file mode 100644
index 00000000..57122a23
Binary files /dev/null and b/tools/icons/raw/battery_full.png differ