diff --git a/bike.c b/bike.c
index 1767958..2a18599 100644
--- a/bike.c
+++ b/bike.c
@@ -1,35 +1,22 @@
-#include "bike.h"
+#include "bike.h"
+#include "widgets/battery_indicator.h"
 
 static lv_obj_t* container = NULL;
 
 static lv_theme_t* theme_original;
 static const uint32_t bg_color = 0x040507;
-static int32_t battery_percent = 15;
 
 static lv_obj_t* battery_indicator = NULL;
-static lv_obj_t* battery_label = NULL;
 
-static void update_battery_indicator() {
-    lv_label_set_text_fmt(battery_label, "%d%%", battery_percent);
-    lv_obj_set_width(battery_indicator, lv_pct(max(battery_percent, 10)));
-    if (battery_percent >= 60) {
-        lv_obj_set_style_bg_color(battery_indicator, lv_color_hex(0x00ff00), 0);
-    }
-    else if (battery_percent >= 20) {
-        lv_obj_set_style_bg_color(battery_indicator, lv_color_hex(0xffff00), 0);
-    }
-    else {
-        lv_obj_set_style_bg_color(battery_indicator, lv_color_hex(0xff0000), 0);
-    }
-}
 
-static void battery_timer_cb(lv_timer_t* timer) {
+static void battery_timer_cb(lv_timer_t* timer) {
+    int8_t battery_percent = lv_battery_indicator_get_percentage(battery_indicator);
     battery_percent -= 1;
     if (battery_percent < 0)
     {
         battery_percent = 100;
     }
-    update_battery_indicator();
+    lv_battery_indicator_set_percentage(battery_indicator, (uint8_t)battery_percent);
 
 }
 
@@ -59,29 +46,30 @@ static void create_header() {
     lv_obj_set_style_bg_color(gap_bar, lv_color_hex(bg_color), 0);
 
     //battery
-    //icon
-    LV_IMG_DECLARE(battery);
-    lv_obj_t* battery_container = lv_obj_create(header);
-    lv_obj_set_style_bg_img_src(battery_container, &battery, 0);
-    lv_obj_set_size(battery_container, 26, 16);
-    lv_obj_set_style_margin_right(battery_container, 4, 0);
+    //icon
+    battery_indicator = lv_battery_indicator_create(header);
+    //LV_IMG_DECLARE(battery_icon);
+    //lv_obj_t* battery_container = lv_obj_create(header);
+    //lv_obj_set_style_bg_img_src(battery_container, &battery_icon, 0);
+    //lv_obj_set_size(battery_container, 26, 16);
+    //lv_obj_set_style_margin_right(battery_container, 4, 0);
 
-    lv_obj_set_style_pad_all(battery_container, 2, 0);
-    lv_obj_set_style_pad_left(battery_container, 3, 0);
-    lv_obj_set_style_pad_right(battery_container, 6, 0);
+    //lv_obj_set_style_pad_all(battery_container, 2, 0);
+    //lv_obj_set_style_pad_left(battery_container, 3, 0);
+    //lv_obj_set_style_pad_right(battery_container, 6, 0);
 
-    battery_indicator = lv_obj_create(battery_container);
-    lv_obj_set_size(battery_indicator, lv_pct(battery_percent), lv_pct(90));
-    lv_obj_set_style_radius(battery_indicator, 2, 0);
-    lv_obj_set_align(battery_indicator, LV_ALIGN_LEFT_MID);
+    //battery_indicator = lv_obj_create(battery_container);
+    //lv_obj_set_size(battery_indicator, lv_pct(battery_percent), lv_pct(90));
+    //lv_obj_set_style_radius(battery_indicator, 2, 0);
+    //lv_obj_set_align(battery_indicator, LV_ALIGN_LEFT_MID);
 
 
-    battery_label = lv_label_create(header);
-    lv_obj_set_style_bg_color(battery_label, lv_color_hex(bg_color), 0);
-    lv_obj_set_size(battery_label, 40, LV_SIZE_CONTENT);
-    lv_obj_set_style_text_color(battery_label, lv_color_hex(0xffffff), 0);
+    //battery_label = lv_label_create(header);
+    //lv_obj_set_style_bg_color(battery_label, lv_color_hex(bg_color), 0);
+    //lv_obj_set_size(battery_label, 40, LV_SIZE_CONTENT);
+    //lv_obj_set_style_text_color(battery_label, lv_color_hex(0xffffff), 0);
 
-    update_battery_indicator();
+    //update_battery_indicator();
 
     lv_obj_t* timer = lv_timer_create(battery_timer_cb, 3 * 1000, NULL);
 }
diff --git a/generated/battery.c b/generated/battery_icon.c
similarity index 99%
rename from generated/battery.c
rename to generated/battery_icon.c
index 4fc1d59..f5084e9 100644
--- a/generated/battery.c
+++ b/generated/battery_icon.c
@@ -40,7 +40,7 @@ const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMAGE_BATTERY
   0x21, 0x08, 0x82, 0x10, 0x29, 0x4a, 0xf3, 0x9c, 0xb7, 0xb5, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0xb7, 0xbd, 0x76, 0xb5, 0x0c, 0x63, 0xc3, 0x18, 0x41, 0x08, 0x21, 0x08, 0x21, 0x08, 0x21, 0x08, 
 };
 
