diff --git a/.editorconfig b/.editorconfig
index ed6894e5..65adcbf7 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,6 +8,9 @@ indent_style = space
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.slint]
+indent_size = 4
+
 [*.md]
 trim_trailing_whitespace = false
 
diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint
index 0623c1dc..a9fe4872 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: 14px;
+    default-font-size: 13px;
     default-font-weight: 400;
     icon: @image-url("../data/rog-control-center.png");
     in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
@@ -47,12 +47,12 @@ export component MainWindow inherits Window {
     }
     min-height: AppSize.height;
     min-width: AppSize.width;
-    background: Colors.black;
+    background: Palette.alternate-background;
     HorizontalLayout {
         padding: 0px;
         VerticalLayout {
+            padding: 0px;
             side-bar := SideBar {
-                title: @tr("ROG");
                 model: [
                     @tr("Menu1" => "System Control"),
                     @tr("Menu2" => "Keyboard Aura"),
@@ -64,20 +64,12 @@ export component MainWindow inherits Window {
                 available: root.sidebar_items_avilable;
             }
 
-            Rectangle {
-                max-height: 40px;
+            Button {
+                height: 40px;
                 width: side-bar.width;
-                background: Palette.control-background;
-                Text {
-                    vertical-alignment: center;
-                    horizontal-alignment: center;
-                    text: @tr("Quit App");
-                }
-
-                TouchArea {
-                    clicked => {
-                        root.exit-app();
-                    }
+                text: @tr("Quit App");
+                clicked() => {
+                    root.exit-app();
                 }
             }
         }
@@ -190,7 +182,7 @@ export component MainWindow inherits Window {
         y: 0px;
         width: root.width;
         height: root.height;
-        
+
         //padding only has effect on layout elements
         //padding: 10px;
 
diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint
index b3574a3f..c7122dd8 100644
--- a/rog-control-center/ui/widgets/sidebar.slint
+++ b/rog-control-center/ui/widgets/sidebar.slint
@@ -26,24 +26,22 @@ component SideBarItem inherits Rectangle {
             state.opacity: 0.8;
         }
     ]
+
     state := Rectangle {
         opacity: 0;
-        border-width: 2px;
-        border-radius: 10px;
-        border-color: Palette.accent-background;
-        background: Palette.alternate-background;
+        background: Palette.selection-background;
         animate opacity { duration: 150ms; }
-        animate border-width { duration: 150ms; }
         height: l.preferred-height;
     }
 
     l := HorizontalBox {
+        x: 4px;
         y: (parent.height - self.height) / 2;
         spacing: 0px;
         label := Text {
             color: Palette.foreground;
             vertical-alignment: center;
-            font-size: 14px;
+            font-size: 13px;
         }
     }
 
@@ -56,7 +54,6 @@ component SideBarItem inherits Rectangle {
 export component SideBar inherits Rectangle {
     in property <[string]> model: [];
     in property <[bool]> available: [];
-    in property <string> title <=> label.text;
     out property <int> current-item: 0;
     out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
 
@@ -66,10 +63,7 @@ export component SideBar inherits Rectangle {
     accessible-role: tab;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
     Rectangle {
-        border-width: 2px;
-        border-color: Palette.accent-background;
-        border-radius: 0px;
-        background: Palette.background.darker(0.2);
+        background: Palette.alternate-background;
         fs := FocusScope {
             key-pressed(event) => {
                 if (event.text == "\n") {
@@ -102,10 +96,19 @@ export component SideBar inherits Rectangle {
 
     VerticalBox {
         spacing: 4px;
+        padding: 0px;
         alignment: start;
-        label := Text {
-            font-size: 16px;
+
+        Image {
+            height: 100px;
+            source: @image-url("../../data/rog-control-center.png");
             horizontal-alignment: center;
+            image-fit: contain;
+        }
+
+        Rectangle {
+            height: 1px;
+            background: Palette.border;
         }
 
         navigation := VerticalLayout {