diff --git a/watchful-ui/src/lib.rs b/watchful-ui/src/lib.rs
index 7c0f71e..ba93171 100644
--- a/watchful-ui/src/lib.rs
+++ b/watchful-ui/src/lib.rs
@@ -38,6 +38,11 @@ fn text_text_style(color: Rgb) -> U8g2TextStyle<Rgb> {
     U8g2TextStyle::new(fonts::u8g2_font_unifont_t_symbols, color)
 }
 
+fn perc_text_style(color: Rgb) -> U8g2TextStyle<Rgb> {
+    U8g2TextStyle::new(fonts::u8g2_font_spleen12x24_mf, color)
+    //U8g2TextStyle::new(fonts::u8g2_font_spleen8x16_mf, color)
+}
+
 pub enum ButtonEvent {
     ShortPress,
     LongPress,
@@ -110,26 +115,55 @@ impl TimeView {
             .align_to(&display_area, horizontal::Center, vertical::Center)
             .draw(display)?;
 
+        let color;
         let display_area = display_area.offset(-5);
         let top_right_y = display_area.top_left.y;
         let top_right_x = display_area.top_left.x + display_area.size.width as i32 - 30;
         let pos = Point::new(top_right_x, top_right_y);
+
         if self.battery_charging {
-            Image::new(&icons::size24px::system::BatteryCharging::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+        	color = Rgb::CSS_DEEP_SKY_BLUE;
+            Image::new(&icons::size24px::system::BatteryCharging::new(color), pos).draw(display)?
         } else {
             if self.battery_level > 85 {
-                Image::new(&icons::size24px::system::BatteryFull::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+            	color = Rgb::CSS_DARK_GREEN;
+                Image::new(&icons::size24px::system::BatteryFull::new(color), pos).draw(display)?
             } else if self.battery_level > 65 {
-                Image::new(&icons::size24px::system::BatterySevenFive::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+            	color = Rgb::CSS_GREEN;
+                Image::new(&icons::size24px::system::BatterySevenFive::new(color), pos).draw(display)?
             } else if self.battery_level > 35 {
-                Image::new(&icons::size24px::system::BatteryFiveZero::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+            	color = Rgb::CSS_YELLOW;
+                Image::new(&icons::size24px::system::BatteryFiveZero::new(color), pos).draw(display)?
             } else if self.battery_level > 10 {
-                Image::new(&icons::size24px::system::BatteryTwoFive::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+            	color = Rgb::CSS_DARK_ORANGE;
+                Image::new(&icons::size24px::system::BatteryTwoFive::new(color), pos).draw(display)?
             } else {
-                Image::new(&icons::size24px::system::BatteryEmpty::new(Rgb::CSS_DARK_CYAN), pos).draw(display)?
+            	color = Rgb::CSS_RED;
+                Image::new(&icons::size24px::system::BatteryEmpty::new(color), pos).draw(display)?
             }
         };
 
+        let mut buf: heapless::String<16> = heapless::String::new();
+        write!(buf, "{}%", self.battery_level).unwrap();
+        let perc = Text::with_text_style(
+            &buf,
+            display.bounding_box().center(),
+            perc_text_style(color),
+            TextStyleBuilder::new()
+                .alignment(embedded_graphics::text::Alignment::Right)
+                .baseline(embedded_graphics::text::Baseline::Alphabetic)
+                .build(),
+        );
+
+        let display_area = display.bounding_box();
+        LinearLayout::horizontal(Chain::new(perc))
+            .with_spacing(spacing::FixedMargin(10))
+            .with_alignment(vertical::Center)
+            .arrange()
+            .align_to(&display_area, horizontal::Right, vertical::Top)
+            .translate(Point::new(-40, 5))
+            .draw(display)?;
+
         Ok(())
     }
 }