diff --git a/ui/date-widget.slint b/ui/date-widget.slint
index 212f486..d11b03d 100644
--- a/ui/date-widget.slint
+++ b/ui/date-widget.slint
@@ -1,10 +1,17 @@
 export component DateWidget {
     in-out property <string> date_text;
+    // Colors
+    in property <color> icon_color: #ffffff;
+    in property <color> bg_normal: #00000000;
+    in property <color> bg_hover: #ffffff10;
+    in property <color> bg_clicked: #ffffff30;
 
     callback show_calendar();    // Callback to execute things from Rust, because Slint can't
     
     Rectangle {
-        background: touch_area.pressed ? #704a4a : touch_area.has-hover ? #4d8a7a : #6f6291; // Bg color based on click & hover  
+        background: touch_area.pressed ? bg_clicked
+                  : touch_area.has-hover ? bg_hover
+                  : bg_normal; // Bg color based on click & hover  
         border-radius: 3px;
 
         HorizontalLayout {
diff --git a/ui/square-icon-widget.slint b/ui/square-icon-widget.slint
index 0557114..b247e79 100644
--- a/ui/square-icon-widget.slint
+++ b/ui/square-icon-widget.slint
@@ -6,9 +6,9 @@ export component SquareIconWidget {
 
     // Colors
     in property <color> icon_color: #ffffff;
-    in property <color> bg_normal: #8e9162;
-    in property <color> bg_hover: #6d8a4d;
-    in property <color> bg_clicked: #4a5f70;
+    in property <color> bg_normal: #00000000;
+    in property <color> bg_hover: #ffffff10;
+    in property <color> bg_clicked: #ffffff30;
 
     // Badge
     in property <int> badge_count: 0;
diff --git a/ui/time-widget.slint b/ui/time-widget.slint
index 5aa7024..c16d571 100644
--- a/ui/time-widget.slint
+++ b/ui/time-widget.slint
@@ -1,10 +1,17 @@
 export component TimeWidget {
     in-out property <string> time_text;
+    // Colors
+    in property <color> icon_color: #ffffff;
+    in property <color> bg_normal: #00000000;
+    in property <color> bg_hover: #ffffff10;
+    in property <color> bg_clicked: #ffffff30;
 
     callback show_clock();    // Callback to execute things from Rust, because Slint can't
     
     Rectangle {
-        background: touch_area.pressed ? #555 : touch_area.has-hover ? #444 : #333; // Bg color based on click & hover  
+        background: touch_area.pressed ? bg_clicked
+                  : touch_area.has-hover ? bg_hover
+                  : bg_normal; // Bg color based on click & hover  
         border-radius: 3px;
 
         HorizontalLayout {
diff --git a/ui/topbar.slint b/ui/topbar.slint
index 455a5f5..4740c85 100644
--- a/ui/topbar.slint
+++ b/ui/topbar.slint
@@ -9,6 +9,7 @@ export component TopBar inherits Window {
     in property<int> bar_height;
     in property<int> def_font_size;
     in property<string> def_font_fam;
+    background: #00000000;
 
     // Time widget
     in-out property <string> time_text;
@@ -48,38 +49,38 @@ export component TopBar inherits Window {
     // Wifi widget
     in property <string> wifi_tooltip;      
     in property <string> wifi_icon;  
-    /*in property <color> wifi_icon_color: #ffffff;
-    in property <color> wifi_bg_normal: #8e9162;
-    in property <color> wifi_bg_hover: #6d8a4d;
-    in property <color> wifi_bg_clicked: #4a5f70;*/
+    /*in property <color> wifi_icon_color;
+    in property <color> wifi_bg_normal;
+    in property <color> wifi_bg_hover;
+    in property <color> wifi_bg_clicked;*/
     callback show_wifi();
 
     // Weather widget
     in property <string> weather_tooltip;      
     in property <string> weather_icon;  
-    /*in property <color> weather_icon_color: #ffffff;
-    in property <color> weather_bg_normal: #8e9162;
-    in property <color> weather_bg_hover: #6d8a4d;
-    in property <color> weather_bg_clicked: #4a5f70;*/
+    /*in property <color> weather_icon_color;
+    in property <color> weather_bg_normal;
+    in property <color> weather_bg_hover;
+    in property <color> weather_bg_clicked;*/
     callback show_weather();
 
     // Notifications widget
     in property <string> notif_tooltip;      
     in property <string> notif_icon: "󰂚";  
     in property <int> notif_count: 0;  
-    /*in property <color> notif_icon_color: #ffffff;
-    in property <color> notif_bg_normal: #8e9162;
-    in property <color> notif_bg_hover: #6d8a4d;
-    in property <color> notif_bg_clicked: #4a5f70;*/
+    /*in property <color> notif_icon_color;
+    in property <color> notif_bg_normal;
+    in property <color> notif_bg_hover;
+    in property <color> notif_bg_clicked;*/
     callback show_notif();
 
     // Power button
     in property <string> power_tooltip;      
     in property <string> power_icon: "";  
-    /*in property <color> power_icon_color: #ffffff;
-    in property <color> power_bg_normal: #8e9162;
-    in property <color> power_bg_hover: #6d8a4d;
-    in property <color> power_bg_clicked: #4a5f70;*/
+    /*in property <color> power_icon_color;
+    in property <color> power_bg_normal;
+    in property <color> power_bg_hover;
+    in property <color> power_bg_clicked;*/
     callback show_power();
 
     title: "chocobar";
@@ -97,7 +98,7 @@ export component TopBar inherits Window {
         y: 0px;
         width: 100%;
         height: 100%;
-        background: #999898a6;
+        background: rgba(128, 128, 128, 0.4);
         border-radius: 0px;
 
         HorizontalLayout {
@@ -105,7 +106,7 @@ export component TopBar inherits Window {
             y: 0px;
             width: 100%;
             height: 100%;
-            alignment: space-between;
+            //alignment: space-between;
             
             // Left side
             Rectangle {
@@ -115,12 +116,12 @@ export component TopBar inherits Window {
             
             // Middle
             Rectangle {
-                background: #779e5c7a;
+                background: #5d8b3c79;
             }  
             
             // Right side
             Rectangle {
-                background: #c2779a7a;
+                //background: #c2779a7a;
                 width: parent.width/3;
 
                 HorizontalLayout {