-const lv_image_dsc_t battery = {
+const lv_image_dsc_t battery_icon = {
   .header.cf = LV_COLOR_FORMAT_RGB565,
   .header.magic = LV_IMAGE_HEADER_MAGIC,
   .header.w = 26,
diff --git a/widgets/battery_indicator.c b/widgets/battery_indicator.c
new file mode 100644
index 0000000..7dde4b2
--- /dev/null
+++ b/widgets/battery_indicator.c
@@ -0,0 +1,109 @@
+
+#include "lvgl.h"
+#include "battery_indicator.h"
+#include "battery_indicator_private.h"
+#include "src/core/lv_obj_class_private.h"
+
+#define MY_CLASS (&lv_battery_indicator_class)
+
+static void lv_battery_indicator_constructor(const lv_obj_class_t* class_p, lv_obj_t* obj);
+static void lv_battery_indicator_event(const lv_obj_class_t* class_p, lv_event_t* e);
+
+
+const lv_obj_class_t lv_battery_indicator_class = {
+    .constructor_cb = lv_battery_indicator_constructor,
+    .event_cb = lv_battery_indicator_event,
+    .width_def = LV_SIZE_CONTENT,
+    .height_def = LV_SIZE_CONTENT,
+    .instance_size = sizeof(lv_battery_indicator_t),
+    .base_class = &lv_obj_class,
+    .name = "lv_battery_indicator",
+    LV_PROPERTY_CLASS_FIELDS(battery_indicator, BATTERY_INDICATOR)
+};
+
+lv_obj_t* lv_battery_indicator_create(lv_obj_t* parent) {
+    LV_LOG_INFO("begin");
+    lv_obj_t* obj = lv_obj_class_create_obj(MY_CLASS, parent);
+    lv_obj_class_init_obj(obj);
+
+    lv_battery_indicator_t* self = (lv_battery_indicator_t*)obj;
+
+
+    LV_IMG_DECLARE(battery_icon);
+    lv_obj_t* battery_container = obj;
+    lv_obj_set_style_bg_img_src(battery_container, &battery_icon, 0);
+    lv_obj_set_size(battery_container, 26, 16);
+    lv_obj_set_style_margin_right(battery_container, 4, 0);
+
+    lv_obj_set_style_pad_all(battery_container, 2, 0);
+    lv_obj_set_style_pad_left(battery_container, 3, 0);
+    lv_obj_set_style_pad_right(battery_container, 6, 0);
+
+    self->indicator = lv_obj_create(battery_container);
+    lv_obj_set_size(self->indicator, lv_pct(self->percentage), lv_pct(90));
+    lv_obj_set_style_radius(self->indicator, 2, 0);
+    lv_obj_set_align(self->indicator, LV_ALIGN_LEFT_MID);
+
+
+    self->label = lv_label_create(parent);
+    lv_obj_set_style_bg_color(self->label, lv_color_hex(0x040507), 0);
+    lv_obj_set_size(self->label, 40, LV_SIZE_CONTENT);
+    lv_obj_set_style_text_color(self->label, lv_color_hex(0xffffff), 0);
+
+    lv_battery_indicator_set_percentage(obj, lv_battery_indicator_get_percentage(obj));
+
+    return obj;
+}
+
+void lv_battery_indicator_set_text_color_hex(lv_obj_t* obj, uint32_t c) {
+    lv_battery_indicator_t* self = (lv_battery_indicator_t*)obj;
+    lv_obj_set_style_bg_color(self->label, lv_color_hex(c), 0);
+}
+
+void lv_battery_indicator_set_text_bg_color_hex(lv_obj_t* obj, uint32_t c) {
+    lv_battery_indicator_t* self = (lv_battery_indicator_t*)obj;
+    lv_obj_set_style_text_color(self->label, lv_color_hex(c), 0);
+}
+
+void lv_battery_indicator_set_percentage(lv_obj_t* obj, uint8_t value) {
+    lv_battery_indicator_t* self = (lv_battery_indicator_t*)obj;
+    self->percentage = value;
+    lv_label_set_text_fmt(self->label, "%d%%", self->percentage);
+    lv_obj_set_width(self->indicator, lv_pct(max(self->percentage, 10)));
+    if (self->percentage >= 60) {
+        lv_obj_set_style_bg_color(self->indicator, lv_color_hex(0x00ff00), 0);
+    }
+    else if (self->percentage >= 20) {
+        lv_obj_set_style_bg_color(self->indicator, lv_color_hex(0xffff00), 0);
+    }
+    else {
+        lv_obj_set_style_bg_color(self->indicator, lv_color_hex(0xff0000), 0);
+    }
+}
+
+uint8_t lv_battery_indicator_get_percentage(lv_obj_t* obj) {
+    lv_battery_indicator_t* self = (lv_battery_indicator_t*)obj;
+    return self->percentage;
+}
+
+static void lv_battery_indicator_constructor(const lv_obj_class_t* class_p, lv_obj_t* obj) {
+    LV_UNUSED(class_p);
+    LV_TRACE_OBJ_CREATE("begin");
+
+    lv_battery_indicator_t* indicator = (lv_battery_indicator_t*)obj;
+
+    indicator->percentage = 0;
+
+    lv_obj_remove_flag(obj, LV_OBJ_FLAG_CLICKABLE);
+
+    LV_TRACE_OBJ_CREATE("finished");
+
+}
+static void lv_battery_indicator_event(const lv_obj_class_t* class_p, lv_event_t* e) {
+    LV_UNUSED(class_p);
+
+    lv_result_t res;
+
+    res = lv_obj_event_base(MY_CLASS, e);
+    if (res != LV_RESULT_OK) return;
+}
diff --git a/widgets/battery_indicator.h b/widgets/battery_indicator.h
new file mode 100644
index 0000000..46e699c
--- /dev/null
+++ b/widgets/battery_indicator.h
@@ -0,0 +1,14 @@
+#pragma once
+#include "lvgl.h"
+
+typedef struct _lv_battery_indicator_t lv_battery_indicator_t;
+
+lv_obj_t* lv_battery_indicator_create(lv_obj_t* parent);
+
+void lv_battery_indicator_set_percentage(lv_obj_t* obj, uint8_t value);
+
+uint8_t lv_battery_indicator_get_percentage(lv_obj_t* obj);
+
+void lv_battery_indicator_set_text_color_hex(lv_obj_t* obj, uint32_t c);
+
+void lv_battery_indicator_set_text_bg_color_hex(lv_obj_t* obj, uint32_t c);
diff --git a/widgets/battery_indicator_private.h b/widgets/battery_indicator_private.h
new file mode 100644
index 0000000..5535ff2
--- /dev/null
+++ b/widgets/battery_indicator_private.h
@@ -0,0 +1,12 @@
+#pragma once
+#include "lvgl.h"
+#include "lvgl_private.h"
+
+struct _lv_battery_indicator_t {
+    lv_obj_t obj;
+    uint8_t percentage;
+    lv_obj_t* indicator;
+    lv_obj_t* label;
+    uint32_t label_text_color;
+    uint32_t label_bg_color;
+};