Merge branch 'LVGL7' of https://github.com/joaquimorg/Pinetime into joaquimorg-LVGL7

# Conflicts:
#	src/CMakeLists.txt
#	src/displayapp/DisplayApp.cpp
#	src/displayapp/screens/Modal.cpp
#	src/displayapp/screens/Modal.h
#	src/displayapp/screens/Notifications.cpp
#	src/displayapp/screens/Tile.h

22 files changed, 178 insertions, 445 deletions

diff --git a/src/displayapp/screens/ApplicationList.cpp b/src/displayapp/screens/ApplicationList.cpp
index dd7fcd41..531636eb 100644
--- a/src/displayapp/screens/ApplicationList.cpp
+++ b/src/displayapp/screens/ApplicationList.cpp
@@ -71,7 +71,7 @@ std::unique_ptr<Screen> ApplicationList::CreateScreen2() {
 std::unique_ptr<Screen> ApplicationList::CreateScreen3() {
   std::array<Screens::Tile::Applications, 6> applications {
           {{"A", Apps::Meter},
-           {"B", Apps::Gauge},
+           {"B", Apps::Navigation},
            {"C", Apps::Clock},
            {"D", Apps::Music},
            {"E", Apps::SysInfo},
diff --git a/src/displayapp/screens/Brightness.cpp b/src/displayapp/screens/Brightness.cpp
index c8085bed..36820417 100644
--- a/src/displayapp/screens/Brightness.cpp
+++ b/src/displayapp/screens/Brightness.cpp
@@ -22,7 +22,7 @@ Brightness::Brightness(Pinetime::Applications::DisplayApp *app, Controllers::Bri
   slider_label = lv_label_create(lv_scr_act(), nullptr);
   lv_label_set_text(slider_label, LevelToString(brightness.Level()));
   lv_obj_set_auto_realign(slider_label, true);
-  lv_obj_align(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+  lv_obj_align(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 30);
 }
 
 Brightness::~Brightness() {
@@ -75,6 +75,9 @@ bool Brightness::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
   switch(event) {
     case TouchEvents::SwipeLeft:
       brightness.Lower();
+      if ( brightness.Level() == Pinetime::Controllers::BrightnessController::Levels::Off) {
+        brightness.Set(Controllers::BrightnessController::Levels::Low);
+      }
       SetValue();
       return true;
     case TouchEvents::SwipeRight:
diff --git a/src/displayapp/screens/Clock.cpp b/src/displayapp/screens/Clock.cpp
index 2988922e..4b280adb 100644
--- a/src/displayapp/screens/Clock.cpp
+++ b/src/displayapp/screens/Clock.cpp
@@ -14,9 +14,6 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
-extern lv_style_t* LabelBigStyle;
 
 static void event_handler(lv_obj_t * obj, lv_event_t event) {
   Clock* screen = static_cast<Clock *>(obj->user_data);
@@ -59,7 +56,9 @@ Clock::Clock(DisplayApp* app,
   lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_IN_LEFT_MID, 0, 60);
 
   label_time = lv_label_create(lv_scr_act(), nullptr);
-  lv_label_set_style(label_time, LV_LABEL_STYLE_MAIN, LabelBigStyle);
+
+  lv_obj_set_style_local_text_font(label_time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_extrabold_compressed);
+
   lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_LEFT_MID, 0, 0);
 
   backgroundLabel = lv_label_create(lv_scr_act(), nullptr);
diff --git a/src/displayapp/screens/DropDownDemo.cpp b/src/displayapp/screens/DropDownDemo.cpp
index 37728e17..944c63bb 100644
--- a/src/displayapp/screens/DropDownDemo.cpp
+++ b/src/displayapp/screens/DropDownDemo.cpp
@@ -4,8 +4,6 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 DropDownDemo::DropDownDemo(Pinetime::Applications::DisplayApp *app) : Screen(app) {
   // Create the dropdown object, with many item, and fix its height
diff --git a/src/displayapp/screens/FirmwareUpdate.cpp b/src/displayapp/screens/FirmwareUpdate.cpp
index b9f891d0..2f0bb5ad 100644
--- a/src/displayapp/screens/FirmwareUpdate.cpp
+++ b/src/displayapp/screens/FirmwareUpdate.cpp
@@ -4,8 +4,6 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 
 FirmwareUpdate::FirmwareUpdate(Pinetime::Applications::DisplayApp *app, Pinetime::Controllers::Ble& bleController) :
diff --git a/src/displayapp/screens/FirmwareValidation.cpp b/src/displayapp/screens/FirmwareValidation.cpp
index d4165dc5..adacd8cd 100644
--- a/src/displayapp/screens/FirmwareValidation.cpp
+++ b/src/displayapp/screens/FirmwareValidation.cpp
@@ -5,8 +5,6 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 namespace {
   static void ButtonEventHandler(lv_obj_t * obj, lv_event_t event)
diff --git a/src/displayapp/screens/Gauge.cpp b/src/displayapp/screens/Gauge.cpp
deleted file mode 100644
index 1b9f2c6d..00000000
--- a/src/displayapp/screens/Gauge.cpp
+++ /dev/null
@@ -1,57 +0,0 @@
-#include "Gauge.h"
-#include "../DisplayApp.h"
-
-using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
-
-
-Gauge::Gauge(Pinetime::Applications::DisplayApp *app) : Screen(app) {
-  /*Create a style*/
-  lv_style_copy(&style, &lv_style_pretty_color);
-  style.body.main_color = LV_COLOR_CYAN;     /*Line color at the beginning*/
-  style.body.grad_color =  LV_COLOR_RED;    /*Line color at the end*/
-  style.body.padding.left = 10;                      /*Scale line length*/
-  style.body.padding.inner = 8 ;                    /*Scale label padding*/
-  style.body.border.color = lv_color_hex3(0x333);   /*Needle middle circle color*/
-  style.line.width = 3;
-  style.text.color = LV_COLOR_WHITE;
-  style.line.color = LV_COLOR_RED;                  /*Line color after the critical value*/
-
-
-  /*Describe the color for the needles*/
-
-  needle_colors[0] = LV_COLOR_ORANGE;
-
-  /*Create a gauge*/
-  gauge1 = lv_gauge_create(lv_scr_act(), nullptr);
-  lv_gauge_set_style(gauge1, LV_GAUGE_STYLE_MAIN, &style);
-  lv_gauge_set_needle_count(gauge1, 1, needle_colors);
-  lv_obj_set_size(gauge1, 180, 180);
-  lv_obj_align(gauge1, nullptr, LV_ALIGN_CENTER, 0, 0);
-  lv_gauge_set_scale(gauge1, 360, 60, 0);
-  lv_gauge_set_range(gauge1, 0, 59);
-
-  /*Set the values*/
-  lv_gauge_set_value(gauge1, 0, value);
-}
-
-Gauge::~Gauge() {
-
-
-  lv_obj_clean(lv_scr_act());
-}
-
-bool Gauge::Refresh() {
-//  lv_lmeter_set_value(lmeter, value++);                       /*Set the current value*/
-//  if(value>=60) value = 0;
-
-  lv_gauge_set_value(gauge1, 0, value++);
-  if(value == 59) value = 0;
-  return running;
-}
-
-bool Gauge::OnButtonPushed() {
-  running = false;
-  return true;
-}
diff --git a/src/displayapp/screens/Gauge.h b/src/displayapp/screens/Gauge.h
deleted file mode 100644
index 2a6b8f83..00000000
--- a/src/displayapp/screens/Gauge.h
+++ /dev/null
@@ -1,30 +0,0 @@
-#pragma once
-
-#include <cstdint>
-#include "Screen.h"
-#include <lvgl/lvgl.h>
-
-namespace Pinetime {
-  namespace Applications {
-    namespace Screens {
-
-      class Gauge : public Screen{
-        public:
-          Gauge(DisplayApp* app);
-          ~Gauge() override;
-
-          bool Refresh() override;
-          bool OnButtonPushed() override;
-
-        private:
-          lv_style_t style;
-          lv_color_t needle_colors[3];
-          lv_obj_t * gauge1;
-
-          uint32_t value=30;
-          bool running = true;
-
-      };
-    }
-  }
-}
diff --git a/src/displayapp/screens/HeartRate.cpp b/src/displayapp/screens/HeartRate.cpp
index d55ed019..401d57d9 100644
--- a/src/displayapp/screens/HeartRate.cpp
+++ b/src/displayapp/screens/HeartRate.cpp
@@ -5,8 +5,6 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 namespace {
   const char *ToString(Pinetime::Controllers::HeartRateController::States s) {
@@ -30,28 +28,22 @@ namespace {
 }
 
 HeartRate::HeartRate(Pinetime::Applications::DisplayApp *app, Controllers::HeartRateController& heartRateController) : Screen(app), heartRateController{heartRateController} {
-  label_bpm = lv_label_create(lv_scr_act(), NULL);
-
-  labelStyle = const_cast<lv_style_t *>(lv_label_get_style(label_bpm, LV_LABEL_STYLE_MAIN));
-  labelStyle->text.font = &jetbrains_mono_bold_20;
-
-  lv_style_copy(&labelBigStyle, labelStyle);
-  labelBigStyle.text.font = &jetbrains_mono_extrabold_compressed;
+  
+  label_hr = lv_label_create(lv_scr_act(), NULL);
 
-  lv_label_set_style(label_bpm, LV_LABEL_STYLE_MAIN, labelStyle);
+  lv_obj_set_style_local_text_font(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_extrabold_compressed);
 
-  label_hr = lv_label_create(lv_scr_act(), NULL);
-  lv_label_set_style(label_hr, LV_LABEL_STYLE_MAIN, &labelBigStyle);
   lv_obj_align(label_hr, lv_scr_act(), LV_ALIGN_CENTER, -70, -40);
   lv_label_set_text(label_hr, "000");
 
+  label_bpm = lv_label_create(lv_scr_act(), NULL);
   lv_label_set_text(label_bpm, "Heart rate BPM");
   lv_obj_align(label_bpm, label_hr, LV_ALIGN_OUT_TOP_MID, 0, -20);
 
 
   label_status = lv_label_create(lv_scr_act(), NULL);
   lv_label_set_text(label_status, ToString(Pinetime::Controllers::HeartRateController::States::NotEnoughData));
-  lv_label_set_style(label_status, LV_LABEL_STYLE_MAIN, labelStyle);
+  
   lv_obj_align(label_status, label_hr, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
 
   btn_startStop = lv_btn_create(lv_scr_act(), NULL);
diff --git a/src/displayapp/screens/InfiniPaint.cpp b/src/displayapp/screens/InfiniPaint.cpp
index 65be6622..6d1f75b8 100644
--- a/src/displayapp/screens/InfiniPaint.cpp
+++ b/src/displayapp/screens/InfiniPaint.cpp
@@ -3,8 +3,6 @@
 #include "../LittleVgl.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 InfiniPaint::InfiniPaint(Pinetime::Applications::DisplayApp* app, Pinetime::Components::LittleVgl& lvgl) : Screen(app), lvgl{lvgl} {
   app->SetTouchMode(DisplayApp::TouchModes::Polling);
diff --git a/src/displayapp/screens/Meter.cpp b/src/displayapp/screens/Meter.cpp
index 3c8e703c..58a0636f 100644
--- a/src/displayapp/screens/Meter.cpp
+++ b/src/displayapp/screens/Meter.cpp
@@ -3,27 +3,23 @@
 #include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 
 Meter::Meter(Pinetime::Applications::DisplayApp *app) : Screen(app) {
 
-  lv_style_copy(&style_lmeter, &lv_style_pretty_color);
-  style_lmeter.line.width = 2;
-  style_lmeter.line.color = LV_COLOR_SILVER;
-  style_lmeter.body.main_color = lv_color_make(255,0,0);
-  style_lmeter.body.grad_color = lv_color_make(160,0,0);
-  style_lmeter.body.padding.left = 16;                           /*Line length*/
-
   /*Create a line meter */
-  lmeter = lv_lmeter_create(lv_scr_act(), nullptr);
-  lv_lmeter_set_range(lmeter, 0, 60);                   /*Set the range*/
-  lv_lmeter_set_value(lmeter, value);                       /*Set the current value*/
-  lv_lmeter_set_angle_offset(lmeter, 180);
-  lv_lmeter_set_scale(lmeter, 360, 60);                  /*Set the angle and number of lines*/
-  lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter);           /*Apply the new style*/
-  lv_obj_set_size(lmeter, 150, 150);
+  lmeter = lv_linemeter_create(lv_scr_act(), nullptr);
+  lv_linemeter_set_range(lmeter, 0, 60);                   /*Set the range*/
+  lv_linemeter_set_value(lmeter, value);                       /*Set the current value*/
+  lv_linemeter_set_angle_offset(lmeter, 180);
+  lv_linemeter_set_scale(lmeter, 360, 60);                  /*Set the angle and number of lines*/
+
+  lv_obj_set_style_local_scale_end_color(lmeter, LV_LINEMETER_PART_MAIN, LV_STATE_DEFAULT, lv_color_make(255,0,0));
+  lv_obj_set_style_local_scale_grad_color(lmeter, LV_LINEMETER_PART_MAIN, LV_STATE_DEFAULT, lv_color_make(160,0,0));
+  lv_obj_set_style_local_line_width(lmeter, LV_LINEMETER_PART_MAIN, LV_STATE_DEFAULT, 2);
+  lv_obj_set_style_local_line_color(lmeter, LV_LINEMETER_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_SILVER);
+
+  lv_obj_set_size(lmeter, 200, 200);
   lv_obj_align(lmeter, nullptr, LV_ALIGN_CENTER, 0, 0);
 
 }
@@ -35,7 +31,7 @@ Meter::~Meter() {
 }
 
 bool Meter::Refresh() {
-  lv_lmeter_set_value(lmeter, value++);                       /*Set the current value*/
+  lv_linemeter_set_value(lmeter, value++);                       /*Set the current value*/
   if(value>=60) value = 0;
 
   return running;
diff --git a/src/displayapp/screens/Modal.cpp b/src/displayapp/screens/Modal.cpp
deleted file mode 100644
index 6d6768dc..00000000
--- a/src/displayapp/screens/Modal.cpp
+++ /dev/null
@@ -1,109 +0,0 @@
-#include "Modal.h"
-#include <lvgl/lvgl.h>
-#include "../DisplayApp.h"
-
-using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
-
-Modal::Modal(Pinetime::Applications::DisplayApp *app) : Screen(app), alertNotificationService(nullptr) {}
-
-Modal::~Modal() {
-  lv_obj_clean(lv_scr_act());
-}
-
-bool Modal::Refresh() {
-
-  return running;
-}
-
-bool Modal::OnButtonPushed() {
-  running = false;
-  return true;
-}
-
-void Modal::Hide() {
-  /* Delete the parent modal background */
-  lv_obj_del_async(lv_obj_get_parent(mbox));
-  mbox = NULL; /* happens before object is actually deleted! */
-  isVisible = false;
-}
-
-void Modal::mbox_event_cb(lv_obj_t *obj, lv_event_t evt) {
-  auto* m = static_cast<Modal *>(obj->user_data);
-  m->OnEvent(obj, evt);
-}
-
-void Modal::OnEvent(lv_obj_t *event_obj, lv_event_t evt) {
-  if(evt == LV_EVENT_DELETE && event_obj == mbox) {
-    Hide();
-  } else if(evt == LV_EVENT_VALUE_CHANGED) {
-    if(event_obj == mbox) {
-      if(strcmp(lv_mbox_get_active_btn_text(event_obj), this->positiveButton.c_str()) == 0) {
-        if(alertNotificationService != nullptr) {
-          alertNotificationService->event(Pinetime::Controllers::AlertNotificationService::EVENT_ANSWER_CALL);
-        }
-      } else {
-        if(alertNotificationService != nullptr) {
-          alertNotificationService->event(Pinetime::Controllers::AlertNotificationService::EVENT_HANG_UP_CALL);
-        }
-      }
-      lv_mbox_start_auto_close(mbox, 0);
-    }
-  }
-}
-
-void Modal::NewNotification(Pinetime::Controllers::NotificationManager &notificationManager, Pinetime::Controllers::AlertNotificationService* alertService) {
-  alertNotificationService = alertService;
-  auto notification = notificationManager.GetLastNotification();
-  std::string msg;
-  if(notification.valid) {
-    switch(notification.category) {
-      case Pinetime::Controllers::NotificationManager::Categories::IncomingCall:
-        this->positiveButton = "Answer";
-        this->negativeButton = "Hang up"; 
-        msg += "Incoming call from:\n";
-        msg += notification.message.data();
-        break;
-      default:
-        this->positiveButton = "Ok";
-        this->negativeButton = "Cancel"; 
-        msg = notification.message.data();
-        break;
-    }
-
-    static const char *btns[] = {this->positiveButton.c_str(), this->negativeButton.c_str(), ""};
-    this->Show(msg.c_str(), btns);
-  }
-}
-
-void Modal::Show(const char* msg, const char *btns[]) {
-  if(isVisible) return;
-  isVisible = true;
-  lv_style_copy(&modal_style, &lv_style_plain_color);
-  modal_style.body.main_color = modal_style.body.grad_color = LV_COLOR_BLACK;
-  modal_style.body.opa = LV_OPA_50;
-
-  obj = lv_obj_create(lv_scr_act(), nullptr);
-  lv_obj_set_style(obj, &modal_style);
-  lv_obj_set_pos(obj, 0, 0);
-  lv_obj_set_size(obj, LV_HOR_RES, LV_VER_RES);
-  lv_obj_set_opa_scale_enable(obj, true); /* Enable opacity scaling for the animation */
-
-  /* Create the message box as a child of the modal background */
-  mbox = lv_mbox_create(obj, nullptr);
-  lv_mbox_add_btns(mbox, btns);
-  lv_mbox_set_text(mbox, msg);
-  lv_obj_align(mbox, nullptr, LV_ALIGN_CENTER, 0, 0);
-  lv_obj_set_event_cb(mbox, Modal::mbox_event_cb);
-
-  mbox->user_data = this;
-
-  /* Fade the message box in with an animation */
-  lv_anim_t a;
-  lv_anim_init(&a);
-  lv_anim_set_time(&a, 500, 0);
-  lv_anim_set_values(&a, LV_OPA_TRANSP, LV_OPA_COVER);
-  lv_anim_set_exec_cb(&a, obj, (lv_anim_exec_xcb_t)lv_obj_set_opa_scale);
-  lv_anim_create(&a);
-}
diff --git a/src/displayapp/screens/Modal.h b/src/displayapp/screens/Modal.h
deleted file mode 100644
index de7575a8..00000000
--- a/src/displayapp/screens/Modal.h
+++ /dev/null
@@ -1,45 +0,0 @@
-#pragma once
-
-#include "Screen.h"
-#include <lvgl/src/lv_core/lv_style.h>
-#include <lvgl/src/lv_core/lv_obj.h>
-#include <components/ble/NotificationManager.h>
-#include <components/ble/AlertNotificationService.h>
-
-namespace Pinetime {
-  namespace Applications {
-    namespace Screens {
-
-      class Modal : public Screen{
-        public:
-          Modal(DisplayApp* app);
-          ~Modal() override;
-
-
-          void NewNotification(Pinetime::Controllers::NotificationManager &notificationManager, Pinetime::Controllers::AlertNotificationService* alertService);
-          void Show(const char* msg, const char *btns[]);
-          void Hide();
-
-          bool Refresh() override;
-          bool OnButtonPushed() override;
-
-          static void mbox_event_cb(lv_obj_t *obj, lv_event_t evt);
-        private:
-          void OnEvent(lv_obj_t *event_obj, lv_event_t evt);
-
-          Pinetime::Controllers::AlertNotificationService* alertNotificationService = nullptr;
-
-          std::string positiveButton;
-          std::string negativeButton;
-
-          lv_style_t modal_style;
-          lv_obj_t *obj;
-          lv_obj_t *mbox;
-          lv_obj_t *info;
-          bool running = true;
-          bool isVisible = false;
-
-      };
-    }
-  }
-}
diff --git a/src/displayapp/screens/Music.cpp b/src/displayapp/screens/Music.cpp
index a5bff694..b68f3781 100644
--- a/src/displayapp/screens/Music.cpp
+++ b/src/displayapp/screens/Music.cpp
@@ -26,9 +26,6 @@
 
 using namespace Pinetime::Applications::Screens;
 
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
-
 static void event_handler(lv_obj_t *obj, lv_event_t event) {
   Music *screen = static_cast<Music *>(obj->user_data);
   screen->OnObjectEvent(obj, event);
diff --git a/src/displayapp/screens/Navigation.cpp b/src/displayapp/screens/Navigation.cpp
index 4b0e92c4..9fbcbe57 100644
--- a/src/displayapp/screens/Navigation.cpp
+++ b/src/displayapp/screens/Navigation.cpp
@@ -22,9 +22,6 @@
 
 using namespace Pinetime::Applications::Screens;
 
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
-
 /**
  * Set the pixel array to display by the image
  * This just calls lv_img_set_src but adds type safety
diff --git a/src/displayapp/screens/Notifications.cpp b/src/displayapp/screens/Notifications.cpp
index c09562f3..4219bac7 100644
--- a/src/displayapp/screens/Notifications.cpp
+++ b/src/displayapp/screens/Notifications.cpp
@@ -1,6 +1,7 @@
 #include "Notifications.h"
 #include <displayapp/DisplayApp.h>
 #include "components/ble/MusicService.h"
+#include "components/ble/AlertNotificationService.h"
 #include "Symbols.h"
 
 using namespace Pinetime::Applications::Screens;
@@ -35,14 +36,13 @@ Notifications::Notifications(DisplayApp *app,
   }
 
   if(mode == Modes::Preview) {
-    static lv_style_t style_line;
-    lv_style_copy(&style_line, &lv_style_plain);
-    style_line.line.color = LV_COLOR_WHITE;
-    style_line.line.width = 3;
-    style_line.line.rounded = 0;
 
     timeoutLine = lv_line_create(lv_scr_act(), nullptr);
-    lv_line_set_style(timeoutLine, LV_LINE_STYLE_MAIN, &style_line);
+
+    lv_obj_set_style_local_line_width(timeoutLine, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3);
+    lv_obj_set_style_local_line_color(timeoutLine, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_WHITE);
+    lv_obj_set_style_local_line_rounded(timeoutLine, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true);
+
     lv_line_set_points(timeoutLine, timeoutLinePoints, 2);
     timeoutTickCountStart = xTaskGetTickCount();
     timeoutTickCountEnd = timeoutTickCountStart + (5*1024);
@@ -134,13 +134,13 @@ bool Notifications::OnButtonPushed() {
 }
 
 namespace {
-  static void AcceptIncomingCallEventHandler(lv_obj_t *obj, lv_event_t event) {
-    auto* item = static_cast<Notifications::NotificationItem *>(obj->user_data);
+  static void AcceptIncomingCallEventHandler(lv_obj_t* obj, lv_event_t event) {
+    auto* item = static_cast<Notifications::NotificationItem*>(obj->user_data);
     item->OnAcceptIncomingCall(event);
   }
 
-  static void MuteIncomingCallEventHandler(lv_obj_t *obj, lv_event_t event) {
-    auto* item = static_cast<Notifications::NotificationItem *>(obj->user_data);
+  static void MuteIncomingCallEventHandler(lv_obj_t* obj, lv_event_t event) {
+    auto* item = static_cast<Notifications::NotificationItem*>(obj->user_data);
     item->OnMuteIncomingCall(event);
   }
 
@@ -150,128 +150,101 @@ namespace {
   }
 }
 
-Notifications::NotificationItem::NotificationItem(const char *title,
-                                                  const char *msg,
-                                                  uint8_t notifNr,
-                                                  Controllers::NotificationManager::Categories category,
-                                                  uint8_t notifNb,
-                                                  Modes mode,
-                                                  Pinetime::Controllers::AlertNotificationService& alertNotificationService)
-        : notifNr{notifNr}, notifNb{notifNb}, mode{mode}, alertNotificationService{alertNotificationService} {
-  container1 = lv_cont_create(lv_scr_act(), nullptr);
-  static lv_style_t contStyle;
-  lv_style_copy(&contStyle, lv_cont_get_style(container1, LV_CONT_STYLE_MAIN));
-  contStyle.body.padding.inner = 20;
-  lv_cont_set_style(container1, LV_CONT_STYLE_MAIN, &contStyle);
-  lv_obj_set_width(container1, LV_HOR_RES);
-  lv_obj_set_height(container1, LV_VER_RES);
-  lv_obj_set_pos(container1, 0, 0);
-  lv_cont_set_layout(container1, LV_LAYOUT_OFF);
-  lv_cont_set_fit2(container1, LV_FIT_FLOOD, LV_FIT_FLOOD);
-
-  t1 = lv_label_create(container1, nullptr);
-  static lv_style_t titleStyle;
-  static lv_style_t textStyle;
-  static lv_style_t bottomStyle;
-  lv_style_copy(&titleStyle, lv_label_get_style(t1, LV_LABEL_STYLE_MAIN));
-  lv_style_copy(&textStyle, lv_label_get_style(t1, LV_LABEL_STYLE_MAIN));
-  lv_style_copy(&bottomStyle, lv_label_get_style(t1, LV_LABEL_STYLE_MAIN));
-  titleStyle.body.padding.inner = 5;
-  titleStyle.body.grad_color = LV_COLOR_GRAY;
-  titleStyle.body.main_color = LV_COLOR_GRAY;
-  titleStyle.body.radius = 20;
-  textStyle.body.border.part = LV_BORDER_NONE;
-  textStyle.body.padding.inner = 5;
-
-  bottomStyle.body.main_color = LV_COLOR_GREEN;
-  bottomStyle.body.grad_color = LV_COLOR_GREEN;
-  bottomStyle.body.border.part = LV_BORDER_TOP;
-  bottomStyle.body.border.color = LV_COLOR_RED;
-
-  lv_label_set_style(t1, LV_LABEL_STYLE_MAIN, &titleStyle);
-  lv_label_set_long_mode(t1, LV_LABEL_LONG_BREAK);
-  lv_label_set_body_draw(t1, true);
-  lv_obj_set_width(t1, LV_HOR_RES - (titleStyle.body.padding.left + titleStyle.body.padding.right));
-  lv_label_set_text(t1, title);
-  static constexpr int16_t offscreenOffset = -20 ;
-  lv_obj_set_pos(t1, titleStyle.body.padding.left, offscreenOffset);
-
-  auto titleHeight = lv_obj_get_height(t1);
+  Notifications::NotificationItem::NotificationItem(const char *title,
+                                                    const char *msg,
+                                                    uint8_t notifNr,
+                                                    Controllers::NotificationManager::Categories category,
+                                                    uint8_t notifNb,
+                                                    Modes mode,
+                                                    Pinetime::Controllers::AlertNotificationService& alertNotificationService)
+    : notifNr{notifNr}, notifNb{notifNb}, mode{mode}, alertNotificationService{alertNotificationService} {
+
+  lv_obj_t* container1 = lv_cont_create(lv_scr_act(), NULL);
+
+  lv_obj_set_style_local_bg_color(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x222222));
+  lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
+  lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
+  lv_obj_set_style_local_border_width(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
+
+  lv_obj_set_pos(container1, 0, 50);
+  lv_obj_set_width(container1, 240);
+  lv_obj_set_height(container1, 190);
 
+  lv_cont_set_layout(container1, LV_LAYOUT_COLUMN_LEFT);
+
+  lv_obj_t* alert_count = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_text_fmt(alert_count, "%i/%i", notifNr, notifNb);
+  lv_obj_align(alert_count, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 16);
+
+  lv_obj_t* alert_type = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(alert_type, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x888888));
+  lv_label_set_text(alert_type, title);
+  lv_obj_align(alert_type, NULL, LV_ALIGN_IN_TOP_LEFT, 0, -4);
+
+  /////////
   switch(category) {
     default: {
-      l1 = lv_label_create(container1, nullptr);
-      lv_label_set_style(l1, LV_LABEL_STYLE_MAIN, &textStyle);
-      lv_obj_set_pos(l1, textStyle.body.padding.left,
-                     titleHeight + offscreenOffset + textStyle.body.padding.bottom +
-                     textStyle.body.padding.top);
-
-      lv_label_set_long_mode(l1, LV_LABEL_LONG_BREAK);
-      lv_label_set_body_draw(l1, true);
-      lv_obj_set_width(l1, LV_HOR_RES - (textStyle.body.padding.left + textStyle.body.padding.right));
-      lv_label_set_text(l1, msg);
+      lv_obj_t* alert_subject = lv_label_create(container1, nullptr);
+      lv_obj_set_style_local_text_color(alert_subject, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
+      lv_label_set_long_mode(alert_subject, LV_LABEL_LONG_BREAK);
+      lv_obj_set_width(alert_subject, LV_HOR_RES - 20);
+      lv_label_set_text(alert_subject, msg);
     }
     break;
     case Controllers::NotificationManager::Categories::IncomingCall: {
-      l1 = lv_label_create(container1, nullptr);
-      lv_label_set_style(l1, LV_LABEL_STYLE_MAIN, &textStyle);
-      lv_obj_set_pos(l1, textStyle.body.padding.left,
-                     titleHeight + offscreenOffset + textStyle.body.padding.bottom +
-                     textStyle.body.padding.top);
-
-      lv_label_set_long_mode(l1, LV_LABEL_LONG_BREAK);
-      lv_label_set_body_draw(l1, true);
-      lv_obj_set_width(l1, LV_HOR_RES - (textStyle.body.padding.left + textStyle.body.padding.right));
-      lv_label_set_text(l1, "Incoming call from ");
-      auto l1Height = lv_obj_get_height(l1);
-
-      l2 = lv_label_create(container1, nullptr);
-      lv_label_set_style(l2, LV_LABEL_STYLE_MAIN, &textStyle);
-      lv_obj_set_pos(l2, textStyle.body.padding.left,
-                     titleHeight + l1Height + offscreenOffset + (textStyle.body.padding.bottom*2) +
-                         (textStyle.body.padding.top*2));
-      lv_label_set_long_mode(l2, LV_LABEL_LONG_BREAK);
-      lv_label_set_body_draw(l2, true);
-      lv_obj_set_width(l2, LV_HOR_RES - (textStyle.body.padding.left + textStyle.body.padding.right));
-      lv_label_set_text(l2, msg);
-
-      bt_accept = lv_btn_create(container1, nullptr);
+      lv_obj_t* alert_subject = lv_label_create(container1, nullptr);
+      lv_obj_set_style_local_text_color(alert_subject, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
+      lv_label_set_long_mode(alert_subject, LV_LABEL_LONG_BREAK);
+      lv_obj_set_width(alert_subject, LV_HOR_RES - 20);
+      lv_label_set_text(alert_subject, "Incoming call from");
+
+      lv_obj_t* alert_caller = lv_label_create(container1, nullptr);
+      lv_obj_align(alert_caller, alert_subject, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
+      lv_label_set_long_mode(alert_caller, LV_LABEL_LONG_BREAK);
+      lv_obj_set_width(alert_caller, LV_HOR_RES - 20);
+      lv_label_set_text(alert_caller, msg);
+
+      lv_obj_t* callBtnContainer = lv_cont_create(container1, NULL);
+      lv_obj_set_width(callBtnContainer, 240);
+      lv_obj_set_height(callBtnContainer, 90);
+      lv_cont_set_layout(callBtnContainer, LV_LAYOUT_ROW_MID);
+
+      lv_obj_set_style_local_bg_color(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x222222));
+      lv_obj_set_style_local_pad_all(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
+      lv_obj_set_style_local_margin_top(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 40);
+      lv_obj_set_style_local_margin_left(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, -8);
+      lv_obj_set_style_local_pad_inner(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
+      lv_obj_set_style_local_border_width(callBtnContainer, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
+
+      bt_accept = lv_btn_create(callBtnContainer, nullptr);
       bt_accept->user_data = this;
       lv_obj_set_event_cb(bt_accept, AcceptIncomingCallEventHandler);
-      lv_obj_set_size(bt_accept, LV_HOR_RES / 3, 80);
-      lv_obj_align(bt_accept, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, -20);
+      lv_obj_set_size(bt_accept, (LV_HOR_RES / 3) - 5, 80);
       label_accept = lv_label_create(bt_accept, nullptr);
       lv_label_set_text(label_accept, Symbols::phone);
 
-      bt_reject = lv_btn_create(container1, nullptr);
+      bt_reject = lv_btn_create(callBtnContainer, nullptr);
       bt_reject->user_data = this;
       lv_obj_set_event_cb(bt_reject, RejectIncomingCallEventHandler);
-      lv_obj_set_size(bt_reject, LV_HOR_RES / 3, 80);
-      lv_obj_align(bt_reject, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 0, -20);
+      lv_obj_set_size(bt_reject, (LV_HOR_RES / 3) - 5, 80);
       label_reject = lv_label_create(bt_reject, nullptr);
       lv_label_set_text(label_reject, Symbols::phoneSlash);
 
-      bt_mute = lv_btn_create(container1, nullptr);
+      bt_mute = lv_btn_create(callBtnContainer, nullptr);
       bt_mute->user_data = this;
       lv_obj_set_event_cb(bt_mute, MuteIncomingCallEventHandler);
-      lv_obj_set_size(bt_mute, LV_HOR_RES / 3, 80);
-      lv_obj_align(bt_mute, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 0, -20);
+      lv_obj_set_size(bt_mute, (LV_HOR_RES / 3) - 5, 80);
       label_mute = lv_label_create(bt_mute, nullptr);
       lv_label_set_text(label_mute, Symbols::volumMute);
     }
+    break;
   }
 
-  if(mode == Modes::Normal) {
-    if(notifNr < notifNb) {
-      bottomPlaceholder = lv_label_create(container1, nullptr);
-      lv_label_set_style(bottomPlaceholder, LV_LABEL_STYLE_MAIN, &titleStyle);
-      lv_label_set_long_mode(bottomPlaceholder, LV_LABEL_LONG_BREAK);
-      lv_label_set_body_draw(bottomPlaceholder, true);
-      lv_obj_set_width(bottomPlaceholder, LV_HOR_RES - (titleStyle.body.padding.left + titleStyle.body.padding.right));
-      lv_label_set_text(bottomPlaceholder, " ");
-      lv_obj_set_pos(bottomPlaceholder, titleStyle.body.padding.left, LV_VER_RES - 5);
-    }
-  }
+  lv_obj_t* backgroundLabel = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
+  lv_obj_set_size(backgroundLabel, 240, 240);
+  lv_obj_set_pos(backgroundLabel, 0, 0);
+  lv_label_set_text(backgroundLabel, "");
 }
 
 void Notifications::NotificationItem::OnAcceptIncomingCall(lv_event_t event) {
diff --git a/src/displayapp/screens/Notifications.h b/src/displayapp/screens/Notifications.h
index c40e7002..028a3780 100644
--- a/src/displayapp/screens/Notifications.h
+++ b/src/displayapp/screens/Notifications.h
@@ -68,7 +68,7 @@ namespace Pinetime {
           Controllers::NotificationManager::Notification::Id currentId;
           bool validDisplay = false;
 
-          lv_point_t timeoutLinePoints[2]  { {0, 237}, {239, 237} };
+          lv_point_t timeoutLinePoints[2]  { {0, 1}, {239, 1} };
           lv_obj_t* timeoutLine;
           uint32_t timeoutTickCountStart;
           uint32_t timeoutTickCountEnd;
diff --git a/src/displayapp/screens/Paddle.cpp b/src/displayapp/screens/Paddle.cpp
index 9a04b3b7..eda06547 100644
--- a/src/displayapp/screens/Paddle.cpp
+++ b/src/displayapp/screens/Paddle.cpp
@@ -3,8 +3,6 @@
 #include "../LittleVgl.h"
 
 using namespace Pinetime::Applications::Screens;
-extern lv_font_t jetbrains_mono_extrabold_compressed;
-extern lv_font_t jetbrains_mono_bold_20;
 
 namespace{
 const uint8_t paddle_map[] = {
diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp
index 214d2736..3b82b060 100644
--- a/src/displayapp/screens/Tile.cpp
+++ b/src/displayapp/screens/Tile.cpp
@@ -3,8 +3,6 @@
 
 using namespace Pinetime::Applications::Screens;
 
-extern lv_font_t jetbrains_mono_bold_20;
-
 static void event_handler(lv_obj_t * obj, lv_event_t event) {
   Tile* screen = static_cast<Tile *>(obj->user_data);
   uint32_t* eventDataPtr = (uint32_t*) lv_event_get_data();
@@ -23,8 +21,8 @@ Tile::Tile(DisplayApp* app, std::array<Applications, 6>& applications) : Screen(
     }
   }
 
-  btnm1 = lv_btnm_create(lv_scr_act(), nullptr);
-  lv_btnm_set_map(btnm1, btnm_map1);
+  btnm1 = lv_btnmatrix_create(lv_scr_act(), nullptr);
+  lv_btnmatrix_set_map(btnm1, btnm_map1);
   lv_obj_set_size(btnm1, LV_HOR_RES, LV_VER_RES);
 
   btnm1->user_data = this;
diff --git a/src/displayapp/screens/Tile.h b/src/displayapp/screens/Tile.h
index bf3f5d67..55ed45e3 100644
--- a/src/displayapp/screens/Tile.h
+++ b/src/displayapp/screens/Tile.h
@@ -3,7 +3,6 @@
 #include <lvgl/lvgl.h>
 #include <cstdint>
 #include <memory>
-#include "Modal.h"
 #include "Screen.h"
 #include "../Apps.h"
 
diff --git a/src/displayapp/screens/Twos.cpp b/src/displayapp/screens/Twos.cpp
index f36e35d4..b51a9ec6 100644
--- a/src/displayapp/screens/Twos.cpp
+++ b/src/displayapp/screens/Twos.cpp
@@ -8,43 +8,50 @@
 
 using namespace Pinetime::Applications::Screens;
 
-extern lv_font_t jetbrains_mono_bold_20;
-
 Twos::Twos(Pinetime::Applications::DisplayApp *app) : Screen(app) {
 
   // create styles to apply to different valued tiles
-  static lv_style_t style_cell1;
-  lv_style_copy(&style_cell1, &lv_style_plain);
-  style_cell1.body.border.width = 1;
-  style_cell1.text.font = &jetbrains_mono_bold_20;
-  style_cell1.body.padding.top = 16;
-  style_cell1.body.padding.bottom = 16;
-  style_cell1.body.main_color = LV_COLOR_MAKE(214, 197, 165);
-  style_cell1.body.grad_color = LV_COLOR_MAKE(214, 197, 165);
-  style_cell1.text.color = LV_COLOR_BLACK;  
+  lv_style_init(&style_cell1);
+  lv_style_init(&style_cell2);
+  lv_style_init(&style_cell3);
+  lv_style_init(&style_cell4);
+  lv_style_init(&style_cell5);
+
+  lv_style_set_border_color(&style_cell1, LV_STATE_DEFAULT, lv_color_hex(0xbbada0));
+  lv_style_set_border_width(&style_cell1, LV_STATE_DEFAULT, 3);
+  lv_style_set_bg_opa(&style_cell1, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_style_set_bg_color(&style_cell1, LV_STATE_DEFAULT, lv_color_hex(0xcdc0b4));
 
-  static lv_style_t style_cell2;
-  lv_style_copy(&style_cell2, &style_cell1);
-  style_cell2.body.main_color = LV_COLOR_MAKE(209, 146, 92);
-  style_cell2.body.grad_color = LV_COLOR_MAKE(209, 146, 92);
-  style_cell2.text.color = LV_COLOR_WHITE;
+  lv_style_set_border_color(&style_cell2, LV_STATE_DEFAULT, lv_color_hex(0xbbada0));
+  lv_style_set_border_width(&style_cell2, LV_STATE_DEFAULT, 3);
+  lv_style_set_bg_opa(&style_cell2, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_style_set_bg_color(&style_cell2, LV_STATE_DEFAULT, lv_color_hex(0xefdfc6));
 
-  static lv_style_t style_cell3;
-  lv_style_copy(&style_cell3, &style_cell2);
-  style_cell3.body.main_color = LV_COLOR_MAKE(246, 94, 59);
-  style_cell3.body.grad_color = LV_COLOR_MAKE(246, 94, 59);
+  lv_style_set_border_color(&style_cell3, LV_STATE_DEFAULT, lv_color_hex(0xbbada0));
+  lv_style_set_border_width(&style_cell3, LV_STATE_DEFAULT, 3);
+  lv_style_set_bg_opa(&style_cell3, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_style_set_bg_color(&style_cell3, LV_STATE_DEFAULT, lv_color_hex(0xef9263));
 
-  static lv_style_t style_cell4;
-  lv_style_copy(&style_cell4, &style_cell3);
-  style_cell4.body.main_color = LV_COLOR_MAKE(212, 170, 28);
-  style_cell4.body.grad_color = LV_COLOR_MAKE(212, 170, 28);
+  lv_style_set_border_color(&style_cell4, LV_STATE_DEFAULT, lv_color_hex(0xbbada0));
+  lv_style_set_border_width(&style_cell4, LV_STATE_DEFAULT, 3);
+  lv_style_set_bg_opa(&style_cell4, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_style_set_bg_color(&style_cell4, LV_STATE_DEFAULT, lv_color_hex(0xf76142));
+  //lv_style_set_text_color(&style_cell4, LV_STATE_DEFAULT, LV_COLOR_WHITE);
+
+  lv_style_set_border_color(&style_cell5, LV_STATE_DEFAULT, lv_color_hex(0xbbada0));
+  lv_style_set_border_width(&style_cell5, LV_STATE_DEFAULT, 3);
+  lv_style_set_bg_opa(&style_cell5, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_style_set_bg_color(&style_cell5, LV_STATE_DEFAULT, lv_color_hex(0x007dc5));
+  //lv_style_set_text_color(&style_cell5, LV_STATE_DEFAULT, LV_COLOR_WHITE);
 
   // format grid display
-  gridDisplay = lv_table_create(lv_scr_act(), nullptr);
-  lv_table_set_style(gridDisplay, LV_TABLE_STYLE_CELL1, &style_cell1);
-  lv_table_set_style(gridDisplay, LV_TABLE_STYLE_CELL2, &style_cell2);
-  lv_table_set_style(gridDisplay, LV_TABLE_STYLE_CELL3, &style_cell3);
-  lv_table_set_style(gridDisplay, LV_TABLE_STYLE_CELL4, &style_cell4);
+  
+  gridDisplay = lv_table_create(lv_scr_act(), nullptr);  
+  lv_obj_add_style(gridDisplay, LV_TABLE_PART_CELL1, &style_cell1);
+  lv_obj_add_style(gridDisplay, LV_TABLE_PART_CELL2, &style_cell2);
+  lv_obj_add_style(gridDisplay, LV_TABLE_PART_CELL3, &style_cell3);
+  lv_obj_add_style(gridDisplay, LV_TABLE_PART_CELL4, &style_cell4);
+  lv_obj_add_style(gridDisplay, LV_TABLE_PART_CELL4 + 1, &style_cell5);
   lv_table_set_col_cnt(gridDisplay, 4);
   lv_table_set_row_cnt(gridDisplay, 4);
   lv_table_set_col_width(gridDisplay, 0, LV_HOR_RES/4);
@@ -53,11 +60,13 @@ Twos::Twos(Pinetime::Applications::DisplayApp *app) : Screen(app) {
   lv_table_set_col_width(gridDisplay, 3, LV_HOR_RES/4);
   lv_obj_align(gridDisplay, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, 0);
 
+  lv_obj_clean_style_list(gridDisplay, LV_TABLE_PART_BG);
+
   // initialize grid
   for(int row = 0; row < 4; row++) {
     for(int col = 0; col < 4; col++) {
       grid[row][col].value = 0;
-      lv_table_set_cell_type(gridDisplay, row, col, 2);
+      lv_table_set_cell_type(gridDisplay, row, col, 1);
       lv_table_set_cell_align(gridDisplay, row, col, LV_LABEL_ALIGN_CENTER);
     }
   }
@@ -68,11 +77,23 @@ Twos::Twos(Pinetime::Applications::DisplayApp *app) : Screen(app) {
   scoreText = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_width(scoreText, LV_HOR_RES);
   lv_label_set_align(scoreText, LV_ALIGN_IN_LEFT_MID);
-  lv_obj_align(scoreText, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0);
-  lv_label_set_text(scoreText, ("Score: " + std::to_string(score)).c_str());
+  lv_obj_align(scoreText, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 10);
+  lv_label_set_recolor(scoreText, true);
+  lv_label_set_text_fmt(scoreText, "Score #FFFF00 %i#", score);
+
+  lv_obj_t * backgroundLabel = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
+  lv_obj_set_size(backgroundLabel, 240, 240);
+  lv_obj_set_pos(backgroundLabel, 0, 0);
+  lv_label_set_text(backgroundLabel, "");
 }
 
 Twos::~Twos() {
+  lv_style_reset(&style_cell1);
+  lv_style_reset(&style_cell2);
+  lv_style_reset(&style_cell3);
+  lv_style_reset(&style_cell4);
+  lv_style_reset(&style_cell5);
   lv_obj_clean(lv_scr_act());
 }
 
@@ -117,7 +138,7 @@ bool Twos::tryMerge(Tile grid[][4], int &newRow, int &newCol, int oldRow, int ol
         unsigned int newVal = grid[oldRow][oldCol].value *= 2;
         grid[newRow][newCol].value = newVal;
         score += newVal;
-        lv_label_set_text(scoreText, ("Score: " + std::to_string(score)).c_str());
+        lv_label_set_text_fmt(scoreText, "Score #FFFF00 %i#", score);
         grid[oldRow][oldCol].value = 0;
         grid[newRow][newCol].merged = true;
         return true;
@@ -250,20 +271,22 @@ void Twos::updateGridDisplay(Tile grid[][4]) {
       }
       switch (grid[row][col].value) {
         case 0:
+          lv_table_set_cell_type(gridDisplay, row, col, 1);
+          break;
         case 2:
         case 4:
-          lv_table_set_cell_type(gridDisplay, row, col, 1);
+          lv_table_set_cell_type(gridDisplay, row, col, 2);
           break;
         case 8:
         case 16:
-          lv_table_set_cell_type(gridDisplay, row, col, 2);
+          lv_table_set_cell_type(gridDisplay, row, col, 3);
           break;
         case 32:
         case 64:
-          lv_table_set_cell_type(gridDisplay, row, col, 3);
+          lv_table_set_cell_type(gridDisplay, row, col, 4);
           break;
         default:
-          lv_table_set_cell_type(gridDisplay, row, col, 4);
+          lv_table_set_cell_type(gridDisplay, row, col, 5);
           break;
       }
     }
diff --git a/src/displayapp/screens/Twos.h b/src/displayapp/screens/Twos.h
index ad80ca15..ec021971 100644
--- a/src/displayapp/screens/Twos.h
+++ b/src/displayapp/screens/Twos.h
@@ -19,6 +19,13 @@ namespace Pinetime {
           bool OnTouchEvent(TouchEvents event) override;
 
         private:
+
+          lv_style_t style_cell1;
+          lv_style_t style_cell2;
+          lv_style_t style_cell3;
+          lv_style_t style_cell4;
+          lv_style_t style_cell5;
+          
           bool running = true;
           lv_obj_t *scoreText;
           lv_obj_t *gridDisplay;