diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint
index a9fe4872..82e9a303 100644
--- a/rog-control-center/ui/main_window.slint
+++ b/rog-control-center/ui/main_window.slint
@@ -21,7 +21,7 @@ export component MainWindow inherits Window {
     title: "ROG Control";
     always-on-top: true;
     default-font-family: "Noto Sans";
-    default-font-size: 13px;
+    default-font-size: 14px;
     default-font-weight: 400;
     icon: @image-url("../data/rog-control-center.png");
     in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
diff --git a/rog-control-center/ui/pages/aura.slint b/rog-control-center/ui/pages/aura.slint
index 71cb5281..dd5d3373 100644
--- a/rog-control-center/ui/pages/aura.slint
+++ b/rog-control-center/ui/pages/aura.slint
@@ -53,6 +53,7 @@ export component PageAura inherits Rectangle {
                 min-height: 220px;
                 max-height: 400px;
                 HorizontalLayout {
+                    padding-top: 5px;
                     spacing: 10px;
                     VerticalBox {
                         Text {
@@ -205,6 +206,7 @@ export component PageAura inherits Rectangle {
     }
 
     if root.show_aura_power && AuraPageData.device_type == AuraDevType.New: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
@@ -245,7 +247,7 @@ export component PageAura inherits Rectangle {
                 x: root.width - self.width - 6px;
                 y: 6px;
                 text: "X";
-                height: 40px;
+                height: 36px;
                 clicked => {
                     root.show_aura_power = false;
                     root.show_fade_cover = false;
@@ -255,6 +257,7 @@ export component PageAura inherits Rectangle {
     }
 
     if root.show_aura_power && AuraPageData.device_type == AuraDevType.Old: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
@@ -298,7 +301,7 @@ export component PageAura inherits Rectangle {
                 x: root.width - self.width - 6px;
                 y: 6px;
                 text: "X";
-                height: 40px;
+                height: 36px;
                 clicked => {
                     root.show_aura_power = false;
                     root.show_fade_cover = false;
diff --git a/rog-control-center/ui/pages/system.slint b/rog-control-center/ui/pages/system.slint
index 1e8a43d2..bcba6f6e 100644
--- a/rog-control-center/ui/pages/system.slint
+++ b/rog-control-center/ui/pages/system.slint
@@ -156,17 +156,17 @@ export component PageSystem inherits Rectangle {
     //padding: 8px;
     ScrollView {
         VerticalLayout {
-            padding: 10px;
-            spacing: 10px;
+            padding: 12px;
+            spacing: 8px;
             alignment: LayoutAlignment.start;
             Rectangle {
                 background: Palette.alternate-background;
-                border-color: Palette.accent-background;
-                border-width: 3px;
-                border-radius: 10px;
-                height: 40px;
+                border-color: Palette.border;
+                border-width: 1px;
+                border-radius: 2px;
+                height: 36px;
                 Text {
-                    font-size: 18px;
+                    font-size: 16px;
                     color: Palette.control-foreground;
                     horizontal-alignment: TextHorizontalAlignment.center;
                     text: @tr("Power settings");
@@ -212,11 +212,11 @@ export component PageSystem inherits Rectangle {
                     padding-left: 10px;
                     padding-right: 20px;
                     HorizontalLayout {
-                        width: 38%;
+                        width: 40%;
                         alignment: LayoutAlignment.space-between;
                         padding-right: 15px;
                         Text {
-                            font-size: 16px;
+                            font-size: 14px;
                             vertical-alignment: TextVerticalAlignment.center;
                             color: Palette.control-foreground;
                             text: @tr("Screenpad brightness");
@@ -240,7 +240,7 @@ export component PageSystem inherits Rectangle {
 
                     HorizontalLayout {
                     width: 20%;
-                    padding-left: 10px;
+                    padding-left: 14px;
                         alignment: LayoutAlignment.stretch;
                         Switch {
                             text: @tr("Sync with primary");
@@ -255,12 +255,12 @@ export component PageSystem inherits Rectangle {
 
             Rectangle {
                 background: Palette.alternate-background;
-                border-color: Palette.accent-background;
-                border-width: 3px;
-                border-radius: 10px;
-                height: 40px;
+                border-color: Palette.border;
+                border-width: 1px;
+                border-radius: 2px;
+                height: 36px;
                 Text {
-                    font-size: 18px;
+                    font-size: 16px;
                     color: Palette.control-foreground;
                     horizontal-alignment: TextHorizontalAlignment.center;
                     text: @tr("Armoury settings");
@@ -268,19 +268,21 @@ export component PageSystem inherits Rectangle {
             }
 
             if !SystemPageData.asus_armoury_loaded: Rectangle {
-                border-width: 3px;
-                border-color: red;
+                background: maroon;
+                // background: darkred;
                 max-height: 30px;
                 VerticalBox {
                     Text {
                         text: @tr("no_asus_armoury_driver_1" => "The asus-armoury driver is not loaded");
                         font-size: 16px;
+                        color: white;
                         horizontal-alignment: TextHorizontalAlignment.center;
                     }
 
                     Text {
                         text: @tr("no_asus_armoury_driver_2" => "For advanced features you will require a kernel with this driver added.");
                         font-size: 16px;
+                        color: white;
                         horizontal-alignment: TextHorizontalAlignment.center;
                     }
                 }
@@ -561,20 +563,22 @@ export component PageSystem inherits Rectangle {
     }
 
     if root.show_throttle_advanced: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
         ScrollView {
             VerticalLayout {
-                padding: 50px;
-                padding-top: 5px;
-                padding-bottom: 100px;
+                alignment: start;
+                padding: 5px;
+                padding-top: 15px;
                 spacing: 10px;
                 GroupBox {
                     VerticalBox {
+                        alignment: start;
                         spacing: 10px;
                         Text {
-                            font-size: 18px;
+                            font-size: 16px;
                             horizontal-alignment: TextHorizontalAlignment.center;
                             vertical-alignment: TextVerticalAlignment.center;
                             text: @tr("Energy Performance Preference linked to Throttle Policy");
@@ -622,9 +626,10 @@ export component PageSystem inherits Rectangle {
 
                 GroupBox {
                     VerticalBox {
+                        alignment: start;
                         spacing: 10px;
                         Text {
-                            font-size: 18px;
+                            font-size: 16px;
                             horizontal-alignment: TextHorizontalAlignment.center;
                             vertical-alignment: TextVerticalAlignment.center;
                             text: @tr("Throttle Policy for power state");
@@ -680,7 +685,7 @@ export component PageSystem inherits Rectangle {
             x: root.width - self.width - 6px;
             y: 6px;
             text: "X";
-            height: 40px;
+            height: 34px;
             clicked => {
                 root.show_throttle_advanced = false;
                 root.show_fade_cover = false;
diff --git a/rog-control-center/ui/widgets/aura_power.slint b/rog-control-center/ui/widgets/aura_power.slint
index a177db03..d084d682 100644
--- a/rog-control-center/ui/widgets/aura_power.slint
+++ b/rog-control-center/ui/widgets/aura_power.slint
@@ -4,8 +4,8 @@ import { PowerZones } from "../types/aura_types.slint";
 
 export component AuraPowerGroup inherits Rectangle {
     min-width: row.min-width;
-    border-radius: 20px;
-    background: Palette.alternate-background;
+    // border-radius: 20px;
+    // background: Palette.alternate-background;
     opacity: 0.9;
     in-out property <string> group-title;
     in-out property <bool> boot_checked;
@@ -28,7 +28,7 @@ export component AuraPowerGroup inherits Rectangle {
         row := HorizontalBox {
             alignment: LayoutAlignment.center;
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Boot");
                 checked <=> root.boot_checked;
@@ -38,7 +38,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Awake");
                 checked <=> root.awake_checked;
@@ -48,7 +48,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Sleep");
                 checked <=> root.sleep_checked;
@@ -58,7 +58,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Shutdown");
                 checked <=> root.shutdown_checked;
@@ -72,8 +72,8 @@ export component AuraPowerGroup inherits Rectangle {
 
 export component AuraPowerGroupOld inherits Rectangle {
     min-width: row.min-width;
-    border-radius: 20px;
-    background: Palette.alternate-background;
+    // border-radius: 20px;
+    // background: Palette.alternate-background;
     opacity: 0.9;
     in-out property <int> current_zone;
     in-out property <[int]> zones;
@@ -109,7 +109,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Boot");
                 checked <=> root.boot_checked;
@@ -119,7 +119,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Awake");
                 checked <=> root.awake_checked;
@@ -129,7 +129,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Sleep");
                 checked <=> root.sleep_checked;
diff --git a/rog-control-center/ui/widgets/colour_picker.slint b/rog-control-center/ui/widgets/colour_picker.slint
index 939f27eb..a053aabb 100644
--- a/rog-control-center/ui/widgets/colour_picker.slint
+++ b/rog-control-center/ui/widgets/colour_picker.slint
@@ -1,7 +1,7 @@
 import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
 
 export component ColourSlider inherits VerticalLayout {
-    spacing: 10px;
+    spacing: 12px;
     in-out property <bool> enabled;
     property <string> hex: "#FF0000";
     in-out property <float> c1value <=> c1.value;
@@ -102,9 +102,9 @@ export component ColourSlider inherits VerticalLayout {
         hex = set_hex_from_colour(final_colour);
     }
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 13 colours
         background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
@@ -127,9 +127,9 @@ export component ColourSlider inherits VerticalLayout {
     }
 
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 11 colours
             background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_saturation[0], base_saturation[1], base_saturation[2], base_saturation[3], base_saturation[4], base_saturation[5], base_saturation[6], base_saturation[7], base_saturation[8], base_saturation[9], base_saturation[10]);
@@ -151,9 +151,9 @@ export component ColourSlider inherits VerticalLayout {
     }
 
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 11 colours
         background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_value[0], base_value[1], base_value[2], base_value[3], base_value[4], base_value[5], base_value[6], base_value[7], base_value[8], base_value[9], base_value[10]);
@@ -191,8 +191,8 @@ export component ColourSlider inherits VerticalLayout {
 
         Rectangle {
             width: self.height;
-            border-width: 2px;
-            border-radius: 7px;
+            border-width: 1px;
+            border-radius: 3px;
             border-color: Palette.border;
             background <=> root.colourbox;
         }
diff --git a/rog-control-center/ui/widgets/common.slint b/rog-control-center/ui/widgets/common.slint
index 300c3bc0..746110f5 100644
--- a/rog-control-center/ui/widgets/common.slint
+++ b/rog-control-center/ui/widgets/common.slint
@@ -1,12 +1,12 @@
 import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
 
 export component RogItem inherits Rectangle {
-    background: Palette.control-background;
+    // background: Palette.control-background;
     border-color: Palette.border;
-    border-width: 3px;
-    border-radius: 10px;
-    min-height: 48px;
-    max-height: 56px;
+    border-width: 1px;
+    border-radius: 2px;
+    min-height: 44px;
+    max-height: 44px;
 }
 
 export component SystemSlider inherits RogItem {
@@ -30,14 +30,14 @@ export component SystemSlider inherits RogItem {
             HorizontalLayout {
                 spacing: 6px;
                 Text {
-                    font-size: 16px;
+                    font-size: 14px;
                     vertical-alignment: TextVerticalAlignment.center;
                     color: Palette.control-foreground;
                     text: root.text;
                 }
 
                 Text {
-                    font-size: 16px;
+                    font-size: 14px;
                     horizontal-alignment: TextHorizontalAlignment.right;
                     vertical-alignment: TextVerticalAlignment.center;
                     color: Palette.control-foreground;
@@ -47,7 +47,7 @@ export component SystemSlider inherits RogItem {
         }
 
         HorizontalBox {
-            padding-right: 20px;
+            padding-right: 10px;
             slider := Slider {
                 enabled: root.enabled;
                 maximum: root.maximum;
@@ -162,7 +162,7 @@ export component SystemToggle inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
@@ -193,7 +193,7 @@ export component SystemToggleInt inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
@@ -223,7 +223,7 @@ export component SystemToggleVert inherits RogItem {
         alignment: LayoutAlignment.space-around;
         padding-top: 8px;
         Text {
-            font-size: 16px;
+            font-size: 14px;
             vertical-alignment: TextVerticalAlignment.bottom;
             horizontal-alignment: TextHorizontalAlignment.center;
             color: Palette.control-foreground;
@@ -254,7 +254,7 @@ export component SystemDropdown inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint
index c7122dd8..48d16e01 100644
--- a/rog-control-center/ui/widgets/sidebar.slint
+++ b/rog-control-center/ui/widgets/sidebar.slint
@@ -41,7 +41,7 @@ component SideBarItem inherits Rectangle {
         label := Text {
             color: Palette.foreground;
             vertical-alignment: center;
-            font-size: 13px;
+            font-size: 14px;
         }
     }
 
@@ -58,7 +58,7 @@ export component SideBar inherits Rectangle {
     out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
 
     // The currently focused tab
-    width: 160px;
+    width: 180px;
     forward-focus: fs;
     accessible-role: tab;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;