diff --git a/Bar/Bar.qml b/Bar/Bar.qml
index a7b8a45..b542def 100644
--- a/Bar/Bar.qml
+++ b/Bar/Bar.qml
@@ -48,7 +48,7 @@ Scope {
                         id: barBackground
 
                         width: parent.width
-                        height: 36
+                        height: 36 * Theme.uiScale
                         color: Theme.backgroundPrimary
                         anchors.top: parent.top
                         anchors.left: parent.left
@@ -59,8 +59,8 @@ Scope {
 
                         anchors.verticalCenter: barBackground.verticalCenter
                         anchors.left: barBackground.left
-                        anchors.leftMargin: 18
-                        spacing: 12
+                        anchors.leftMargin: 18 * Theme.uiScale
+                        spacing: 12 * Theme.uiScale
 
                         SystemInfo {
                             anchors.verticalCenter: parent.verticalCenter
@@ -93,8 +93,8 @@ Scope {
 
                         anchors.verticalCenter: barBackground.verticalCenter
                         anchors.right: barBackground.right
-                        anchors.rightMargin: 18
-                        spacing: 12
+                        anchors.rightMargin: 18 * Theme.uiScale
+                        spacing: 12 * Theme.uiScale
 
                         SystemTray {
                             id: systemTrayModule
diff --git a/Bar/Modules/ActiveWindow.qml b/Bar/Modules/ActiveWindow.qml
index e3d9023..206de29 100644
--- a/Bar/Modules/ActiveWindow.qml
+++ b/Bar/Modules/ActiveWindow.qml
@@ -17,7 +17,7 @@ PanelWindow {
     visible: Settings.settings.showActiveWindow && !activeWindowWrapper.finallyHidden 
     implicitHeight: activeWindowTitleContainer.height
     implicitWidth: 0
-    property int barHeight: 36
+    property int barHeight: 36 * Theme.uiScale
     color: "transparent"
 
     function getIcon() {
@@ -127,7 +127,7 @@ PanelWindow {
             Text {
                 id: activeWindowTitle
                 text: ToplevelManager?.activeToplevel?.title && ToplevelManager?.activeToplevel?.title.length > 60 ? ToplevelManager?.activeToplevel?.title.substring(0, 60) + "..." : ToplevelManager?.activeToplevel?.title || ""
-                font.pixelSize: 12
+                font.pixelSize: 12 * Theme.uiScale
                 color: Theme.textSecondary
                 anchors.left: icon.right
                 anchors.leftMargin: Settings.settings.showActiveWindowIcon ? 4 : 6
diff --git a/Bar/Modules/Applauncher.qml b/Bar/Modules/Applauncher.qml
index 086fef7..d62e300 100644
--- a/Bar/Modules/Applauncher.qml
+++ b/Bar/Modules/Applauncher.qml
@@ -532,7 +532,7 @@ PanelWithOverlay {
                             Text {
                                 text: "search"
                                 font.family: "Material Symbols Outlined"
-                                font.pixelSize: Theme.fontSizeHeader
+                                font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
                                 color: searchField.activeFocus ? Theme.accentPrimary : Theme.textSecondary
                                 verticalAlignment: Text.AlignVCenter
                                 Layout.alignment: Qt.AlignVCenter
@@ -545,7 +545,7 @@ PanelWithOverlay {
                                 placeholderTextColor: Theme.textSecondary
                                 background: null
                                 font.family: Theme.fontFamily
-                                font.pixelSize: Theme.fontSizeBody
+                                font.pixelSize: Theme.fontSizeBody * Theme.uiScale
                                 Layout.fillWidth: true
                                 Layout.alignment: Qt.AlignVCenter
                                 onTextChanged: root.updateFilter()
@@ -689,7 +689,7 @@ PanelWithOverlay {
                                             visible: !modelData.isCalculator && !modelData.isClipboard && !modelData.isCommand && !parent.iconLoaded && modelData.type !== 'image'
                                             text: "broken_image"
                                             font.family: "Material Symbols Outlined"
-                                            font.pixelSize: Theme.fontSizeHeader
+                                            font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
                                             color: Theme.accentPrimary
                                         }
                                     }
@@ -702,7 +702,7 @@ PanelWithOverlay {
                                             text: modelData.name
                                             color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textPrimary)
                                             font.family: Theme.fontFamily
-                                            font.pixelSize: Theme.fontSizeSmall
+                                            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
                                             font.bold: hovered || isSelected
                                             verticalAlignment: Text.AlignVCenter
                                             elide: Text.ElideRight
@@ -716,7 +716,7 @@ PanelWithOverlay {
                                                   (modelData.comment || modelData.genericName || "No description available")
                                             color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textSecondary : Theme.textSecondary)
                                             font.family: Theme.fontFamily
-                                            font.pixelSize: Theme.fontSizeCaption
+                                            font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
                                             font.italic: !(modelData.comment || modelData.genericName)
                                             opacity: modelData.isClipboard ? 0.8 : modelData.isCommand ? 0.9 : ((modelData.comment || modelData.genericName) ? 1.0 : 0.6)
                                             elide: Text.ElideRight
@@ -734,7 +734,7 @@ PanelWithOverlay {
                                     Text {
                                         text: modelData.isCalculator ? "content_copy" : "chevron_right"
                                         font.family: "Material Symbols Outlined"
-                                        font.pixelSize: Theme.fontSizeBody
+                                        font.pixelSize: Theme.fontSizeBody * Theme.uiScale
                                         color: (hovered || isSelected)
                                             ? Theme.onAccent
                                             : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textSecondary)
@@ -818,7 +818,7 @@ PanelWithOverlay {
                                         anchors.centerIn: parent
                                         text: "star"
                                         font.family: "Material Symbols Outlined"
-                                        font.pixelSize: Theme.fontSizeSmall
+                                        font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
                                         color: (parent.MouseArea.containsMouse || hovered || isSelected)
                                             ? Theme.onAccent
                                             : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textDisabled)
diff --git a/Bar/Modules/AudioDeviceSelector.qml b/Bar/Modules/AudioDeviceSelector.qml
index 5af3ffa..590a82c 100644
--- a/Bar/Modules/AudioDeviceSelector.qml
+++ b/Bar/Modules/AudioDeviceSelector.qml
@@ -155,7 +155,7 @@ PanelWithOverlay {
                                 Text {
                                     text: "volume_up"
                                     font.family: "Material Symbols Outlined"
-                                    font.pixelSize: 16
+                                    font.pixelSize: 16 * Theme.uiScale
                                     color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
                                     Layout.alignment: Qt.AlignVCenter
                                 }
@@ -168,7 +168,7 @@ PanelWithOverlay {
                                     Text {
                                         text: modelData.nickname || modelData.description || modelData.name
                                         font.bold: true
-                                        font.pixelSize: 12
+                                        font.pixelSize: 12 * Theme.uiScale
                                         color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
                                         elide: Text.ElideRight
                                         maximumLineCount: 1
@@ -177,7 +177,7 @@ PanelWithOverlay {
 
                                     Text {
                                         text: modelData.description !== modelData.nickname ? modelData.description : ""
-                                        font.pixelSize: 10
+                                        font.pixelSize: 10 * Theme.uiScale
                                         color: Theme.textSecondary
                                         elide: Text.ElideRight
                                         maximumLineCount: 1
@@ -200,7 +200,7 @@ PanelWithOverlay {
                                         anchors.centerIn: parent
                                         text: "Set"
                                         color: Theme.onAccent
-                                        font.pixelSize: 10
+                                        font.pixelSize: 10 * Theme.uiScale
                                         font.bold: true
                                     }
 
@@ -216,7 +216,7 @@ PanelWithOverlay {
                                     text: "(Current)"
                                     visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
                                     color: Theme.accentPrimary
-                                    font.pixelSize: 10
+                                    font.pixelSize: 10 * Theme.uiScale
                                     Layout.alignment: Qt.AlignVCenter
                                 }
 
@@ -267,7 +267,7 @@ PanelWithOverlay {
                                 Text {
                                     text: "mic"
                                     font.family: "Material Symbols Outlined"
-                                    font.pixelSize: 16
+                                    font.pixelSize: 16 * Theme.uiScale
                                     color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
                                     Layout.alignment: Qt.AlignVCenter
                                 }
@@ -280,7 +280,7 @@ PanelWithOverlay {
                                     Text {
                                         text: modelData.nickname || modelData.description || modelData.name
                                         font.bold: true
-                                        font.pixelSize: 12
+                                        font.pixelSize: 12 * Theme.uiScale
                                         color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
                                         elide: Text.ElideRight
                                         maximumLineCount: 1
@@ -289,7 +289,7 @@ PanelWithOverlay {
 
                                     Text {
                                         text: modelData.description !== modelData.nickname ? modelData.description : ""
-                                        font.pixelSize: 10
+                                        font.pixelSize: 10 * Theme.uiScale
                                         color: Theme.textSecondary
                                         elide: Text.ElideRight
                                         maximumLineCount: 1
@@ -312,7 +312,7 @@ PanelWithOverlay {
                                         anchors.centerIn: parent
                                         text: "Set"
                                         color: Theme.onAccent
-                                        font.pixelSize: 10
+                                        font.pixelSize: 10 * Theme.uiScale
                                         font.bold: true
                                     }
 
@@ -328,7 +328,7 @@ PanelWithOverlay {
                                     text: "(Current)"
                                     visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
                                     color: Theme.accentPrimary
-                                    font.pixelSize: 10
+                                    font.pixelSize: 10 * Theme.uiScale
                                     Layout.alignment: Qt.AlignVCenter
                                 }
 
diff --git a/Bar/Modules/Bluetooth.qml b/Bar/Modules/Bluetooth.qml
index e8ae996..fda61ec 100644
--- a/Bar/Modules/Bluetooth.qml
+++ b/Bar/Modules/Bluetooth.qml
@@ -45,7 +45,7 @@ Item {
                 }
             }
             font.family: mouseAreaBluetooth.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
-            font.pixelSize: 16
+            font.pixelSize: 16 * Theme.uiScale
             color: mouseAreaBluetooth.containsMouse ? Theme.accentPrimary : Theme.textPrimary
         }
 
@@ -125,13 +125,13 @@ Item {
                         Text {
                             text: "bluetooth"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.accentPrimary
                         }
 
                         Text {
                             text: "Bluetooth Devices"
-                            font.pixelSize: 18
+                            font.pixelSize: 18 * Theme.uiScale
                             font.bold: true
                             color: Theme.textPrimary
                             Layout.fillWidth: true
@@ -180,7 +180,7 @@ Item {
                                     Text {
                                         text: modelData.connected ? "bluetooth" : "bluetooth_disabled"
                                         font.family: "Material Symbols Outlined"
-                                        font.pixelSize: 18
+                                        font.pixelSize: 18 * Theme.uiScale
                                         color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
                                     }
 
@@ -199,7 +199,7 @@ Item {
                                                 return deviceName;
                                             }
                                             color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary)
-                                            font.pixelSize: 14
+                                            font.pixelSize: 14 * Theme.uiScale
                                             elide: Text.ElideRight
                                             Layout.fillWidth: true
                                         }
@@ -217,7 +217,7 @@ Item {
                                                 }
                                             }
                                             color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
-                                            font.pixelSize: 11
+                                            font.pixelSize: 11 * Theme.uiScale
                                             elide: Text.ElideRight
                                             Layout.fillWidth: true
                                         }
@@ -265,7 +265,7 @@ Item {
 
                         Text {
                             text: "Scanning for devices..."
-                            font.pixelSize: 12
+                            font.pixelSize: 12 * Theme.uiScale
                             color: Theme.textSecondary
                         }
 
diff --git a/Bar/Modules/Calendar.qml b/Bar/Modules/Calendar.qml
index 9e9d106..baf7f9f 100644
--- a/Bar/Modules/Calendar.qml
+++ b/Bar/Modules/Calendar.qml
@@ -52,7 +52,7 @@ PanelWithOverlay {
                     text: calendar.title
                     color: Theme.textPrimary
                     opacity: 0.7
-                    font.pixelSize: 13
+                    font.pixelSize: 13 * Theme.uiScale
                     font.family: Theme.fontFamily
                     font.bold: true
                 }
@@ -78,7 +78,7 @@ PanelWithOverlay {
                     text: shortName
                     color: Theme.textPrimary
                     opacity: 0.8
-                    font.pixelSize: 13
+                    font.pixelSize: 13 * Theme.uiScale
                     font.family: Theme.fontFamily
                     font.bold: true
                     horizontalAlignment: Text.AlignHCenter
@@ -161,7 +161,7 @@ PanelWithOverlay {
                         text: model.day
                         color: model.today ? Theme.onAccent : Theme.textPrimary
                         opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.family: Theme.fontFamily
                         font.bold: model.today ? true : false
                     }
diff --git a/Bar/Modules/ClockWidget.qml b/Bar/Modules/ClockWidget.qml
index eba2afb..a539f45 100644
--- a/Bar/Modules/ClockWidget.qml
+++ b/Bar/Modules/ClockWidget.qml
@@ -15,7 +15,7 @@ Rectangle {
         text: Time.time
         font.family: Theme.fontFamily
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSizeSmall
+        font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
         color: Theme.textPrimary
         anchors.centerIn: parent
     }
diff --git a/Bar/Modules/CustomTrayMenu.qml b/Bar/Modules/CustomTrayMenu.qml
index a64ac7b..9a994e3 100644
--- a/Bar/Modules/CustomTrayMenu.qml
+++ b/Bar/Modules/CustomTrayMenu.qml
@@ -128,7 +128,7 @@ PopupWindow {
                         color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
                         text: modelData?.text ?? "";
                         font.family: Theme.fontFamily;
-                        font.pixelSize: Theme.fontSizeSmall;
+                        font.pixelSize: Theme.fontSizeSmall * Theme.uiScale;
                         verticalAlignment: Text.AlignVCenter;
                         elide: Text.ElideRight;
                     }
@@ -145,7 +145,7 @@ PopupWindow {
                         // Material Symbols Outlined chevron right for submenu
                         text: modelData?.hasChildren ? "menu" : "";
                         font.family: "Material Symbols Outlined";
-                        font.pixelSize: 18;
+                        font.pixelSize: 18 * Theme.uiScale;
                         verticalAlignment: Text.AlignVCenter;
                         visible: modelData?.hasChildren ?? false;
                         color: Theme.textPrimary;
@@ -362,7 +362,7 @@ PopupWindow {
                                 color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
                                 text: modelData?.text ?? "";
                                 font.family: Theme.fontFamily;
-                                font.pixelSize: Theme.fontSizeSmall;
+                                font.pixelSize: Theme.fontSizeSmall * Theme.uiScale;
                                 verticalAlignment: Text.AlignVCenter;
                                 elide: Text.ElideRight;
                             }
@@ -378,7 +378,7 @@ PopupWindow {
                             Text {
                                 text: modelData?.hasChildren ? "\uE5CC" : "";
                                 font.family: "Material Symbols Outlined";
-                                font.pixelSize: 18;
+                                font.pixelSize: 18 * Theme.uiScale;
                                 verticalAlignment: Text.AlignVCenter;
                                 visible: modelData?.hasChildren ?? false;
                                 color: Theme.textPrimary;
diff --git a/Bar/Modules/Media.qml b/Bar/Modules/Media.qml
index f2dbd1f..1aa46ab 100644
--- a/Bar/Modules/Media.qml
+++ b/Bar/Modules/Media.qml
@@ -10,7 +10,7 @@ import qs.Components
 Item {
     id: mediaControl
     width: visible ? mediaRow.width : 0
-    height: 36
+    height: 36 * Theme.uiScale
     visible: Settings.settings.showMediaInBar && MusicManager.currentPlayer
 
     RowLayout {
@@ -20,8 +20,8 @@ Item {
 
         Item {
             id: albumArtContainer
-            width: 24
-            height: 24
+            width: 24 * Theme.uiScale
+            height: 24 * Theme.uiScale
             Layout.alignment: Qt.AlignVCenter
 
             // Circular spectrum visualizer
@@ -29,8 +29,8 @@ Item {
                 id: spectrum
                 values: MusicManager.cavaValues
                 anchors.centerIn: parent
-                innerRadius: 10
-                outerRadius: 18
+                innerRadius: 10 * Theme.uiScale
+                outerRadius: 18 * Theme.uiScale
                 fillColor: Theme.accentPrimary
                 strokeColor: Theme.accentPrimary
                 strokeWidth: 0
@@ -40,10 +40,10 @@ Item {
             // Album art image
             Rectangle {
                 id: albumArtwork
-                width: 20
-                height: 20
+                width: 20 * Theme.uiScale
+                height: 20 * Theme.uiScale
                 anchors.centerIn: parent
-                radius: 12 // circle
+                radius: 12 * Theme.uiScale // circle
                 color: Qt.darker(Theme.surface, 1.1)
                 border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
                 border.width: 1
@@ -79,7 +79,7 @@ Item {
                     anchors.centerIn: parent
                     text: "music_note"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: 14
+                    font.pixelSize: 14 * Theme.uiScale
                     color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4)
                     visible: !albumArt.visible
                 }
@@ -96,7 +96,7 @@ Item {
                         anchors.centerIn: parent
                         text: MusicManager.isPlaying ? "pause" : "play_arrow"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 14
+                        font.pixelSize: 14 * Theme.uiScale
                         color: "white"
                     }
                 }
@@ -117,7 +117,7 @@ Item {
             text: MusicManager.trackTitle + " - " + MusicManager.trackArtist
             color: Theme.textPrimary
             font.family: Theme.fontFamily
-            font.pixelSize: 12
+            font.pixelSize: 12 * Theme.uiScale
             elide: Text.ElideRight
             Layout.maximumWidth: 300
             Layout.alignment: Qt.AlignVCenter
diff --git a/Bar/Modules/SettingsButton.qml b/Bar/Modules/SettingsButton.qml
index 28aafab..97f46c5 100644
--- a/Bar/Modules/SettingsButton.qml
+++ b/Bar/Modules/SettingsButton.qml
@@ -21,7 +21,7 @@ Item {
             anchors.centerIn: parent
             text: "settings"
             font.family: "Material Symbols Outlined"
-            font.pixelSize: 16
+            font.pixelSize: 16 * Theme.uiScale
             color: mouseArea.containsMouse ? Theme.accentPrimary : Theme.textPrimary
         }
 
diff --git a/Bar/Modules/SystemInfo.qml b/Bar/Modules/SystemInfo.qml
index 110deb1..3361f94 100644
--- a/Bar/Modules/SystemInfo.qml
+++ b/Bar/Modules/SystemInfo.qml
@@ -17,7 +17,7 @@ Row {
         Text {
             id: cpuUsageIcon
             font.family: "Material Symbols Outlined"
-            font.pixelSize: Theme.fontSizeBody
+            font.pixelSize: Theme.fontSizeBody * Theme.uiScale
             text: "speed"
             verticalAlignment: Text.AlignVCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -27,7 +27,7 @@ Row {
         Text {
             id: cpuUsageText
             font.family: Theme.fontFamily
-            font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
             color: Theme.textPrimary
             text: Sysinfo.cpuUsageStr
             anchors.verticalCenter: parent.verticalCenter
@@ -41,7 +41,7 @@ Row {
         spacing: 3
         Text {
             font.family: "Material Symbols Outlined"
-            font.pixelSize: Theme.fontSizeBody
+            font.pixelSize: Theme.fontSizeBody * Theme.uiScale
             text: "thermometer"
             verticalAlignment: Text.AlignVCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -50,7 +50,7 @@ Row {
 
         Text {
             font.family: Theme.fontFamily
-            font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
             color: Theme.textPrimary
             text: Sysinfo.cpuTempStr
             anchors.verticalCenter: parent.verticalCenter
@@ -64,7 +64,7 @@ Row {
         spacing: 3
         Text {
             font.family: "Material Symbols Outlined"
-            font.pixelSize: Theme.fontSizeBody
+            font.pixelSize: Theme.fontSizeBody * Theme.uiScale
             text: "memory"
             color: Theme.accentPrimary
             verticalAlignment: Text.AlignVCenter
@@ -73,7 +73,7 @@ Row {
 
         Text {
             font.family: Theme.fontFamily
-            font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
             color: Theme.textPrimary
             text: Sysinfo.memoryUsageStr
             anchors.verticalCenter: parent.verticalCenter
diff --git a/Bar/Modules/SystemTray.qml b/Bar/Modules/SystemTray.qml
index 7db68bf..50afb04 100644
--- a/Bar/Modules/SystemTray.qml
+++ b/Bar/Modules/SystemTray.qml
@@ -21,8 +21,8 @@ Row {
     Repeater {
         model: systemTray.items
         delegate: Item {
-            width: 24
-            height: 24
+            width: 24 * Theme.uiScale
+            height: 24 * Theme.uiScale
             // Hide Spotify icon, or adjust to your liking
             visible: modelData && modelData.id !== "spotify"
             property bool isHovered: trayMouseArea.containsMouse
@@ -47,17 +47,17 @@ Row {
 
             Rectangle {
                 anchors.centerIn: parent
-                width: 16
-                height: 16
-                radius: 6
+                width: 16 * Theme.uiScale
+                height: 16 * Theme.uiScale
+                radius: 6 * Theme.uiScale
                 color: "transparent"
                 clip: true
 
                 IconImage {
                     id: trayIcon
                     anchors.centerIn: parent
-                    width: 16
-                    height: 16
+                    width: 16 * Theme.uiScale
+                    height: 16 * Theme.uiScale
                     smooth: false
                     asynchronous: true
                     backer.fillMode: Image.PreserveAspectFit
@@ -122,7 +122,7 @@ Row {
                         if (modelData.hasMenu && modelData.menu && trayMenu) {
                             // Anchor the menu to the tray icon item (parent) and position it below the icon
                             const menuX = (width / 2) - (trayMenu.width / 2);
-                            const menuY = height + 20;
+                            const menuY = height + 20 * Theme.uiScale;
                             trayMenu.menu = modelData.menu;
                             trayMenu.showAt(parent, menuX, menuY);
                         } else
diff --git a/Bar/Modules/Taskbar.qml b/Bar/Modules/Taskbar.qml
index 792babc..1440d51 100644
--- a/Bar/Modules/Taskbar.qml
+++ b/Bar/Modules/Taskbar.qml
@@ -83,7 +83,7 @@ Item {
                     visible: !appIcon.visible
                     text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?"
                     font.family: Theme.fontFamily
-                    font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375)
+                    font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375 * Theme.uiScale)
                     font.bold: true
                     color: appButton.isActive ? Theme.onAccent : Theme.textPrimary
                 }
diff --git a/Bar/Modules/Wifi.qml b/Bar/Modules/Wifi.qml
index 13918f5..cae7100 100644
--- a/Bar/Modules/Wifi.qml
+++ b/Bar/Modules/Wifi.qml
@@ -51,7 +51,7 @@ Item {
                 return connected ? network.signalIcon(parent.currentSignal) : "wifi_off"
             }
             font.family: mouseAreaWifi.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
-            font.pixelSize: 16
+            font.pixelSize: 16 * Theme.uiScale
             color: mouseAreaWifi.containsMouse ? Theme.accentPrimary : Theme.textPrimary
         }
 
@@ -120,13 +120,13 @@ Item {
                         Text {
                             text: "wifi"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.accentPrimary
                         }
 
                         Text {
                             text: "WiFi Networks"
-                            font.pixelSize: 18
+                            font.pixelSize: 18 * Theme.uiScale
                             font.bold: true
                             color: Theme.textPrimary
                             Layout.fillWidth: true
@@ -183,7 +183,7 @@ Item {
                                         Text {
                                             text: network.signalIcon(modelData.signal)
                                             font.family: "Material Symbols Outlined"
-                                            font.pixelSize: 18
+                                            font.pixelSize: 18 * Theme.uiScale
                                             color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
                                         }
 
@@ -194,7 +194,7 @@ Item {
                                             Text {
                                                 text: modelData.ssid || "Unknown Network"
                                                 color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary)
-                                                font.pixelSize: 14
+                                                font.pixelSize: 14 * Theme.uiScale
                                                 elide: Text.ElideRight
                                                 Layout.fillWidth: true
                                             }
@@ -202,7 +202,7 @@ Item {
                                             Text {
                                                 text: modelData.security && modelData.security !== "--" ? modelData.security : "Open"
                                                 color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
-                                                font.pixelSize: 11
+                                                font.pixelSize: 11 * Theme.uiScale
                                                 elide: Text.ElideRight
                                                 Layout.fillWidth: true
                                             }
@@ -211,7 +211,7 @@ Item {
                                                 visible: network.connectStatusSsid === modelData.ssid && network.connectStatus === "error" && network.connectError.length > 0
                                                 text: network.connectError
                                                 color: Theme.error
-                                                font.pixelSize: 11
+                                                font.pixelSize: 11 * Theme.uiScale
                                                 elide: Text.ElideRight
                                                 Layout.fillWidth: true
                                             }
@@ -234,7 +234,7 @@ Item {
                                                 visible: network.connectStatus === "success" && !network.connectingSsid
                                                 text: "check_circle"
                                                 font.family: "Material Symbols Outlined"
-                                                font.pixelSize: 18
+                                                font.pixelSize: 18 * Theme.uiScale
                                                 color: "#43a047"
                                                 anchors.centerIn: parent
                                             }
@@ -243,7 +243,7 @@ Item {
                                                 visible: network.connectStatus === "error" && !network.connectingSsid
                                                 text: "error"
                                                 font.family: "Material Symbols Outlined"
-                                                font.pixelSize: 18
+                                                font.pixelSize: 18 * Theme.uiScale
                                                 color: Theme.error
                                                 anchors.centerIn: parent
                                             }
@@ -253,7 +253,7 @@ Item {
                                             visible: modelData.connected
                                             text: "connected"
                                             color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
-                                            font.pixelSize: 11
+                                            font.pixelSize: 11 * Theme.uiScale
                                         }
                                     }
 
@@ -309,7 +309,7 @@ Item {
                                                     anchors.fill: parent
                                                     anchors.margins: 12
                                                     text: passwordInput
-                                                    font.pixelSize: 13
+                                                    font.pixelSize: 13 * Theme.uiScale
                                                     color: Theme.textPrimary
                                                     verticalAlignment: TextInput.AlignVCenter
                                                     clip: true
@@ -364,7 +364,7 @@ Item {
                                                 anchors.centerIn: parent
                                                 text: "Connect"
                                                 color: Theme.backgroundPrimary
-                                                font.pixelSize: 14
+                                                font.pixelSize: 14 * Theme.uiScale
                                                 font.bold: true
                                             }
                                         }
diff --git a/Bar/Modules/Workspace.qml b/Bar/Modules/Workspace.qml
index a658a6a..b9825b6 100644
--- a/Bar/Modules/Workspace.qml
+++ b/Bar/Modules/Workspace.qml
@@ -40,7 +40,7 @@ Item {
         return total;
     }
 
-    height: 36
+    height: 36 * Theme.uiScale
 
     Component.onCompleted: {
         localWorkspaces.clear();
@@ -115,14 +115,14 @@ Item {
 
     Rectangle {
         id: workspaceBackground
-        width: parent.width - 15
-        height: 26
+        width: parent.width - 15 * Theme.uiScale
+        height: 26 * Theme.uiScale
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        radius: 12
+        radius: 12 * Theme.uiScale
         color: Theme.surfaceVariant
         border.color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.1)
-        border.width: 1
+        border.width: 1 * Theme.uiScale
         layer.enabled: true
         layer.effect: MultiEffect {
             shadowColor: "black"
@@ -145,7 +145,7 @@ Item {
             model: localWorkspaces
             Item {
                 id: workspacePillContainer
-                height: 12
+                height: 12 * Theme.uiScale
                 width: {
                     if (model.isFocused)
                         return 44;
@@ -245,12 +245,12 @@ Item {
                 Rectangle {
                     id: pillBurst
                     anchors.centerIn: workspacePillContainer
-                    width: workspacePillContainer.width + 18 * root.masterProgress
-                    height: workspacePillContainer.height + 18 * root.masterProgress
+                    width: workspacePillContainer.width + 18 * root.masterProgress * Theme.uiScale
+                    height: workspacePillContainer.height + 18 * root.masterProgress * Theme.uiScale
                     radius: width / 2
                     color: "transparent"
                     border.color: root.effectColor
-                    border.width: 2 + 6 * (1.0 - root.masterProgress)
+                    border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.uiScale
                     opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0
                     visible: root.effectsActive && model.isFocused
                     z: 1
diff --git a/Components/Avatar.qml b/Components/Avatar.qml
index 3a369bd..b2788aa 100644
--- a/Components/Avatar.qml
+++ b/Components/Avatar.qml
@@ -43,7 +43,7 @@ Item {
         anchors.centerIn: parent
         text: "person"
         font.family: "Material Symbols Outlined"
-        font.pixelSize: 24
+        font.pixelSize: 24 * Theme.uiScale
         color: Theme.onAccent
         visible: Settings.settings.profileImage === undefined || Settings.settings.profileImage === ""
         z: 0
diff --git a/Components/CircularProgressBar.qml b/Components/CircularProgressBar.qml
index da03bfa..61ef17f 100644
--- a/Components/CircularProgressBar.qml
+++ b/Components/CircularProgressBar.qml
@@ -9,11 +9,11 @@ Rectangle {
     property int size: 80
     property color backgroundColor: Theme.surfaceVariant
     property color progressColor: Theme.accentPrimary
-    property int strokeWidth: 6
+    property int strokeWidth: 6 * Theme.uiScale
     property bool showText: true
     property string units: "%"
     property string text: Math.round(progress * 100) + units
-    property int textSize: 10
+    property int textSize: 10 * Theme.uiScale
     property color textColor: Theme.textPrimary
     
     // Notch properties
diff --git a/Components/CircularSpectrum.qml b/Components/CircularSpectrum.qml
index 634aefd..635f550 100644
--- a/Components/CircularSpectrum.qml
+++ b/Components/CircularSpectrum.qml
@@ -4,11 +4,11 @@ import qs.Settings
 
 Item {
     id: root
-    property int innerRadius: 34
-    property int outerRadius: 48
+    property int innerRadius: 34 * Theme.uiScale
+    property int outerRadius: 48 * Theme.uiScale
     property color fillColor: "#fff"
     property color strokeColor: "#fff"
-    property int strokeWidth: 0
+    property int strokeWidth: 0 * Theme.uiScale
     property var values: []
     property int usableOuter: 48
 
@@ -24,7 +24,7 @@ Item {
         Rectangle {
             property real value: root.values[index]
             property real angle: (index / root.values.length) * 360
-            width: Math.max(2, (root.innerRadius * 2 * Math.PI) / root.values.length - 4)
+            width: Math.max(2 * Theme.uiScale, (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * Theme.uiScale)
             height: Settings.settings.visualizerType === "diamond" ? value * 2 * (usableOuter - root.innerRadius) : value * (usableOuter - root.innerRadius)
             radius: width / 2
             color: root.fillColor
diff --git a/Components/Corners.qml b/Components/Corners.qml
index f41d14c..c8ac17e 100644
--- a/Components/Corners.qml
+++ b/Components/Corners.qml
@@ -6,11 +6,11 @@ Shape {
     id: root
     
     property string position: "topleft"  // Corner position: topleft/topright/bottomleft/bottomright
-    property real size: 1.0              // Scale multiplier for entire corner
+    property real size: 1.0 * Theme.uiScale              // Scale multiplier for entire corner
     property int concaveWidth: 100 * size
     property int concaveHeight: 60 * size
-    property int offsetX: -20
-    property int offsetY: -20
+    property int offsetX: -20 * Theme.uiScale
+    property int offsetY: -20 * Theme.uiScale
     property color fillColor: Theme.accentPrimary
     property int arcRadius: 20 * size
 
diff --git a/Components/IconButton.qml b/Components/IconButton.qml
index c6c0a85..6dc4b1a 100644
--- a/Components/IconButton.qml
+++ b/Components/IconButton.qml
@@ -19,7 +19,7 @@ MouseArea {
 
     Rectangle {
         anchors.fill: parent
-        radius: 8
+        radius: 8 * Theme.uiScale
         color: root.hovering ? Theme.accentPrimary : "transparent"
     }
     Text {
@@ -27,7 +27,7 @@ MouseArea {
         anchors.centerIn: parent
         text: root.icon
         font.family: "Material Symbols Outlined"
-        font.pixelSize: 24
+        font.pixelSize: 24 * Theme.uiScale
         color: root.hovering ? Theme.onAccent : Theme.textPrimary
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
diff --git a/Components/PillIndicator.qml b/Components/PillIndicator.qml
index afba173..addf5ec 100644
--- a/Components/PillIndicator.qml
+++ b/Components/PillIndicator.qml
@@ -13,8 +13,8 @@ Item {
     property color iconCircleColor: Theme.accentPrimary
     property color iconTextColor: Theme.backgroundPrimary
     property color collapsedIconColor: Theme.textPrimary
-    property int pillHeight: 22
-    property int iconSize: 22
+    property int pillHeight: 22 * Theme.uiScale
+    property int iconSize: 22 * Theme.uiScale
     property int pillPaddingHorizontal: 14
     property bool autoHide: false
 
@@ -47,7 +47,7 @@ Item {
             id: textItem
             anchors.centerIn: parent
             text: revealPill.text
-            font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
             font.family: Theme.fontFamily
             font.weight: Font.Bold
             color: textColor
@@ -89,7 +89,7 @@ Item {
         Text {
             anchors.centerIn: parent
             font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
-            font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
             text: revealPill.icon
             color: showPill ? iconTextColor : collapsedIconColor
         }
diff --git a/Components/Spinner.qml b/Components/Spinner.qml
index 9441c54..c902e17 100644
--- a/Components/Spinner.qml
+++ b/Components/Spinner.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import qs.Settings
 
 Item {
     id: root
@@ -6,7 +7,7 @@ Item {
     property bool running: false
     property color color: "white"
     property int size: 16
-    property int strokeWidth: 2
+    property int strokeWidth: 2 * Theme.uiScale
     property int duration: 1000
     
     implicitWidth: size
diff --git a/Components/StyledTooltip.qml b/Components/StyledTooltip.qml
index ae444e7..90b6948 100644
--- a/Components/StyledTooltip.qml
+++ b/Components/StyledTooltip.qml
@@ -33,8 +33,8 @@ Window {
     }
 
     function _showNow() {
-        width = Math.max(50, tooltipText.implicitWidth + 24)
-        height = Math.max(50, tooltipText.implicitHeight + 16)
+        width = Math.max(50 * Theme.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale)
+        height = Math.max(50 * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale)
 
         if (!targetItem) return;
 
@@ -75,10 +75,10 @@ Window {
 
     Rectangle {
         anchors.fill: parent
-        radius: 20
+        radius: 20 * Theme.uiScale
         color: Theme.backgroundTertiary || "#222"
         border.color: Theme.outline || "#444"
-        border.width: 1
+        border.width: 1 * Theme.uiScale
         opacity: 0.97
         z: 1
     }
@@ -88,7 +88,7 @@ Window {
         text: tooltipWindow.text
         color: Theme.textPrimary
         font.family: Theme.fontFamily
-        font.pixelSize: Theme.fontSizeSmall
+        font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
         anchors.centerIn: parent
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
@@ -105,7 +105,7 @@ Window {
     }
 
     onTextChanged: {
-        width = Math.max(minimumWidth, tooltipText.implicitWidth + 24);
-        height = Math.max(minimumHeight, tooltipText.implicitHeight + 16);
+        width = Math.max(minimumWidth * Theme.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale);
+        height = Math.max(minimumHeight * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale);
     }
 }
\ No newline at end of file
diff --git a/Components/Tabs.qml b/Components/Tabs.qml
index d3befea..319d2fe 100644
--- a/Components/Tabs.qml
+++ b/Components/Tabs.qml
@@ -17,8 +17,8 @@ Item {
             model: root.tabsModel
             delegate: Rectangle {
                 id: tabWrapper
-                implicitHeight: tab.height
-                implicitWidth: 56
+                implicitHeight: tab.height * Theme.uiScale
+                implicitWidth: 56 * Theme.uiScale
                 color: "transparent"
 
                 property bool hovered: false
@@ -48,7 +48,7 @@ Item {
                     Text {
                         text: modelData.icon
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 22
+                        font.pixelSize: 22 * Theme.uiScale
                         color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
                         Layout.alignment: Qt.AlignCenter
                     }
@@ -56,7 +56,7 @@ Item {
                     // Label
                     Text {
                         text: modelData.label
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         font.bold: index === root.currentIndex
                         color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
                         Layout.alignment: Qt.AlignCenter
@@ -64,9 +64,9 @@ Item {
 
                     // Underline for active tab
                     Rectangle {
-                        width: 24
-                        height: 2
-                        radius: 1
+                        width: 24 * Theme.uiScale
+                        height: 2 * Theme.uiScale
+                        radius: 1 * Theme.uiScale
                         color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : "transparent"
                         Layout.alignment: Qt.AlignCenter
                     }
diff --git a/README.md b/README.md
index 9f9e6a6..6713e84 100644
--- a/README.md
+++ b/README.md
@@ -226,4 +226,4 @@ Thank you to everyone who supports me and this project 💜!
 
 ## License
 
-This project is licensed under the terms of the [MIT License](./LICENSE).
+This project is licensed under the terms of the [MIT License](./LICENSE).
\ No newline at end of file
diff --git a/Settings/Theme.qml b/Settings/Theme.qml
index 74f3afc..531018c 100644
--- a/Settings/Theme.qml
+++ b/Settings/Theme.qml
@@ -8,6 +8,23 @@ import qs.Settings
 Singleton {
     id: root
 
+    // Design screen width
+    readonly property int designScreenWidth: 1920
+    
+    // Scaling dampening factor - reduces the scaling effect for higher resolutions
+    readonly property real scalingDampening: 0.2
+    
+    // Automatic scaling based on screen width
+    function screenWidthRatio() {
+        // Get the primary screen width
+        if (Quickshell.screens && Quickshell.screens.length > 0) {
+            var rawRatio = Quickshell.screens[0].width / designScreenWidth
+            // Apply dampening to reduce scaling for higher resolutions
+            return Math.min(2.0, 1.0 + (rawRatio - 1.0) * scalingDampening)
+        }
+        return 1.0
+    }
+
     function applyOpacity(color, opacity) {
         return color.replace("#", "#" + opacity);
     }
@@ -100,6 +117,9 @@ Singleton {
     property color shadow: applyOpacity(themeData.shadow, "B3")
     property color overlay: applyOpacity(themeData.overlay, "66")
 
+    // Global UI scale factor - automatically calculated based on screen width
+    property real uiScale: screenWidthRatio()
+    
     // Font Properties
     property string fontFamily: "Roboto"         // Family for all text
     
diff --git a/Widgets/Dock.qml b/Widgets/Dock.qml
index 94b69f3..c2375da 100644
--- a/Widgets/Dock.qml
+++ b/Widgets/Dock.qml
@@ -302,7 +302,7 @@ PanelWindow {
                             anchors.verticalCenter: parent.verticalCenter
                             text: "close"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -310,7 +310,7 @@ PanelWindow {
                             anchors.verticalCenter: parent.verticalCenter
                             text: "Close"
                             font.family: Theme.fontFamily
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: Theme.textPrimary
                         }
                     }
diff --git a/Widgets/LockScreen/BatteryCharge.qml b/Widgets/LockScreen/BatteryCharge.qml
index dd96c25..93100ac 100644
--- a/Widgets/LockScreen/BatteryCharge.qml
+++ b/Widgets/LockScreen/BatteryCharge.qml
@@ -58,7 +58,7 @@ Item {
         Text {
             text: batteryIcon()
             font.family: "Material Symbols Outlined"
-            font.pixelSize: 28
+            font.pixelSize: 28 * Theme.uiScale
             color: charging ? Theme.accentPrimary : Theme.textSecondary
             verticalAlignment: Text.AlignVBottom
         }
@@ -66,7 +66,7 @@ Item {
         Text {
             text: Math.round(percent) + "%"
             font.family: Theme.fontFamily
-            font.pixelSize: 18
+            font.pixelSize: 18 * Theme.uiScale
             color: Theme.textSecondary
             verticalAlignment: Text.AlignVBottom
         }
diff --git a/Widgets/LockScreen/LockScreen.qml b/Widgets/LockScreen/LockScreen.qml
index 2ed50b0..fde716e 100644
--- a/Widgets/LockScreen/LockScreen.qml
+++ b/Widgets/LockScreen/LockScreen.qml
@@ -152,21 +152,21 @@ WlSessionLock {
         ColumnLayout {
             anchors.centerIn: parent
             spacing: 30
-            width: Math.min(parent.width * 0.8, 400)
+            width: Math.min(parent.width * 0.8, 400 * Theme.uiScale)
 
             Rectangle {
                 Layout.alignment: Qt.AlignHCenter
-                width: 80
-                height: 80
-                radius: 40
+                width: 80 * Theme.uiScale
+                height: 80 * Theme.uiScale
+                radius: 40 * Theme.uiScale
                 color: Theme.accentPrimary
 
                 Rectangle {
                     anchors.fill: parent
                     color: "transparent"
-                    radius: 40
+                    radius: 40 * Theme.uiScale
                     border.color: Theme.accentPrimary
-                    border.width: 3
+                    border.width: 3 * Theme.uiScale
                     z: 2
                 }
 
@@ -183,28 +183,28 @@ WlSessionLock {
                 Layout.alignment: Qt.AlignHCenter
                 text: Quickshell.env("USER")
                 font.family: Theme.fontFamily
-                font.pixelSize: 24
+                font.pixelSize: 24 * Theme.uiScale
                 font.weight: Font.Medium
                 color: Theme.textPrimary
             }
 
             Rectangle {
                 Layout.fillWidth: true
-                height: 50
-                radius: 25
+                height: 50 * Theme.uiScale
+                radius: 25 * Theme.uiScale
                 color: Theme.surface
                 opacity: passwordInput.activeFocus ? 0.8 : 0.3
                 border.color: passwordInput.activeFocus ? Theme.accentPrimary : Theme.outline
-                border.width: 2
+                border.width: 2 * Theme.uiScale
 
                 TextInput {
                     id: passwordInput
                     anchors.fill: parent
-                    anchors.margins: 15
+                    anchors.margins: 15 * Theme.uiScale
                     verticalAlignment: TextInput.AlignVCenter
                     horizontalAlignment: TextInput.AlignHCenter
                     font.family: Theme.fontFamily
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textPrimary
                     echoMode: TextInput.Password
                     passwordCharacter: "●"
@@ -218,7 +218,7 @@ WlSessionLock {
                         text: "Enter password..."
                         color: Theme.textSecondary
                         font.family: Theme.fontFamily
-                        font.pixelSize: 16
+                        font.pixelSize: 16 * Theme.uiScale
                         visible: !passwordInput.text && !passwordInput.activeFocus
                     }
 
@@ -238,9 +238,9 @@ WlSessionLock {
                 id: errorMessageRect
                 Layout.alignment: Qt.AlignHCenter
                 width: parent.width * 0.8
-                height: 44
+                height: 44 * Theme.uiScale
                 color: Theme.overlay
-                radius: 20
+                radius: 20 * Theme.uiScale
                 visible: lock.errorMessage !== ""
 
                 Text {
@@ -248,7 +248,7 @@ WlSessionLock {
                     text: lock.errorMessage
                     color: Theme.error
                     font.family: Theme.fontFamily
-                    font.pixelSize: 14
+                    font.pixelSize: 14 * Theme.uiScale
                     opacity: 1
                     visible: lock.errorMessage !== ""
                 }
@@ -256,13 +256,13 @@ WlSessionLock {
 
             Rectangle {
                 Layout.alignment: Qt.AlignHCenter
-                width: 120
-                height: 44
-                radius: 20
+                width: 120 * Theme.uiScale
+                height: 44 * Theme.uiScale
+                radius: 20 * Theme.uiScale
                 opacity: unlockButtonArea.containsMouse ? 0.8 : 0.5
                 color: unlockButtonArea.containsMouse ? Theme.accentPrimary : Theme.surface
                 border.color: Theme.accentPrimary
-                border.width: 2
+                border.width: 2 * Theme.uiScale
                 enabled: !lock.authenticating
 
                 Text {
@@ -270,7 +270,7 @@ WlSessionLock {
                     anchors.centerIn: parent
                     text: lock.authenticating ? "..." : "Unlock"
                     font.family: Theme.fontFamily
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     font.bold: true
                     color: unlockButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
                 }
@@ -324,12 +324,12 @@ WlSessionLock {
         }
 
         Rectangle {
-            width: infoColumn.width + 32
-            height: infoColumn.height + 8
+            width: infoColumn.width + 32 * Theme.uiScale
+            height: infoColumn.height + 8 * Theme.uiScale
             color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
             anchors.horizontalCenter: parent.horizontalCenter
-            bottomLeftRadius: 20
-            bottomRightRadius: 20
+            bottomLeftRadius: 20 * Theme.uiScale
+            bottomRightRadius: 20 * Theme.uiScale
 
             ColumnLayout {
                 id: infoColumn
@@ -343,7 +343,7 @@ WlSessionLock {
                     id: timeText
                     text: Qt.formatDateTime(new Date(), "HH:mm")
                     font.family: Theme.fontFamily
-                    font.pixelSize: 48
+                    font.pixelSize: 48 * Theme.uiScale
                     font.bold: true
                     color: Theme.textPrimary
                     horizontalAlignment: Text.AlignHCenter
@@ -353,7 +353,7 @@ WlSessionLock {
                     id: dateText
                     text: Qt.formatDateTime(new Date(), "dddd, MMMM d")
                     font.family: Theme.fontFamily
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textSecondary
                     opacity: 0.8
                     horizontalAlignment: Text.AlignHCenter
@@ -369,7 +369,7 @@ WlSessionLock {
                     Text {
                         text: weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 28
+                        font.pixelSize: 28 * Theme.uiScale
                         color: Theme.accentPrimary
                         verticalAlignment: Text.AlignVCenter
                     }
@@ -377,7 +377,7 @@ WlSessionLock {
                     Text {
                         text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9 / 5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
                         font.family: Theme.fontFamily
-                        font.pixelSize: 18
+                        font.pixelSize: 18 * Theme.uiScale
                         color: Theme.textSecondary
                         verticalAlignment: Text.AlignVCenter
                     }
@@ -388,7 +388,7 @@ WlSessionLock {
                     color: Theme.error
                     visible: weatherError !== ""
                     font.family: Theme.fontFamily
-                    font.pixelSize: 10
+                    font.pixelSize: 10 * Theme.uiScale
                     horizontalAlignment: Text.AlignHCenter
                     Layout.alignment: Qt.AlignHCenter
                 }
@@ -430,12 +430,12 @@ WlSessionLock {
             spacing: 12
 
             Rectangle {
-                width: 48
-                height: 48
-                radius: 24
+                width: 48 * Theme.uiScale
+                height: 48 * Theme.uiScale
+                radius: 24 * Theme.uiScale
                 color: shutdownArea.containsMouse ? Theme.error : "transparent"
                 border.color: Theme.error
-                border.width: 1
+                border.width: 1 * Theme.uiScale
 
                 MouseArea {
                     id: shutdownArea
@@ -450,18 +450,18 @@ WlSessionLock {
                     anchors.centerIn: parent
                     text: "power_settings_new"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: 24
+                    font.pixelSize: 24 * Theme.uiScale
                     color: shutdownArea.containsMouse ? Theme.onAccent : Theme.error
                 }
             }
 
             Rectangle {
-                width: 48
-                height: 48
-                radius: 24
+                width: 48 * Theme.uiScale
+                height: 48 * Theme.uiScale
+                radius: 24 * Theme.uiScale
                 color: rebootArea.containsMouse ? Theme.accentPrimary : "transparent"
                 border.color: Theme.accentPrimary
-                border.width: 1
+                border.width: 1 * Theme.uiScale
 
                 MouseArea {
                     id: rebootArea
@@ -476,18 +476,18 @@ WlSessionLock {
                     anchors.centerIn: parent
                     text: "refresh"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: 24
+                    font.pixelSize: 24 * Theme.uiScale
                     color: rebootArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
                 }
             }
 
             Rectangle {
-                width: 48
-                height: 48
-                radius: 24
+                width: 48 * Theme.uiScale
+                height: 48 * Theme.uiScale
+                radius: 24 * Theme.uiScale
                 color: logoutArea.containsMouse ? Theme.accentSecondary : "transparent"
                 border.color: Theme.accentSecondary
-                border.width: 1
+                border.width: 1 * Theme.uiScale
 
                 MouseArea {
                     id: logoutArea
@@ -502,7 +502,7 @@ WlSessionLock {
                     anchors.centerIn: parent
                     text: "exit_to_app"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: 24
+                    font.pixelSize: 24 * Theme.uiScale
                     color: logoutArea.containsMouse ? Theme.onAccent : Theme.accentSecondary
                 }
             }
diff --git a/Widgets/Notification/NotificationIcon.qml b/Widgets/Notification/NotificationIcon.qml
index 0a9556c..586d977 100644
--- a/Widgets/Notification/NotificationIcon.qml
+++ b/Widgets/Notification/NotificationIcon.qml
@@ -42,7 +42,7 @@ Item {
                 }
             }
             font.family: mouseAreaBell.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
-            font.pixelSize: 16
+            font.pixelSize: 16 * Theme.uiScale
             font.weight: {
                 if (shell && shell.notificationHistoryWin && shell.notificationHistoryWin.hasUnread) {
                     return Font.Bold;
diff --git a/Widgets/SettingsWindow/SettingsWindow.qml b/Widgets/SettingsWindow/SettingsWindow.qml
index 309639c..625d579 100644
--- a/Widgets/SettingsWindow/SettingsWindow.qml
+++ b/Widgets/SettingsWindow/SettingsWindow.qml
@@ -148,8 +148,8 @@ PanelWithOverlay {
     Rectangle {
         id: settingsWindowRect
 
-        implicitWidth: Quickshell.screens.length > 0 ? Quickshell.screens[0].width * 2 / 3 : 600
-        implicitHeight: Quickshell.screens.length > 0 ? Quickshell.screens[0].height *  2 / 3 : 400
+        implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.uiScale : 600 * Theme.uiScale
+        implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.uiScale : 400 * Theme.uiScale
         visible: parent.visible
         color: "transparent"
         // Center the settings window on screen
@@ -160,14 +160,15 @@ PanelWithOverlay {
             anchors.fill: parent
         }
 
+        // Background rectangle
         Rectangle {
             id: background
 
             color: Theme.backgroundPrimary
             anchors.fill: parent
-            radius: 20
+            radius: 20 * Theme.uiScale
             border.color: Theme.outline
-            border.width: 1
+            border.width: 1 * Theme.uiScale
 
             MultiEffect {
                 source: background
@@ -184,10 +185,11 @@ PanelWithOverlay {
 
         Rectangle {
             id: settings
+            clip: true
 
             color: Theme.backgroundPrimary
-            topRightRadius: 20
-            bottomRightRadius: 20
+            topRightRadius: 20 * Theme.uiScale
+            bottomRightRadius: 20 * Theme.uiScale
 
             anchors {
                 left: tabs.right
@@ -197,285 +199,288 @@ PanelWithOverlay {
                 margins: 12
             }
 
-            Rectangle {
-                id: headerArea
+                Rectangle {
+                    id: headerArea
 
-                height: 48
-                color: "transparent"
+                    height: 48 * Theme.uiScale
+                    color: "transparent"
 
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                    margins: 16
-                }
-
-                RowLayout {
-                    anchors.fill: parent
-                    spacing: 12
-
-                    Text {
-                        id: tabName
-
-                        text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General")
-                        font.pixelSize: 18
-                        font.bold: true
-                        color: Theme.textPrimary
-                        Layout.fillWidth: true
+                    anchors {
+                        top: parent.top
+                        left: parent.left
+                        right: parent.right
+                        margins: 16
                     }
 
-                    // Wallpaper Selection Button (only visible on Wallpaper tab)
-                    Rectangle {
-                        width: 160
-                        height: 32
-                        radius: 16
-                        color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
-                        border.color: Theme.accentPrimary
-                        border.width: 1
-                        visible: activeTabIndex === 6 // Wallpaper tab index
-
-                        Row {
-                            anchors.centerIn: parent
-                            spacing: 6
-
-                            Text {
-                                text: "image"
-                                font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
-                                font.pixelSize: 16
-                                color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            Text {
-                                text: "Select Wallpaper"
-                                font.pixelSize: 13
-                                font.bold: true
-                                color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: wallpaperButtonArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                // Show the wallpaper selector
-                                wallpaperSelector.show();
-                            }
-                        }
-
-                    }
-
-                    Rectangle {
-                        width: 32
-                        height: 32
-                        radius: 16
-                        color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
-                        border.color: Theme.accentPrimary
-                        border.width: 1
+                    RowLayout {
+                        anchors.fill: parent
+                        spacing: 12 * Theme.uiScale
 
                         Text {
-                            anchors.centerIn: parent
-                            text: "close"
-                            font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
-                            font.pixelSize: 18
-                            color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
+                            id: tabName
+
+                            text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General")
+                            font.pixelSize: 18 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                            Layout.fillWidth: true
                         }
 
-                        MouseArea {
-                            id: closeButtonArea
+                        // Wallpaper Selection Button (only visible on Wallpaper tab)
+                        Rectangle {
+                            width: 160 * Theme.uiScale
+                            height: 32 * Theme.uiScale
+                            radius: 16 * Theme.uiScale
+                            color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
+                            border.color: Theme.accentPrimary
+                            border.width: 1 * Theme.uiScale
+                            visible: activeTabIndex === 6 // Wallpaper tab index
 
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: panelMain.dismiss()
-                        }
+                            Row {
+                                anchors.centerIn: parent
+                                spacing: 6 * Theme.uiScale
 
-                    }
-
-                }
-
-            }
-
-            Rectangle {
-                height: 1
-                color: Theme.outline
-                opacity: 0.3
-
-                anchors {
-                    top: headerArea.bottom
-                    left: parent.left
-                    right: parent.right
-                    margins: 16
-                }
-
-            }
-
-            Item {
-                id: settingsContainer
-
-                anchors {
-                    top: headerArea.bottom
-                    left: parent.left
-                    right: parent.right
-                    bottom: parent.bottom
-                    margins: 16
-                    topMargin: 32
-                }
-
-                // Simplified single loader approach
-                Loader {
-                    id: settingsLoader
-
-                    anchors.fill: parent
-                    sourceComponent: generalSettings
-                }
-
-                // Wallpaper Selector Component
-                WallpaperSelector {
-                    id: wallpaperSelector
-
-                    anchors.fill: parent
-                }
-
-            }
-
-        }
-
-        Rectangle {
-            id: tabs
-
-            color: Theme.surface
-            width: parent.width * 0.25
-            height: settingsWindowRect.height
-            topLeftRadius: 20
-            bottomLeftRadius: 20
-            border.color: Theme.outline
-            border.width: 1
-
-            Column {
-                width: parent.width
-                spacing: 0
-                topPadding: 8
-                bottomPadding: 8
-
-                Repeater {
-                    id: repeater
-
-                    model: [{
-                        "icon": "tune",
-                        "text": "General"
-                    }, {
-                        "icon": "space_dashboard",
-                        "text": "Bar"
-                    }, {
-                        "icon": "schedule",
-                        "text": "Time & Weather"
-                    }, {
-                        "icon": "photo_camera",
-                        "text": "Screen Recorder"
-                    }, {
-                        "icon": "wifi",
-                        "text": "Network"
-                    }, {
-                        "icon": "monitor",
-                        "text": "Display"
-                    }, {
-                        "icon": "wallpaper",
-                        "text": "Wallpaper"
-                    }, {
-                        "icon": "settings_suggest",
-                        "text": "Misc"
-                    }, {
-                        "icon": "info",
-                        "text": "About"
-                    }]
-
-                    delegate: Rectangle {
-                        width: tabs.width
-                        height: 48
-                        color: "transparent"
-
-                        RowLayout {
-                            anchors.fill: parent
-                            spacing: 8
-
-                            Rectangle {
-                                id: activeIndicator
-
-                                Layout.leftMargin: 8
-                                Layout.preferredWidth: 3
-                                Layout.preferredHeight: 24
-                                Layout.alignment: Qt.AlignVCenter
-                                radius: 2
-                                color: Theme.accentPrimary
-                                opacity: index === activeTabIndex ? 1 : 0
-
-                                Behavior on opacity {
-                                    NumberAnimation {
-                                        duration: 200
-                                    }
+                                Text {
+                                    text: "image"
+                                    font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
+                                    font.pixelSize: 16 * Theme.uiScale
+                                    color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
 
+                                Text {
+                                    text: "Select Wallpaper"
+                                    font.pixelSize: 13 * Theme.uiScale
+                                    font.bold: true
+                                    color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
+                                    anchors.verticalCenter: parent.verticalCenter
                                 }
 
                             }
 
-                            Label {
-                                id: icon
+                            MouseArea {
+                                id: wallpaperButtonArea
 
-                                text: modelData.icon
-                                font.family: "Material Symbols Outlined"
-                                font.pixelSize: 24
-                                color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
-                                opacity: index === activeTabIndex ? 1 : 0.8
-                                Layout.leftMargin: 20
-                                Layout.preferredWidth: 24
-                                Layout.preferredHeight: 24
-                                Layout.alignment: Qt.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                                verticalAlignment: Text.AlignVCenter
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    // Show the wallpaper selector
+                                    wallpaperSelector.show();
+                                }
                             }
 
-                            Label {
-                                id: label
-
-                                text: modelData.text
-                                font.pixelSize: 16
-                                color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
-                                font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
-                                Layout.fillWidth: true
-                                Layout.preferredHeight: 24
-                                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                                Layout.leftMargin: 4
-                                Layout.rightMargin: 16
-                                verticalAlignment: Text.AlignVCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: tabMouseArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                activeTabIndex = index;
-                                loadComponentForTab(index);
-                            }
                         }
 
                         Rectangle {
-                            width: parent.width
-                            height: 1
-                            color: Theme.outline
-                            opacity: 0.6
-                            visible: index < (repeater.count - 1)
-                            anchors.bottom: parent.bottom
+                            width: 32 * Theme.uiScale
+                            height: 32 * Theme.uiScale
+                            radius: 16 * Theme.uiScale
+                            color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
+                            border.color: Theme.accentPrimary
+                            border.width: 1 * Theme.uiScale
+
+                            Text {
+                                anchors.centerIn: parent
+                                text: "close"
+                                font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
+                                font.pixelSize: 18 * Theme.uiScale
+                                color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
+                            }
+
+                            MouseArea {
+                                id: closeButtonArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: panelMain.dismiss()
+                            }
+
+                        }
+
+                    }
+
+                }
+
+                Rectangle {
+                    height: 1 * Theme.uiScale
+                    color: Theme.outline
+                    opacity: 0.3
+
+                    anchors {
+                        top: headerArea.bottom
+                        left: parent.left
+                        right: parent.right
+                        margins: 16
+                    }
+
+                }
+
+                ColumnLayout {
+                    id: settingsContainer
+
+                    anchors {
+                        top: headerArea.bottom
+                        left: parent.left
+                        right: parent.right
+                        bottom: parent.bottom
+                        topMargin: 32
+                    }
+
+                    // Simplified single loader approach
+                    Loader {
+                        id: settingsLoader
+
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        sourceComponent: generalSettings
+                        active: true
+                    }
+
+                    // Wallpaper Selector Component
+                    WallpaperSelector {
+                        id: wallpaperSelector
+
+                        anchors.fill: parent
+                    }
+
+                }
+
+            }
+
+            Rectangle {
+                id: tabs
+
+                color: Theme.surface
+                width: parent.width * 0.25
+                height: settingsWindowRect.height
+                topLeftRadius: 20 * Theme.uiScale
+                bottomLeftRadius: 20 * Theme.uiScale
+                border.color: Theme.outline
+                border.width: 1 * Theme.uiScale
+
+                Column {
+                    width: parent.width
+                    spacing: 0 * Theme.uiScale
+                    topPadding: 8 * Theme.uiScale
+                    bottomPadding: 8 * Theme.uiScale
+
+                    Repeater {
+                        id: repeater
+
+                        model: [{
+                            "icon": "tune",
+                            "text": "General"
+                        }, {
+                            "icon": "space_dashboard",
+                            "text": "Bar"
+                        }, {
+                            "icon": "schedule",
+                            "text": "Time & Weather"
+                        }, {
+                            "icon": "photo_camera",
+                            "text": "Screen Recorder"
+                        }, {
+                            "icon": "wifi",
+                            "text": "Network"
+                        }, {
+                            "icon": "monitor",
+                            "text": "Display"
+                        }, {
+                            "icon": "wallpaper",
+                            "text": "Wallpaper"
+                        }, {
+                            "icon": "settings_suggest",
+                            "text": "Misc"
+                        }, {
+                            "icon": "info",
+                            "text": "About"
+                        }]
+
+                        delegate: Rectangle {
+                            width: tabs.width
+                            height: 48 * Theme.uiScale
+                            color: "transparent"
+
+                            RowLayout {
+                                anchors.fill: parent
+                                spacing: 8 * Theme.uiScale
+
+                                Rectangle {
+                                    id: activeIndicator
+
+                                    Layout.leftMargin: 8 * Theme.uiScale
+                                    Layout.preferredWidth: 3 * Theme.uiScale
+                                    Layout.preferredHeight: 24 * Theme.uiScale
+                                    Layout.alignment: Qt.AlignVCenter
+                                    radius: 2 * Theme.uiScale
+                                    color: Theme.accentPrimary
+                                    opacity: index === activeTabIndex ? 1 : 0
+
+                                    Behavior on opacity {
+                                        NumberAnimation {
+                                            duration: 200
+                                        }
+
+                                    }
+
+                                }
+
+                                Label {
+                                    id: icon
+
+                                    text: modelData.icon
+                                    font.family: "Material Symbols Outlined"
+                                    font.pixelSize: 24 * Theme.uiScale
+                                    color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
+                                    opacity: index === activeTabIndex ? 1 : 0.8
+                                    Layout.leftMargin: 20 * Theme.uiScale
+                                    Layout.preferredWidth: 24 * Theme.uiScale
+                                    Layout.preferredHeight: 24 * Theme.uiScale
+                                    Layout.alignment: Qt.AlignVCenter
+                                    horizontalAlignment: Text.AlignHCenter
+                                    verticalAlignment: Text.AlignVCenter
+                                }
+
+                                Label {
+                                    id: label
+
+                                    text: modelData.text
+                                    font.pixelSize: 16 * Theme.uiScale
+                                    color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
+                                    font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
+                                    Layout.fillWidth: true
+                                    Layout.preferredHeight: 24 * Theme.uiScale
+                                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                                    Layout.leftMargin: 4 * Theme.uiScale
+                                    Layout.rightMargin: 16 * Theme.uiScale
+                                    verticalAlignment: Text.AlignVCenter
+                                }
+
+                            }
+
+                            MouseArea {
+                                id: tabMouseArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    activeTabIndex = index;
+                                    loadComponentForTab(index);
+                                }
+                            }
+
+                            Rectangle {
+                                width: parent.width
+                                height: 1 * Theme.uiScale
+                                color: Theme.outline
+                                opacity: 0.6
+                                visible: index < (repeater.count - 1)
+                                anchors.bottom: parent.bottom
+                            }
+
                         }
 
                     }
@@ -487,5 +492,3 @@ PanelWithOverlay {
         }
 
     }
-
-}
diff --git a/Widgets/SettingsWindow/Tabs/About.qml b/Widgets/SettingsWindow/Tabs/About.qml
index cdcdc11..bb9bca7 100644
--- a/Widgets/SettingsWindow/Tabs/About.qml
+++ b/Widgets/SettingsWindow/Tabs/About.qml
@@ -147,14 +147,18 @@ Item {
 
     }
 
-    Item {
+    ScrollView {
         anchors.fill: parent
+        padding: 0
+        rightPadding: 12
+        clip: true
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AsNeeded
 
         ColumnLayout {
             id: mainLayout
 
-            anchors.left: parent.left
-            anchors.right: parent.right
+            width: parent.availableWidth
             anchors.top: parent.top
             spacing: 8
 
@@ -165,7 +169,7 @@ Item {
 
             Text {
                 text: "Noctalia"
-                font.pixelSize: 24
+                font.pixelSize: 24 * Theme.uiScale
                 font.bold: true
                 color: Theme.textPrimary
                 Layout.alignment: Qt.AlignCenter
@@ -179,28 +183,28 @@ Item {
 
                 Text {
                     text: "Latest Version:"
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textSecondary
                     Layout.alignment: Qt.AlignRight
                 }
 
                 Text {
                     text: root.latestVersion
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textPrimary
                     font.bold: true
                 }
 
                 Text {
                     text: "Installed Version:"
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textSecondary
                     Layout.alignment: Qt.AlignRight
                 }
 
                 Text {
                     text: root.currentVersion
-                    font.pixelSize: 16
+                    font.pixelSize: 16 * Theme.uiScale
                     color: Theme.textPrimary
                     font.bold: true
                 }
@@ -242,7 +246,7 @@ Item {
                     Text {
                         text: "system_update"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 18
+                        font.pixelSize: 18 * Theme.uiScale
                         color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
                     }
 
@@ -250,7 +254,7 @@ Item {
                         id: updateText
 
                         text: "Download latest release"
-                        font.pixelSize: 14
+                        font.pixelSize: 14 * Theme.uiScale
                         color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
                     }
 
@@ -271,7 +275,7 @@ Item {
 
             Text {
                 text: "Description something something <.< I hate writing text..."
-                font.pixelSize: 14
+                font.pixelSize: 14 * Theme.uiScale
                 color: Theme.textSecondary
                 Layout.alignment: Qt.AlignCenter
                 Layout.topMargin: 24
@@ -298,14 +302,14 @@ Item {
 
                     Text {
                         text: "Contributors"
-                        font.pixelSize: 18
+                        font.pixelSize: 18 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "(" + root.contributors.length + ")"
-                        font.pixelSize: 14
+                        font.pixelSize: 14 * Theme.uiScale
                         color: Theme.textSecondary
                     }
 
@@ -384,7 +388,7 @@ Item {
                                             anchors.centerIn: parent
                                             text: "person"
                                             font.family: "Material Symbols Outlined"
-                                            font.pixelSize: 24
+                                            font.pixelSize: 24 * Theme.uiScale
                                             color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
                                             visible: !avatarImage.source || avatarImage.status !== Image.Ready
                                         }
@@ -398,7 +402,7 @@ Item {
 
                                         Text {
                                             text: modelData.login || "Unknown"
-                                            font.pixelSize: 13
+                                            font.pixelSize: 13 * Theme.uiScale
                                             color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
                                             elide: Text.ElideRight
                                             Layout.fillWidth: true
@@ -406,7 +410,7 @@ Item {
 
                                         Text {
                                             text: (modelData.contributions || 0) + " commits"
-                                            font.pixelSize: 11
+                                            font.pixelSize: 11 * Theme.uiScale
                                             color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textSecondary
                                         }
 
diff --git a/Widgets/SettingsWindow/Tabs/Bar.qml b/Widgets/SettingsWindow/Tabs/Bar.qml
index 2148e16..874591e 100644
--- a/Widgets/SettingsWindow/Tabs/Bar.qml
+++ b/Widgets/SettingsWindow/Tabs/Bar.qml
@@ -4,377 +4,387 @@ import QtQuick.Layouts
 import qs.Settings
 import qs.Components
 
-ColumnLayout {
-    id: root
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
-
-    Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-    }
-
-
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    
     ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
-
-        Text {
-            text: "Elements"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
-        }
-
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Show Active Window Icon"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display the icon of the currently focused window in the bar"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
-
-                Rectangle {
-                    id: activeWindowIconSwitch
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: activeWindowIconThumb
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showActiveWindowIcon ? activeWindowIconSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon;
-                        }
-                    }
-                }
-            }
-        }
-
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Show Active Window"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display the title of the currently focused window below the bar"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
-
-                Rectangle {
-                    id: activeWindowSwitch
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: activeWindowThumb
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showActiveWindow ? activeWindowSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showActiveWindow = !Settings.settings.showActiveWindow;
-                        }
-                    }
-                }
-            }
-        }
-
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Show System Info"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display system information (CPU, RAM, etc.) in the bar"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
-
-                Rectangle {
-                    id: systemInfoSwitch
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: systemInfoThumb
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showSystemInfoInBar ? systemInfoSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar;
-                        }
-                    }
-                }
-            }
-        }
-
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Show Taskbar"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display a taskbar showing currently open windows"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
-
-                Rectangle {
-                    id: taskbarSwitch
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: taskbarThumb
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showTaskbar ? taskbarSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showTaskbar = !Settings.settings.showTaskbar;
-                        }
-                    }
-                }
-            }
-        }
-
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Show Media"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display media controls and information in the bar"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
-
-                Rectangle {
-                    id: mediaSwitch
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: mediaThumb
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showMediaInBar ? mediaSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    Item {
+        id: root
+        width: parent.availableWidth
+        spacing: 0
         Layout.fillWidth: true
         Layout.fillHeight: true
+
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 0
+        }
+
+
+        ColumnLayout {
+            spacing: 4
+            Layout.fillWidth: true
+
+            Text {
+                text: "Elements"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+                Layout.bottomMargin: 8
+            }
+
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Active Window Icon"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display the icon of the currently focused window in the bar"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    Rectangle {
+                        id: activeWindowIconSwitch
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: activeWindowIconThumb
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.showActiveWindowIcon ? activeWindowIconSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Active Window"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display the title of the currently focused window below the bar"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    Rectangle {
+                        id: activeWindowSwitch
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: activeWindowThumb
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.showActiveWindow ? activeWindowSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showActiveWindow = !Settings.settings.showActiveWindow;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show System Info"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display system information (CPU, RAM, etc.) in the bar"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    Rectangle {
+                        id: systemInfoSwitch
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: systemInfoThumb
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.showSystemInfoInBar ? systemInfoSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Taskbar"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display a taskbar showing currently open windows"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    Rectangle {
+                        id: taskbarSwitch
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: taskbarThumb
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.showTaskbar ? taskbarSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showTaskbar = !Settings.settings.showTaskbar;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Media"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display media controls and information in the bar"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    Rectangle {
+                        id: mediaSwitch
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: mediaThumb
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.showMediaInBar ? mediaSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
     }
 }
\ No newline at end of file
diff --git a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
index e8b9c8a..f4263ee 100644
--- a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
+++ b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
@@ -6,21 +6,21 @@ import qs.Components
 
 Rectangle {
     id: root
-    width: 64
-    height: 32
-    radius: 16
+    width: 64 * Theme.uiScale
+    height: 32 * Theme.uiScale
+    radius: 16 * Theme.uiScale
     color: Theme.surfaceVariant
     border.color: Theme.outline
-    border.width: 1
+    border.width: 1 * Theme.uiScale
 
     property bool useFahrenheit: Settings.settings.useFahrenheit
 
     
     Rectangle {
         id: slider
-        width: parent.width / 2 - 4
-        height: parent.height - 4
-        radius: 14
+        width: parent.width / 2 - 4 * Theme.uiScale
+        height: parent.height - 4 * Theme.uiScale
+        radius: 14 * Theme.uiScale
         color: Theme.accentPrimary
         x: 2 + (useFahrenheit ? parent.width / 2 : 0)
         y: 2
@@ -46,7 +46,7 @@ Rectangle {
             Text {
                 anchors.centerIn: parent
                 text: "°C"
-                font.pixelSize: 13
+                font.pixelSize: 13 * Theme.uiScale
                 font.bold: !useFahrenheit
                 color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary
                 
@@ -74,7 +74,7 @@ Rectangle {
             Text {
                 anchors.centerIn: parent
                 text: "°F"
-                font.pixelSize: 13
+                font.pixelSize: 13 * Theme.uiScale
                 font.bold: useFahrenheit
                 color: useFahrenheit ? Theme.onAccent : Theme.textPrimary
                 
diff --git a/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml b/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
index c1db484..9ccb6fb 100644
--- a/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
+++ b/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
@@ -58,7 +58,7 @@ Rectangle {
                         id: wallpaperGrid
 
                         anchors.fill: parent
-                        cellWidth: Math.max(120, (parent.width / 3) - 12)
+                        cellWidth: Math.max(120 * Theme.uiScale, (parent.width / 3) - 12 * Theme.uiScale)
                         cellHeight: cellWidth * 0.6
                         model: WallpaperManager.wallpaperList
                         cacheBuffer: 64
@@ -68,8 +68,8 @@ Rectangle {
                         bottomMargin: 8
 
                         delegate: Item {
-                            width: wallpaperGrid.cellWidth - 8
-                            height: wallpaperGrid.cellHeight - 8
+                            width: wallpaperGrid.cellWidth - 8 * Theme.uiScale
+                            height: wallpaperGrid.cellHeight - 8 * Theme.uiScale
 
                             Rectangle {
                                 id: wallpaperItem
@@ -77,9 +77,9 @@ Rectangle {
                                 anchors.fill: parent
                                 anchors.margins: 3
                                 color: Theme.surface
-                                radius: 12
+                                radius: 12 * Theme.uiScale
                                 border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
-                                border.width: 2
+                                border.width: 2 * Theme.uiScale
 
                                 Image {
                                     id: wallpaperImage
@@ -92,8 +92,8 @@ Rectangle {
                                     cache: true
                                     smooth: true
                                     mipmap: true
-                                    sourceSize.width: Math.min(width, 480)
-                                    sourceSize.height: Math.min(height, 270)
+                                    sourceSize.width: Math.min(width, 480 * Theme.uiScale)
+                                    sourceSize.height: Math.min(height, 270 * Theme.uiScale)
                                     opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0
                                     // Apply circular mask for rounded corners
                                     layer.enabled: true
@@ -123,7 +123,7 @@ Rectangle {
                                     Rectangle {
                                         width: wallpaperImage.width
                                         height: wallpaperImage.height
-                                        radius: 12
+                                        radius: 12 * Theme.uiScale
                                     }
 
                                 }
diff --git a/Widgets/SettingsWindow/Tabs/Display.qml b/Widgets/SettingsWindow/Tabs/Display.qml
index 8ed677c..bfe5aa6 100644
--- a/Widgets/SettingsWindow/Tabs/Display.qml
+++ b/Widgets/SettingsWindow/Tabs/Display.qml
@@ -5,361 +5,371 @@ import Quickshell
 import qs.Settings
 import qs.Components
 
-ColumnLayout {
-    id: root
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
-
-    // Get list of available monitors/screens
-    property var monitors: Quickshell.screens || []
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
     
-    // Sorted monitors by name
-    property var sortedMonitors: {
-        let sorted = [...monitors];
-        sorted.sort((a, b) => {
-            let nameA = a.name || "Unknown";
-            let nameB = b.name || "Unknown";
-            return nameA.localeCompare(nameB);
-        });
-        return sorted;
-    }
-
-    Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-    }
-
-
     ColumnLayout {
-        spacing: 12
-        Layout.fillWidth: true
+        id: root
+        width: parent.availableWidth
+        spacing: 0
+        anchors.top: parent.top
+        anchors.margins: 0
 
-        Text {
-            text: "Monitor Selection"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
+        // Get list of available monitors/screens
+        property var monitors: Quickshell.screens || []
+        
+        // Sorted monitors by name
+        property var sortedMonitors: {
+            let sorted = [...monitors];
+            sorted.sort((a, b) => {
+                let nameA = a.name || "Unknown";
+                let nameB = b.name || "Unknown";
+                return nameA.localeCompare(nameB);
+            });
+            return sorted;
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 0
         }
 
 
         ColumnLayout {
-            spacing: 8
+            spacing: 12
             Layout.fillWidth: true
 
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Bar Monitors"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Select which monitors to display the top panel/bar on"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-                }
+            Text {
+                text: "Monitor Selection"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+                Layout.bottomMargin: 8
             }
 
-    
-            Flow {
-                Layout.fillWidth: true
+
+            ColumnLayout {
                 spacing: 8
+                Layout.fillWidth: true
 
-                Repeater {
-                    model: root.sortedMonitors
-                    delegate: Rectangle {
-                        id: barCheckbox
-                        property bool isChecked: false
-                        
-                        Component.onCompleted: {
-                            // Initialize checkbox state from settings
-                            let monitors = Settings.settings.barMonitors || [];
-                            isChecked = monitors.includes(modelData.name);
-                        }
-                        
-                        width: checkboxContent.implicitWidth + 16
-                        height: 32
-                        radius: 16
-                        color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
-                        border.color: isChecked ? Theme.accentPrimary : Theme.outline
-                        border.width: 1
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
 
-                        RowLayout {
-                            id: checkboxContent
-                            anchors.centerIn: parent
-                            spacing: 6
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
 
-                            Text {
-                                text: barCheckbox.isChecked ? "check" : ""
-                                font.family: "Material Symbols Outlined"
-                                font.pixelSize: 14
-                                color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
-                                visible: barCheckbox.isChecked
-                            }
-
-                            Text {
-                                text: modelData.name || "Unknown"
-                                font.pixelSize: 12
-                                color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
-                            }
+                        Text {
+                            text: "Bar Monitors"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
                         }
 
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                isChecked = !isChecked;
-                                
-                                // Update settings array when checkbox is toggled
+                        Text {
+                            text: "Select which monitors to display the top panel/bar on"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+                    }
+                }
+
+        
+                Flow {
+                    Layout.fillWidth: true
+                    spacing: 8
+
+                    Repeater {
+                        model: root.sortedMonitors
+                        delegate: Rectangle {
+                            id: barCheckbox
+                            property bool isChecked: false
+                            
+                            Component.onCompleted: {
+                                // Initialize checkbox state from settings
                                 let monitors = Settings.settings.barMonitors || [];
-                                monitors = [...monitors]; // Create copy to trigger reactivity
-                                
-                                if (isChecked) {
-                                    if (!monitors.includes(modelData.name)) {
-                                        monitors.push(modelData.name);
-                                    }
-                                } else {
-                                    monitors = monitors.filter(name => name !== modelData.name);
+                                isChecked = monitors.includes(modelData.name);
+                            }
+                            
+                            width: checkboxContent.implicitWidth + 16
+                            height: 32
+                            radius: 16
+                            color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
+                            border.color: isChecked ? Theme.accentPrimary : Theme.outline
+                            border.width: 1
+
+                            RowLayout {
+                                id: checkboxContent
+                                anchors.centerIn: parent
+                                spacing: 6
+
+                                Text {
+                                    text: barCheckbox.isChecked ? "check" : ""
+                                    font.family: "Material Symbols Outlined"
+                                    font.pixelSize: 14 * Theme.uiScale
+                                    color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
+                                    visible: barCheckbox.isChecked
+                                }
+
+                                Text {
+                                    text: modelData.name || "Unknown"
+                                    font.pixelSize: 12 * Theme.uiScale
+                                    color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
+                                }
+                            }
+
+                            MouseArea {
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    isChecked = !isChecked;
+                                    
+                                    // Update settings array when checkbox is toggled
+                                    let monitors = Settings.settings.barMonitors || [];
+                                    monitors = [...monitors]; // Create copy to trigger reactivity
+                                    
+                                    if (isChecked) {
+                                        if (!monitors.includes(modelData.name)) {
+                                            monitors.push(modelData.name);
+                                        }
+                                    } else {
+                                        monitors = monitors.filter(name => name !== modelData.name);
+                                    }
+                                    
+                                    Settings.settings.barMonitors = monitors;
+                                    console.log("Bar monitors updated:", JSON.stringify(monitors));
                                 }
-                                
-                                Settings.settings.barMonitors = monitors;
-                                console.log("Bar monitors updated:", JSON.stringify(monitors));
                             }
                         }
                     }
                 }
             }
-        }
 
 
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
+            ColumnLayout {
                 spacing: 8
                 Layout.fillWidth: true
+                Layout.topMargin: 8
 
-                ColumnLayout {
-                    spacing: 4
+                RowLayout {
+                    spacing: 8
                     Layout.fillWidth: true
 
-                    Text {
-                        text: "Dock Monitors"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Select which monitors to display the application dock on"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
+                    ColumnLayout {
+                        spacing: 4
                         Layout.fillWidth: true
+
+                        Text {
+                            text: "Dock Monitors"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Select which monitors to display the application dock on"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
                     }
                 }
-            }
 
 
-            Flow {
-                Layout.fillWidth: true
-                spacing: 8
+                Flow {
+                    Layout.fillWidth: true
+                    spacing: 8
 
-                Repeater {
-                    model: root.sortedMonitors
-                    delegate: Rectangle {
-                        id: dockCheckbox
-                        property bool isChecked: false
-                        
-                        Component.onCompleted: {
-                            // Initialize with current settings
-                            let monitors = Settings.settings.dockMonitors || [];
-                            isChecked = monitors.includes(modelData.name);
-                        }
-                        
-                        width: checkboxContent.implicitWidth + 16
-                        height: 32
-                        radius: 16
-                        color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
-                        border.color: isChecked ? Theme.accentPrimary : Theme.outline
-                        border.width: 1
-
-                        RowLayout {
-                            id: checkboxContent
-                            anchors.centerIn: parent
-                            spacing: 6
-
-                            Text {
-                                text: dockCheckbox.isChecked ? "check" : ""
-                                font.family: "Material Symbols Outlined"
-                                font.pixelSize: 14
-                                color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
-                                visible: dockCheckbox.isChecked
-                            }
-
-                            Text {
-                                text: modelData.name || "Unknown"
-                                font.pixelSize: 12
-                                color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                // Toggle state immediately for UI responsiveness
-                                isChecked = !isChecked;
-                                
-                                // Update settings
+                    Repeater {
+                        model: root.sortedMonitors
+                        delegate: Rectangle {
+                            id: dockCheckbox
+                            property bool isChecked: false
+                            
+                            Component.onCompleted: {
+                                // Initialize with current settings
                                 let monitors = Settings.settings.dockMonitors || [];
-                                monitors = [...monitors]; // Copy array
-                                
-                                if (isChecked) {
-                                    // Add to array if not already there
-                                    if (!monitors.includes(modelData.name)) {
-                                        monitors.push(modelData.name);
-                                    }
-                                } else {
-                                    // Remove from array
-                                    monitors = monitors.filter(name => name !== modelData.name);
+                                isChecked = monitors.includes(modelData.name);
+                            }
+                            
+                            width: checkboxContent.implicitWidth + 16
+                            height: 32
+                            radius: 16
+                            color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
+                            border.color: isChecked ? Theme.accentPrimary : Theme.outline
+                            border.width: 1
+
+                            RowLayout {
+                                id: checkboxContent
+                                anchors.centerIn: parent
+                                spacing: 6
+
+                                Text {
+                                    text: dockCheckbox.isChecked ? "check" : ""
+                                    font.family: "Material Symbols Outlined"
+                                    font.pixelSize: 14 * Theme.uiScale
+                                    color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
+                                    visible: dockCheckbox.isChecked
+                                }
+
+                                Text {
+                                    text: modelData.name || "Unknown"
+                                    font.pixelSize: 12 * Theme.uiScale
+                                    color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
+                                }
+                            }
+
+                            MouseArea {
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    // Toggle state immediately for UI responsiveness
+                                    isChecked = !isChecked;
+                                    
+                                    // Update settings
+                                    let monitors = Settings.settings.dockMonitors || [];
+                                    monitors = [...monitors]; // Copy array
+                                    
+                                    if (isChecked) {
+                                        // Add to array if not already there
+                                        if (!monitors.includes(modelData.name)) {
+                                            monitors.push(modelData.name);
+                                        }
+                                    } else {
+                                        // Remove from array
+                                        monitors = monitors.filter(name => name !== modelData.name);
+                                    }
+                                    
+                                    Settings.settings.dockMonitors = monitors;
+                                    console.log("Dock monitors updated:", JSON.stringify(monitors));
                                 }
-                                
-                                Settings.settings.dockMonitors = monitors;
-                                console.log("Dock monitors updated:", JSON.stringify(monitors));
                             }
                         }
                     }
                 }
             }
-        }
 
 
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
+            ColumnLayout {
                 spacing: 8
                 Layout.fillWidth: true
+                Layout.topMargin: 8
 
-                ColumnLayout {
-                    spacing: 4
+                RowLayout {
+                    spacing: 8
                     Layout.fillWidth: true
 
-                    Text {
-                        text: "Notification Monitors"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Select which monitors to display system notifications on"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
+                    ColumnLayout {
+                        spacing: 4
                         Layout.fillWidth: true
+
+                        Text {
+                            text: "Notification Monitors"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Select which monitors to display system notifications on"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
                     }
                 }
-            }
 
 
-            Flow {
-                Layout.fillWidth: true
-                spacing: 8
+                Flow {
+                    Layout.fillWidth: true
+                    spacing: 8
 
-                Repeater {
-                    model: root.sortedMonitors
-                    delegate: Rectangle {
-                        id: notificationCheckbox
-                        property bool isChecked: false
-                        
-                        Component.onCompleted: {
-                            // Initialize with current settings
-                            let monitors = Settings.settings.notificationMonitors || [];
-                            isChecked = monitors.includes(modelData.name);
-                        }
-                        
-                        width: checkboxContent.implicitWidth + 16
-                        height: 32
-                        radius: 16
-                        color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
-                        border.color: isChecked ? Theme.accentPrimary : Theme.outline
-                        border.width: 1
-
-                        RowLayout {
-                            id: checkboxContent
-                            anchors.centerIn: parent
-                            spacing: 6
-
-                            Text {
-                                text: notificationCheckbox.isChecked ? "check" : ""
-                                font.family: "Material Symbols Outlined"
-                                font.pixelSize: 14
-                                color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
-                                visible: notificationCheckbox.isChecked
-                            }
-
-                            Text {
-                                text: modelData.name || "Unknown"
-                                font.pixelSize: 12
-                                color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                // Toggle state immediately for UI responsiveness
-                                isChecked = !isChecked;
-                                
-                                // Update settings
+                    Repeater {
+                        model: root.sortedMonitors
+                        delegate: Rectangle {
+                            id: notificationCheckbox
+                            property bool isChecked: false
+                            
+                            Component.onCompleted: {
+                                // Initialize with current settings
                                 let monitors = Settings.settings.notificationMonitors || [];
-                                monitors = [...monitors]; // Copy array
-                                
-                                if (isChecked) {
-                                    // Add to array if not already there
-                                    if (!monitors.includes(modelData.name)) {
-                                        monitors.push(modelData.name);
-                                    }
-                                } else {
-                                    // Remove from array
-                                    monitors = monitors.filter(name => name !== modelData.name);
+                                isChecked = monitors.includes(modelData.name);
+                            }
+                            
+                            width: checkboxContent.implicitWidth + 16
+                            height: 32
+                            radius: 16
+                            color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
+                            border.color: isChecked ? Theme.accentPrimary : Theme.outline
+                            border.width: 1
+
+                            RowLayout {
+                                id: checkboxContent
+                                anchors.centerIn: parent
+                                spacing: 6
+
+                                Text {
+                                    text: notificationCheckbox.isChecked ? "check" : ""
+                                    font.family: "Material Symbols Outlined"
+                                    font.pixelSize: 14 * Theme.uiScale
+                                    color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
+                                    visible: notificationCheckbox.isChecked
+                                }
+
+                                Text {
+                                    text: modelData.name || "Unknown"
+                                    font.pixelSize: 12 * Theme.uiScale
+                                    color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
+                                }
+                            }
+
+                            MouseArea {
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    // Toggle state immediately for UI responsiveness
+                                    isChecked = !isChecked;
+                                    
+                                    // Update settings
+                                    let monitors = Settings.settings.notificationMonitors || [];
+                                    monitors = [...monitors]; // Copy array
+                                    
+                                    if (isChecked) {
+                                        // Add to array if not already there
+                                        if (!monitors.includes(modelData.name)) {
+                                            monitors.push(modelData.name);
+                                        }
+                                    } else {
+                                        // Remove from array
+                                        monitors = monitors.filter(name => name !== modelData.name);
+                                    }
+                                    
+                                    Settings.settings.notificationMonitors = monitors;
+                                    console.log("Notification monitors updated:", JSON.stringify(monitors));
                                 }
-                                
-                                Settings.settings.notificationMonitors = monitors;
-                                console.log("Notification monitors updated:", JSON.stringify(monitors));
                             }
                         }
                     }
                 }
             }
         }
-    }
 
-    Item {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
     }
 }
\ No newline at end of file
diff --git a/Widgets/SettingsWindow/Tabs/General.qml b/Widgets/SettingsWindow/Tabs/General.qml
index d2e199b..ab9b03d 100644
--- a/Widgets/SettingsWindow/Tabs/General.qml
+++ b/Widgets/SettingsWindow/Tabs/General.qml
@@ -4,105 +4,215 @@ import QtQuick.Layouts
 import qs.Components
 import qs.Settings
 
-ColumnLayout {
-    id: root
-
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
-
-    Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-    }
-
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    
     ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
+        id: root
+        width: parent.availableWidth
+        spacing: 0 * Theme.uiScale
+        anchors.top: parent.top
+        anchors.margins: 0 * Theme.uiScale
 
-        Text {
-            text: "Profile"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 0
         }
 
+
+
         ColumnLayout {
-            spacing: 2
+            spacing: 4 * Theme.uiScale
             Layout.fillWidth: true
 
             Text {
-                text: "Profile Image"
-                font.pixelSize: 13
+                text: "Profile"
+                font.pixelSize: 18 * Theme.uiScale
                 font.bold: true
                 color: Theme.textPrimary
+                Layout.bottomMargin: 8
             }
 
-            Text {
-                text: "Your profile picture displayed in various places throughout the shell"
-                font.pixelSize: 12
-                color: Theme.textSecondary
-                wrapMode: Text.WordWrap
-                Layout.fillWidth: true
-                Layout.bottomMargin: 4
-            }
-
-            RowLayout {
-                spacing: 8
+            ColumnLayout {
+                spacing: 2 * Theme.uiScale
                 Layout.fillWidth: true
 
-                Rectangle {
-                    width: 48
-                    height: 48
-                    radius: 24
+                Text {
+                    text: "Profile Image"
+                    font.pixelSize: 13 * Theme.uiScale
+                    font.bold: true
+                    color: Theme.textPrimary
+                }
+
+                Text {
+                    text: "Your profile picture displayed in various places throughout the shell"
+                    font.pixelSize: 12 * Theme.uiScale
+                    color: Theme.textSecondary
+                    wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
+                    Layout.bottomMargin: 4
+                }
+
+                RowLayout {
+                    spacing: 8 * Theme.uiScale
+                    Layout.fillWidth: true
 
                     Rectangle {
-                        anchors.fill: parent
-                        color: "transparent"
-                        radius: 24
-                        border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
-                        border.width: 2
-                        z: 2
+                        width: 48 * Theme.uiScale
+                        height: 48 * Theme.uiScale
+                        radius: 24 * Theme.uiScale
+
+                        Rectangle {
+                            anchors.fill: parent
+                            color: "transparent"
+                            radius: 24 * Theme.uiScale
+                            border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
+                            border.width: 2 * Theme.uiScale
+                            z: 2
+                        }
+
+                        Avatar {
+                        }
+
                     }
 
-                    Avatar {
+                    Rectangle {
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: 40 * Theme.uiScale
+                        radius: 16 * Theme.uiScale
+                        color: Theme.surfaceVariant
+                        border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
+                        border.width: 1 * Theme.uiScale
+
+                        TextInput {
+                            id: profileImageInput
+
+                            anchors.fill: parent
+                            anchors.leftMargin: 12 * Theme.uiScale
+                            anchors.rightMargin: 12 * Theme.uiScale
+                            anchors.topMargin: 6 * Theme.uiScale
+                            anchors.bottomMargin: 6 * Theme.uiScale
+                            text: Settings.settings.profileImage
+                            font.pixelSize: 13 * Theme.uiScale
+                            color: Theme.textPrimary
+                            verticalAlignment: TextInput.AlignVCenter
+                            clip: true
+                            selectByMouse: true
+                            activeFocusOnTab: true
+                            inputMethodHints: Qt.ImhUrlCharactersOnly
+                            onTextChanged: {
+                                Settings.settings.profileImage = text;
+                            }
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.IBeamCursor
+                                onClicked: profileImageInput.forceActiveFocus()
+                            }
+
+                        }
+
                     }
 
                 }
 
-                Rectangle {
+            }
+
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.topMargin: 26 * Theme.uiScale
+            Layout.bottomMargin: 18 * Theme.uiScale
+            height: 1 * Theme.uiScale
+            color: Theme.outline
+            opacity: 0.3
+        }
+
+        ColumnLayout {
+            spacing: 4 * Theme.uiScale
+            Layout.fillWidth: true
+
+            Text {
+                text: "User Interface"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+                Layout.bottomMargin: 8
+            }
+
+            ColumnLayout {
+                spacing: 4 * Theme.uiScale
+                Layout.fillWidth: true
+
+                RowLayout {
+                    spacing: 8 * Theme.uiScale
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 40
-                    radius: 16
-                    color: Theme.surfaceVariant
-                    border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
-                    border.width: 1
 
-                    TextInput {
-                        id: profileImageInput
+                    ColumnLayout {
+                        spacing: 4 * Theme.uiScale
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Corners"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display rounded corners"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
+                    }
+
+                    Rectangle {
+                        id: cornersSwitch
+
+                        width: 52 * Theme.uiScale
+                        height: 32 * Theme.uiScale
+                        radius: 16 * Theme.uiScale
+                        color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline
+                        border.width: 2 * Theme.uiScale
+
+                        Rectangle {
+                            id: cornersThumb
+
+                            width: 28 * Theme.uiScale
+                            height: 28 * Theme.uiScale
+                            radius: 14 * Theme.uiScale
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1 * Theme.uiScale
+                            y: 2
+                            x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+
+                            }
 
-                        anchors.fill: parent
-                        anchors.leftMargin: 12
-                        anchors.rightMargin: 12
-                        anchors.topMargin: 6
-                        anchors.bottomMargin: 6
-                        text: Settings.settings.profileImage
-                        font.pixelSize: 13
-                        color: Theme.textPrimary
-                        verticalAlignment: TextInput.AlignVCenter
-                        clip: true
-                        selectByMouse: true
-                        activeFocusOnTab: true
-                        inputMethodHints: Qt.ImhUrlCharactersOnly
-                        onTextChanged: {
-                            Settings.settings.profileImage = text;
                         }
 
                         MouseArea {
                             anchors.fill: parent
-                            cursorShape: Qt.IBeamCursor
-                            onClicked: profileImageInput.forceActiveFocus()
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showCorners = !Settings.settings.showCorners;
+                            }
                         }
 
                     }
@@ -111,252 +221,154 @@ ColumnLayout {
 
             }
 
-        }
-
-    }
-
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.topMargin: 26
-        Layout.bottomMargin: 18
-        height: 1
-        color: Theme.outline
-        opacity: 0.3
-    }
-
-    ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
-
-        Text {
-            text: "User Interface"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
-        }
-
-        ColumnLayout {
-            spacing: 4
-            Layout.fillWidth: true
-
-            RowLayout {
-                spacing: 8
+            ColumnLayout {
+                spacing: 8 * Theme.uiScale
                 Layout.fillWidth: true
+                Layout.topMargin: 4 * Theme.uiScale
 
-                ColumnLayout {
-                    spacing: 4
+                RowLayout {
+                    spacing: 8 * Theme.uiScale
                     Layout.fillWidth: true
 
-                    Text {
-                        text: "Show Corners"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display rounded corners"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
+                    ColumnLayout {
+                        spacing: 4 * Theme.uiScale
                         Layout.fillWidth: true
+
+                        Text {
+                            text: "Show Dock"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display a dock at the bottom of the screen for quick access to applications"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
                     }
 
-                }
-
-                Rectangle {
-                    id: cornersSwitch
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
                     Rectangle {
-                        id: cornersThumb
+                        id: dockSwitch
 
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2
+                        width: 52 * Theme.uiScale
+                        height: 32 * Theme.uiScale
+                        radius: 16 * Theme.uiScale
+                        color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
+                        border.width: 2 * Theme.uiScale
+
+                        Rectangle {
+                            id: dockThumb
+
+                            width: 28 * Theme.uiScale
+                            height: 28 * Theme.uiScale
+                            radius: 14 * Theme.uiScale
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1 * Theme.uiScale
+                            y: 2
+                            x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
 
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
                             }
 
                         }
 
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showCorners = !Settings.settings.showCorners;
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.showDock = !Settings.settings.showDock;
+                            }
                         }
+
                     }
 
                 }
 
             }
 
-        }
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 4
-
-            RowLayout {
-                spacing: 8
+            ColumnLayout {
+                spacing: 8 * Theme.uiScale
                 Layout.fillWidth: true
+                Layout.topMargin: 4 * Theme.uiScale
 
-                ColumnLayout {
-                    spacing: 4
+                RowLayout {
+                    spacing: 8 * Theme.uiScale
                     Layout.fillWidth: true
 
-                    Text {
-                        text: "Show Dock"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display a dock at the bottom of the screen for quick access to applications"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
+                    ColumnLayout {
+                        spacing: 4 * Theme.uiScale
                         Layout.fillWidth: true
+
+                        Text {
+                            text: "Dim Desktop"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Dim the desktop when panels or menus are open"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
                     }
 
-                }
-
-                Rectangle {
-                    id: dockSwitch
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
                     Rectangle {
-                        id: dockThumb
+                        id: dimSwitch
 
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2
+                        width: 52 * Theme.uiScale
+                        height: 32 * Theme.uiScale
+                        radius: 16 * Theme.uiScale
+                        color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline
+                        border.width: 2 * Theme.uiScale
+
+                        Rectangle {
+                            id: dimThumb
+
+                            width: 28 * Theme.uiScale
+                            height: 28 * Theme.uiScale
+                            radius: 14 * Theme.uiScale
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1 * Theme.uiScale
+                            y: 2
+                            x: Settings.settings.dimPanels ? dimSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
 
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
                             }
 
                         }
 
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.showDock = !Settings.settings.showDock;
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 4
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Dim Desktop"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Dim the desktop when panels or menus are open"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                }
-
-                Rectangle {
-                    id: dimSwitch
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: dimThumb
-
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.dimPanels ? dimSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.dimPanels = !Settings.settings.dimPanels;
                             }
-
                         }
 
                     }
 
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.dimPanels = !Settings.settings.dimPanels;
-                        }
-                    }
-
                 }
 
             }
@@ -364,10 +376,4 @@ ColumnLayout {
         }
 
     }
-
-    Item {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
-
 }
diff --git a/Widgets/SettingsWindow/Tabs/Misc.qml b/Widgets/SettingsWindow/Tabs/Misc.qml
index a2a4f16..30208f8 100644
--- a/Widgets/SettingsWindow/Tabs/Misc.qml
+++ b/Widgets/SettingsWindow/Tabs/Misc.qml
@@ -4,134 +4,144 @@ import QtQuick.Layouts
 import qs.Settings
 import qs.Components
 
-ColumnLayout {
-    id: root
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
-
-    Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-    }
-
-
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    
     ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
+        id: root
+        width: parent.availableWidth
+        spacing: 0
+        anchors.top: parent.top
+        anchors.margins: 0
 
-        Text {
-            text: "Media"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 0
         }
 
 
         ColumnLayout {
-            spacing: 8
+            spacing: 4
             Layout.fillWidth: true
 
             Text {
-                text: "Visualizer Type"
-                font.pixelSize: 13
+                text: "Media"
+                font.pixelSize: 18 * Theme.uiScale
                 font.bold: true
                 color: Theme.textPrimary
+                Layout.bottomMargin: 8
             }
 
-            Text {
-                text: "Choose the style of the audio visualizer"
-                font.pixelSize: 12
-                color: Theme.textSecondary
-                wrapMode: Text.WordWrap
+
+            ColumnLayout {
+                spacing: 8
                 Layout.fillWidth: true
-                Layout.bottomMargin: 4
-            }
 
-            ComboBox {
-                id: visualizerTypeComboBox
-                Layout.fillWidth: true
-                Layout.preferredHeight: 40
-                model: ["radial", "fire", "diamond"]
-                currentIndex: model.indexOf(Settings.settings.visualizerType)
-
-                background: Rectangle {
-                    implicitWidth: 120
-                    implicitHeight: 40
-                    color: Theme.surfaceVariant
-                    border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
-                    border.width: 1
-                    radius: 16
-                }
-
-                contentItem: Text {
-                    leftPadding: 12
-                    rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing
-                    text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1)
-                    font.pixelSize: 13
-                    color: Theme.textPrimary
-                    verticalAlignment: Text.AlignVCenter
-                    elide: Text.ElideRight
-                }
-
-                indicator: Text {
-                    x: visualizerTypeComboBox.width - width - 12
-                    y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2
-                    text: "arrow_drop_down"
-                    font.family: "Material Symbols Outlined"
-                    font.pixelSize: 24
+                Text {
+                    text: "Visualizer Type"
+                    font.pixelSize: 13 * Theme.uiScale
+                    font.bold: true
                     color: Theme.textPrimary
                 }
 
-                popup: Popup {
-                    y: visualizerTypeComboBox.height
-                    width: visualizerTypeComboBox.width
-                    implicitHeight: contentItem.implicitHeight
-                    padding: 1
+                Text {
+                    text: "Choose the style of the audio visualizer"
+                    font.pixelSize: 12 * Theme.uiScale
+                    color: Theme.textSecondary
+                    wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
+                    Layout.bottomMargin: 4
+                }
 
-                    contentItem: ListView {
-                        clip: true
-                        implicitHeight: contentHeight
-                        model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null
-                        currentIndex: visualizerTypeComboBox.highlightedIndex
-
-                        ScrollIndicator.vertical: ScrollIndicator {}
-                    }
+                ComboBox {
+                    id: visualizerTypeComboBox
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 40
+                    model: ["radial", "fire", "diamond"]
+                    currentIndex: model.indexOf(Settings.settings.visualizerType)
 
                     background: Rectangle {
+                        implicitWidth: 120
+                        implicitHeight: 40
                         color: Theme.surfaceVariant
-                        border.color: Theme.outline
+                        border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
                         border.width: 1
                         radius: 16
                     }
-                }
 
-                delegate: ItemDelegate {
-                    width: visualizerTypeComboBox.width
                     contentItem: Text {
-                        text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
+                        leftPadding: 12
+                        rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing
+                        text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1)
                         font.pixelSize: 13
                         color: Theme.textPrimary
                         verticalAlignment: Text.AlignVCenter
                         elide: Text.ElideRight
                     }
-                    highlighted: visualizerTypeComboBox.highlightedIndex === index
 
-                    background: Rectangle {
-                        color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent"
+                    indicator: Text {
+                        x: visualizerTypeComboBox.width - width - 12
+                        y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2
+                        text: "arrow_drop_down"
+                        font.family: "Material Symbols Outlined"
+                        font.pixelSize: 24
+                        color: Theme.textPrimary
                     }
-                }
 
-                onActivated: {
-                    Settings.settings.visualizerType = model[index];
+                    popup: Popup {
+                        y: visualizerTypeComboBox.height
+                        width: visualizerTypeComboBox.width
+                        implicitHeight: contentItem.implicitHeight
+                        padding: 1
+
+                        contentItem: ListView {
+                            clip: true
+                            implicitHeight: contentHeight
+                            model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null
+                            currentIndex: visualizerTypeComboBox.highlightedIndex
+
+                            ScrollIndicator.vertical: ScrollIndicator {}
+                        }
+
+                        background: Rectangle {
+                            color: Theme.surfaceVariant
+                            border.color: Theme.outline
+                            border.width: 1
+                            radius: 16
+                        }
+                    }
+
+                    delegate: ItemDelegate {
+                        width: visualizerTypeComboBox.width
+                        contentItem: Text {
+                            text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
+                            font.pixelSize: 13
+                            color: Theme.textPrimary
+                            verticalAlignment: Text.AlignVCenter
+                            elide: Text.ElideRight
+                        }
+                        highlighted: visualizerTypeComboBox.highlightedIndex === index
+
+                        background: Rectangle {
+                            color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent"
+                        }
+                    }
+
+                    onActivated: {
+                        Settings.settings.visualizerType = model[index];
+                    }
                 }
             }
         }
-    }
 
-    Item {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
     }
 }
\ No newline at end of file
diff --git a/Widgets/SettingsWindow/Tabs/Network.qml b/Widgets/SettingsWindow/Tabs/Network.qml
index 13ee16a..8bf9dc6 100644
--- a/Widgets/SettingsWindow/Tabs/Network.qml
+++ b/Widgets/SettingsWindow/Tabs/Network.qml
@@ -6,213 +6,223 @@ import Quickshell.Bluetooth
 import qs.Components
 import qs.Settings
 
-ColumnLayout {
-    id: root
-
-    spacing: 24
-    Component.onCompleted: {
-        Quickshell.execDetached(["nmcli", "-t", "-f", "WIFI", "radio"]);
-    }
-
+ScrollView {
+    anchors.fill: parent
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    
     ColumnLayout {
-        spacing: 16
-        Layout.fillWidth: true
-
-        Text {
-            text: "Wi-Fi"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-        }
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Enable Wi-Fi"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Turn Wi-Fi radio on or off"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                }
-
-                Rectangle {
-                    id: wifiSwitch
-
-                    property bool checked: Settings.settings.wifiEnabled
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: checked ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: checked ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: wifiThumb
-
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: wifiSwitch.checked ? wifiSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-
-                        }
-
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.wifiEnabled = !Settings.settings.wifiEnabled;
-                            Quickshell.execDetached(["nmcli", "radio", "wifi", Settings.settings.wifiEnabled ? "on" : "off"]);
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.topMargin: 26
-        Layout.bottomMargin: 0
-        height: 1
-        color: Theme.outline
-        opacity: 0.3
-    }
-
-    ColumnLayout {
-        spacing: 16
-        Layout.fillWidth: true
-
-        Text {
-            text: "Bluetooth"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-        }
-
-        ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Enable Bluetooth"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Turn Bluetooth radio on or off"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                }
-
-                Rectangle {
-                    id: bluetoothSwitch
-
-                    property bool checked: Settings.settings.bluetoothEnabled
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: checked ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: checked ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: bluetoothThumb
-
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: bluetoothSwitch.checked ? bluetoothSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-
-                        }
-
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            if (Bluetooth.defaultAdapter) {
-                                Settings.settings.bluetoothEnabled = !Settings.settings.bluetoothEnabled;
-                                Bluetooth.defaultAdapter.enabled = Settings.settings.bluetoothEnabled;
-                                if (Bluetooth.defaultAdapter.enabled)
-                                    Bluetooth.defaultAdapter.discovering = true;
-
-                            }
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    Item {
+        id: root
+        width: parent.availableWidth
         Layout.fillWidth: true
         Layout.fillHeight: true
-    }
+        spacing: 24
+        Component.onCompleted: {
+            Quickshell.execDetached(["nmcli", "-t", "-f", "WIFI", "radio"]);
+        }
 
+        ColumnLayout {
+            spacing: 16
+            Layout.fillWidth: true
+
+            Text {
+                text: "Wi-Fi"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+            }
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Enable Wi-Fi"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Turn Wi-Fi radio on or off"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
+                    }
+
+                    Rectangle {
+                        id: wifiSwitch
+
+                        property bool checked: Settings.settings.wifiEnabled
+
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: checked ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: checked ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: wifiThumb
+
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: wifiSwitch.checked ? wifiSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+
+                            }
+
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.wifiEnabled = !Settings.settings.wifiEnabled;
+                                Quickshell.execDetached(["nmcli", "radio", "wifi", Settings.settings.wifiEnabled ? "on" : "off"]);
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.topMargin: 26
+            Layout.bottomMargin: 0
+            height: 1
+            color: Theme.outline
+            opacity: 0.3
+        }
+
+        ColumnLayout {
+            spacing: 16
+            Layout.fillWidth: true
+
+            Text {
+                text: "Bluetooth"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+            }
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Enable Bluetooth"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Turn Bluetooth radio on or off"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
+                    }
+
+                    Rectangle {
+                        id: bluetoothSwitch
+
+                        property bool checked: Settings.settings.bluetoothEnabled
+
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: checked ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: checked ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: bluetoothThumb
+
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: bluetoothSwitch.checked ? bluetoothSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+
+                            }
+
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if (Bluetooth.defaultAdapter) {
+                                    Settings.settings.bluetoothEnabled = !Settings.settings.bluetoothEnabled;
+                                    Bluetooth.defaultAdapter.enabled = Settings.settings.bluetoothEnabled;
+                                    if (Bluetooth.defaultAdapter.enabled)
+                                        Bluetooth.defaultAdapter.discovering = true;
+
+                                }
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
 }
diff --git a/Widgets/SettingsWindow/Tabs/Recording.qml b/Widgets/SettingsWindow/Tabs/Recording.qml
index 1011538..34cb9ab 100644
--- a/Widgets/SettingsWindow/Tabs/Recording.qml
+++ b/Widgets/SettingsWindow/Tabs/Recording.qml
@@ -34,7 +34,7 @@ ColumnLayout {
             ColumnLayout {
                 // Text {
                 //     text: "Screen Recording"
-                //     font.pixelSize: 18
+                //     font.pixelSize: 18 * Theme.uiScale
                 //     font.bold: true
                 //     color: Theme.textPrimary
                 //     Layout.bottomMargin: 8
@@ -49,14 +49,14 @@ ColumnLayout {
 
                     Text {
                         text: "Output Directory"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Directory where screen recordings will be saved"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -78,7 +78,7 @@ ColumnLayout {
                             anchors.topMargin: 6
                             anchors.bottomMargin: 6
                             text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : ""
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: TextInput.AlignVCenter
                             clip: true
@@ -108,14 +108,14 @@ ColumnLayout {
 
                     Text {
                         text: "Frame Rate"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Target frame rate for screen recordings (default: 60)"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -144,7 +144,7 @@ ColumnLayout {
 
                         contentItem: TextInput {
                             text: frameRateSpinBox.textFromValue(frameRateSpinBox.value, frameRateSpinBox.locale)
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             selectionColor: Theme.accentPrimary
                             selectedTextColor: Theme.onAccent
@@ -183,7 +183,7 @@ ColumnLayout {
                             Text {
                                 text: "add"
                                 font.family: "Material Symbols Outlined"
-                                font.pixelSize: 20
+                                font.pixelSize: 20 * Theme.uiScale
                                 color: Theme.textPrimary
                                 anchors.centerIn: parent
                             }
@@ -200,7 +200,7 @@ ColumnLayout {
                             Text {
                                 text: "remove"
                                 font.family: "Material Symbols Outlined"
-                                font.pixelSize: 20
+                                font.pixelSize: 20 * Theme.uiScale
                                 color: Theme.textPrimary
                                 anchors.centerIn: parent
                             }
@@ -218,14 +218,14 @@ ColumnLayout {
 
                     Text {
                         text: "Audio Source"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Audio source to capture during recording"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -265,7 +265,7 @@ ColumnLayout {
                                     return audioSourceComboBox.currentText;
                                 }
                             }
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -276,7 +276,7 @@ ColumnLayout {
                             y: audioSourceComboBox.topPadding + (audioSourceComboBox.availableHeight - height) / 2
                             text: "arrow_drop_down"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -323,7 +323,7 @@ ColumnLayout {
                                         return modelData;
                                     }
                                 }
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 color: Theme.textPrimary
                                 verticalAlignment: Text.AlignVCenter
                                 elide: Text.ElideRight
@@ -346,14 +346,14 @@ ColumnLayout {
 
                     Text {
                         text: "Video Quality"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Higher quality results in larger file sizes"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -395,7 +395,7 @@ ColumnLayout {
                                     return qualityComboBox.currentText;
                                 }
                             }
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -406,7 +406,7 @@ ColumnLayout {
                             y: qualityComboBox.topPadding + (qualityComboBox.availableHeight - height) / 2
                             text: "arrow_drop_down"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -455,7 +455,7 @@ ColumnLayout {
                                         return modelData;
                                     }
                                 }
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 color: Theme.textPrimary
                                 verticalAlignment: Text.AlignVCenter
                                 elide: Text.ElideRight
@@ -478,14 +478,14 @@ ColumnLayout {
 
                     Text {
                         text: "Video Codec"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Different codecs offer different compression and compatibility"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -514,7 +514,7 @@ ColumnLayout {
                             leftPadding: 12
                             rightPadding: codecComboBox.indicator.width + codecComboBox.spacing
                             text: codecComboBox.currentText.toUpperCase()
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -525,7 +525,7 @@ ColumnLayout {
                             y: codecComboBox.topPadding + (codecComboBox.availableHeight - height) / 2
                             text: "arrow_drop_down"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -561,7 +561,7 @@ ColumnLayout {
 
                             contentItem: Text {
                                 text: modelData.toUpperCase()
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 color: Theme.textPrimary
                                 verticalAlignment: Text.AlignVCenter
                                 elide: Text.ElideRight
@@ -584,14 +584,14 @@ ColumnLayout {
 
                     Text {
                         text: "Audio Codec"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Opus is recommended for best performance and smallest audio size"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -620,7 +620,7 @@ ColumnLayout {
                             leftPadding: 12
                             rightPadding: audioCodecComboBox.indicator.width + audioCodecComboBox.spacing
                             text: audioCodecComboBox.currentText.toUpperCase()
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -631,7 +631,7 @@ ColumnLayout {
                             y: audioCodecComboBox.topPadding + (audioCodecComboBox.availableHeight - height) / 2
                             text: "arrow_drop_down"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -667,7 +667,7 @@ ColumnLayout {
 
                             contentItem: Text {
                                 text: modelData.toUpperCase()
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 color: Theme.textPrimary
                                 verticalAlignment: Text.AlignVCenter
                                 elide: Text.ElideRight
@@ -690,14 +690,14 @@ ColumnLayout {
 
                     Text {
                         text: "Color Range"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Limited is recommended for better compatibility"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         Layout.bottomMargin: 4
                     }
@@ -726,7 +726,7 @@ ColumnLayout {
                             leftPadding: 12
                             rightPadding: colorRangeComboBox.indicator.width + colorRangeComboBox.spacing
                             text: colorRangeComboBox.currentText.charAt(0).toUpperCase() + colorRangeComboBox.currentText.slice(1)
-                            font.pixelSize: 13
+                            font.pixelSize: 13 * Theme.uiScale
                             color: Theme.textPrimary
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -737,7 +737,7 @@ ColumnLayout {
                             y: colorRangeComboBox.topPadding + (colorRangeComboBox.availableHeight - height) / 2
                             text: "arrow_drop_down"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             color: Theme.textPrimary
                         }
 
@@ -773,7 +773,7 @@ ColumnLayout {
 
                             contentItem: Text {
                                 text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 color: Theme.textPrimary
                                 verticalAlignment: Text.AlignVCenter
                                 elide: Text.ElideRight
@@ -804,14 +804,14 @@ ColumnLayout {
 
                             Text {
                                 text: "Show Cursor"
-                                font.pixelSize: 13
+                                font.pixelSize: 13 * Theme.uiScale
                                 font.bold: true
                                 color: Theme.textPrimary
                             }
 
                             Text {
                                 text: "Record mouse cursor in the video"
-                                font.pixelSize: 12
+                                font.pixelSize: 12 * Theme.uiScale
                                 color: Theme.textSecondary
                                 wrapMode: Text.WordWrap
                                 Layout.fillWidth: true
diff --git a/Widgets/SettingsWindow/Tabs/TimeWeather.qml b/Widgets/SettingsWindow/Tabs/TimeWeather.qml
index 497784d..75921b6 100644
--- a/Widgets/SettingsWindow/Tabs/TimeWeather.qml
+++ b/Widgets/SettingsWindow/Tabs/TimeWeather.qml
@@ -5,258 +5,268 @@ import qs.Components
 import qs.Settings
 import qs.Widgets.SettingsWindow.Tabs.Components
 
-ColumnLayout {
-    id: root
-
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
-
-    Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-    }
-
+    padding: 0
+    rightPadding: 12
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    
     ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
+        id: root
+        width: parent.availableWidth
+        spacing: 0
+        anchors.top: parent.top
+        anchors.margins: 0
 
-        Text {
-            text: "Time"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
-        }
-
-        ColumnLayout {
-            spacing: 8
+        Item {
             Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "Use 12 Hour Clock"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                }
-
-                Rectangle {
-                    id: use12HourClockSwitch
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: use12HourClockThumb
-
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-
-                        }
-
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
-                        }
-                    }
-
-                }
-
-            }
-
+            Layout.preferredHeight: 0
         }
 
         ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            RowLayout {
-                spacing: 8
-                Layout.fillWidth: true
-
-                ColumnLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-
-                    Text {
-                        text: "US Style Date"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                }
-
-                Rectangle {
-                    id: reverseDayMonthSwitch
-
-                    width: 52
-                    height: 32
-                    radius: 16
-                    color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
-                    border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
-                    border.width: 2
-
-                    Rectangle {
-                        id: reverseDayMonthThumb
-
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: Theme.surface
-                        border.color: Theme.outline
-                        border.width: 1
-                        y: 2
-                        x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
-
-                        Behavior on x {
-                            NumberAnimation {
-                                duration: 200
-                                easing.type: Easing.OutCubic
-                            }
-
-                        }
-
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.topMargin: 26
-        Layout.bottomMargin: 18
-        height: 1
-        color: Theme.outline
-        opacity: 0.3
-    }
-
-    ColumnLayout {
-        spacing: 4
-        Layout.fillWidth: true
-
-        Text {
-            text: "Weather"
-            font.pixelSize: 18
-            font.bold: true
-            color: Theme.textPrimary
-            Layout.bottomMargin: 8
-        }
-
-        ColumnLayout {
-            spacing: 8
+            spacing: 4
             Layout.fillWidth: true
 
             Text {
-                text: "City"
-                font.pixelSize: 13
+                text: "Time"
+                font.pixelSize: 18 * Theme.uiScale
                 font.bold: true
                 color: Theme.textPrimary
+                Layout.bottomMargin: 8
             }
 
-            Text {
-                text: "Your city name for weather information"
-                font.pixelSize: 12
-                color: Theme.textSecondary
+            ColumnLayout {
+                spacing: 8
                 Layout.fillWidth: true
-            }
+                Layout.topMargin: 8
 
-            Rectangle {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 40
-                radius: 16
-                color: Theme.surfaceVariant
-                border.color: cityInput.activeFocus ? Theme.accentPrimary : Theme.outline
-                border.width: 1
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
 
-                TextInput {
-                    id: cityInput
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "Use 12 Hour Clock"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
 
-                    anchors.fill: parent
-                    anchors.leftMargin: 12
-                    anchors.rightMargin: 12
-                    anchors.topMargin: 6
-                    anchors.bottomMargin: 6
-                    text: Settings.settings.weatherCity
-                    font.pixelSize: 13
-                    color: Theme.textPrimary
-                    verticalAlignment: TextInput.AlignVCenter
-                    clip: true
-                    focus: true
-                    selectByMouse: true
-                    activeFocusOnTab: true
-                    inputMethodHints: Qt.ImhNone
-                    onTextChanged: {
-                        Settings.settings.weatherCity = text;
                     }
 
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.IBeamCursor
-                        onClicked: {
-                            cityInput.forceActiveFocus();
+                    Rectangle {
+                        id: use12HourClockSwitch
+
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: use12HourClockThumb
+
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+
+                            }
+
                         }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                RowLayout {
+                    spacing: 8
+                    Layout.fillWidth: true
+
+                    ColumnLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+
+                        Text {
+                            text: "US Style Date"
+                            font.pixelSize: 13 * Theme.uiScale
+                            font.bold: true
+                            color: Theme.textPrimary
+                        }
+
+                        Text {
+                            text: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY"
+                            font.pixelSize: 12 * Theme.uiScale
+                            color: Theme.textSecondary
+                            wrapMode: Text.WordWrap
+                            Layout.fillWidth: true
+                        }
+
+                    }
+
+                    Rectangle {
+                        id: reverseDayMonthSwitch
+
+                        width: 52
+                        height: 32
+                        radius: 16
+                        color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
+                        border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
+                        border.width: 2
+
+                        Rectangle {
+                            id: reverseDayMonthThumb
+
+                            width: 28
+                            height: 28
+                            radius: 14
+                            color: Theme.surface
+                            border.color: Theme.outline
+                            border.width: 1
+                            y: 2
+                            x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
+
+                            Behavior on x {
+                                NumberAnimation {
+                                    duration: 200
+                                    easing.type: Easing.OutCubic
+                                }
+
+                            }
+
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.topMargin: 26
+            Layout.bottomMargin: 18
+            height: 1
+            color: Theme.outline
+            opacity: 0.3
+        }
+
+        ColumnLayout {
+            spacing: 4
+            Layout.fillWidth: true
+
+            Text {
+                text: "Weather"
+                font.pixelSize: 18 * Theme.uiScale
+                font.bold: true
+                color: Theme.textPrimary
+                Layout.bottomMargin: 8
+            }
+
+            ColumnLayout {
+                spacing: 8
+                Layout.fillWidth: true
+
+                Text {
+                    text: "City"
+                    font.pixelSize: 13 * Theme.uiScale
+                    font.bold: true
+                    color: Theme.textPrimary
+                }
+
+                Text {
+                    text: "Your city name for weather information"
+                    font.pixelSize: 12 * Theme.uiScale
+                    color: Theme.textSecondary
+                    Layout.fillWidth: true
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 40
+                    radius: 16
+                    color: Theme.surfaceVariant
+                    border.color: cityInput.activeFocus ? Theme.accentPrimary : Theme.outline
+                    border.width: 1
+
+                    TextInput {
+                        id: cityInput
+
+                        anchors.fill: parent
+                        anchors.leftMargin: 12
+                        anchors.rightMargin: 12
+                        anchors.topMargin: 6
+                        anchors.bottomMargin: 6
+                        text: Settings.settings.weatherCity
+                        font.pixelSize: 13 * Theme.uiScale
+                        color: Theme.textPrimary
+                        verticalAlignment: TextInput.AlignVCenter
+                        clip: true
+                        focus: true
+                        selectByMouse: true
+                        activeFocusOnTab: true
+                        inputMethodHints: Qt.ImhNone
+                        onTextChanged: {
+                            Settings.settings.weatherCity = text;
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.IBeamCursor
+                            onClicked: {
+                                cityInput.forceActiveFocus();
+                            }
+                        }
+
                     }
 
                 }
@@ -280,14 +290,14 @@ ColumnLayout {
 
                     Text {
                         text: "Temperature Unit"
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
 
                     Text {
                         text: "Choose between Celsius and Fahrenheit"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                         wrapMode: Text.WordWrap
                         Layout.fillWidth: true
@@ -308,5 +318,4 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.fillHeight: true
     }
-
 }
diff --git a/Widgets/SettingsWindow/Tabs/Wallpaper.qml b/Widgets/SettingsWindow/Tabs/Wallpaper.qml
index e2fe2c7..8956a68 100644
--- a/Widgets/SettingsWindow/Tabs/Wallpaper.qml
+++ b/Widgets/SettingsWindow/Tabs/Wallpaper.qml
@@ -5,857 +5,861 @@ import qs.Components
 import qs.Services
 import qs.Settings
 
-ColumnLayout {
-    id: root
-
-    spacing: 0
+ScrollView {
     anchors.fill: parent
-    anchors.margins: 0
+    ColumnLayout {
+        id: root
 
-    ScrollView {
-        id: scrollView
+        spacing: 0
+        anchors.fill: parent
+        anchors.margins: 0
 
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        padding: 0
-        rightPadding: 12
-        clip: true
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: ScrollBar.AsNeeded
+        ScrollView {
+            id: scrollView
 
-        ColumnLayout {
-            width: scrollView.availableWidth
-            spacing: 0
-
-            Item {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 0
-            }
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            padding: 0
+            rightPadding: 12
+            clip: true
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            ScrollBar.vertical.policy: ScrollBar.AsNeeded
 
             ColumnLayout {
-                spacing: 4
-                Layout.fillWidth: true
+                width: scrollView.availableWidth
+                spacing: 0
 
-                Text {
-                    text: "Wallpaper Settings"
-                    font.pixelSize: 18
-                    font.bold: true
-                    color: Theme.textPrimary
-                    Layout.bottomMargin: 8
+                Item {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 0
                 }
 
-                // Wallpaper Settings Category
                 ColumnLayout {
-                    spacing: 8
+                    spacing: 4
                     Layout.fillWidth: true
-                    Layout.topMargin: 8
 
-                    // Wallpaper Folder
+                    Text {
+                        text: "Wallpaper Settings"
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Theme.textPrimary
+                        Layout.bottomMargin: 8
+                    }
+
+                    // Wallpaper Settings Category
                     ColumnLayout {
                         spacing: 8
                         Layout.fillWidth: true
+                        Layout.topMargin: 8
+
+                        // Wallpaper Folder
+                        ColumnLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+
+                            Text {
+                                text: "Wallpaper Folder"
+                                font.pixelSize: 13
+                                font.bold: true
+                                color: Theme.textPrimary
+                            }
+
+                            Text {
+                                text: "Path to your wallpaper folder"
+                                font.pixelSize: 12
+                                color: Theme.textSecondary
+                                wrapMode: Text.WordWrap
+                                Layout.fillWidth: true
+                            }
+
+                            RowLayout {
+                                spacing: 8
+                                Layout.fillWidth: true
+
+                                Rectangle {
+                                    Layout.fillWidth: true
+                                    Layout.preferredHeight: 40
+                                    radius: 16
+                                    color: Theme.surfaceVariant
+                                    border.color: folderInput.activeFocus ? Theme.accentPrimary : Theme.outline
+                                    border.width: 1
+
+                                    TextInput {
+                                        id: folderInput
+
+                                        anchors.fill: parent
+                                        anchors.leftMargin: 12
+                                        anchors.rightMargin: 12
+                                        anchors.topMargin: 6
+                                        anchors.bottomMargin: 6
+                                        text: Settings.settings.wallpaperFolder !== undefined ? Settings.settings.wallpaperFolder : ""
+                                        font.family: Theme.fontFamily
+                                        font.pixelSize: 13
+                                        color: Theme.textPrimary
+                                        verticalAlignment: TextInput.AlignVCenter
+                                        clip: true
+                                        selectByMouse: true
+                                        activeFocusOnTab: true
+                                        inputMethodHints: Qt.ImhUrlCharactersOnly
+                                        onTextChanged: {
+                                            Settings.settings.wallpaperFolder = text;
+                                        }
+                                    }
+
+                                    MouseArea {
+                                        anchors.fill: parent
+                                        cursorShape: Qt.IBeamCursor
+                                        onClicked: folderInput.forceActiveFocus()
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.topMargin: 26
+                    Layout.bottomMargin: 18
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.3
+                }
+
+                ColumnLayout {
+                    spacing: 4
+                    Layout.fillWidth: true
+
+                    Text {
+                        text: "Automation"
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Theme.textPrimary
+                        Layout.bottomMargin: 8
+                    }
+
+                    // Random Wallpaper
+                    ColumnLayout {
+                        spacing: 8
+                        Layout.fillWidth: true
+                        Layout.topMargin: 8
+
+                        RowLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+
+                            ColumnLayout {
+                                spacing: 4
+                                Layout.fillWidth: true
+
+                                Text {
+                                    text: "Random Wallpaper"
+                                    font.pixelSize: 13
+                                    font.bold: true
+                                    color: Theme.textPrimary
+                                }
+
+                                Text {
+                                    text: "Automatically select random wallpapers from the folder"
+                                    font.pixelSize: 12
+                                    color: Theme.textSecondary
+                                    wrapMode: Text.WordWrap
+                                    Layout.fillWidth: true
+                                }
+
+                            }
+
+                            Rectangle {
+                                id: randomWallpaperSwitch
+
+                                width: 52
+                                height: 32
+                                radius: 16
+                                color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.surfaceVariant
+                                border.color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.outline
+                                border.width: 2
+
+                                Rectangle {
+                                    id: randomWallpaperThumb
+
+                                    width: 28
+                                    height: 28
+                                    radius: 14
+                                    color: Theme.surface
+                                    border.color: Theme.outline
+                                    border.width: 1
+                                    y: 2
+                                    x: Settings.settings.randomWallpaper ? randomWallpaperSwitch.width - width - 2 : 2
+
+                                    Behavior on x {
+                                        NumberAnimation {
+                                            duration: 200
+                                            easing.type: Easing.OutCubic
+                                        }
+
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    anchors.fill: parent
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper;
+                                    }
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                    // Use Wallpaper Theme
+                    ColumnLayout {
+                        spacing: 8
+                        Layout.fillWidth: true
+                        Layout.topMargin: 8
+
+                        RowLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+
+                            ColumnLayout {
+                                spacing: 4
+                                Layout.fillWidth: true
+
+                                Text {
+                                    text: "Use Wallpaper Theme"
+                                    font.pixelSize: 13
+                                    font.bold: true
+                                    color: Theme.textPrimary
+                                }
+
+                                Text {
+                                    text: "Automatically adjust theme colors based on wallpaper"
+                                    font.pixelSize: 12
+                                    color: Theme.textSecondary
+                                    wrapMode: Text.WordWrap
+                                    Layout.fillWidth: true
+                                }
+
+                            }
+
+                            Rectangle {
+                                id: wallpaperThemeSwitch
+
+                                width: 52
+                                height: 32
+                                radius: 16
+                                color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.surfaceVariant
+                                border.color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.outline
+                                border.width: 2
+
+                                Rectangle {
+                                    id: wallpaperThemeThumb
+
+                                    width: 28
+                                    height: 28
+                                    radius: 14
+                                    color: Theme.surface
+                                    border.color: Theme.outline
+                                    border.width: 1
+                                    y: 2
+                                    x: Settings.settings.useWallpaperTheme ? wallpaperThemeSwitch.width - width - 2 : 2
+
+                                    Behavior on x {
+                                        NumberAnimation {
+                                            duration: 200
+                                            easing.type: Easing.OutCubic
+                                        }
+
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    anchors.fill: parent
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme;
+                                    }
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                    // Wallpaper Interval
+                    ColumnLayout {
+                        spacing: 8
+                        Layout.fillWidth: true
+                        Layout.topMargin: 8
 
                         Text {
-                            text: "Wallpaper Folder"
+                            text: "Wallpaper Interval"
                             font.pixelSize: 13
                             font.bold: true
                             color: Theme.textPrimary
                         }
 
                         Text {
-                            text: "Path to your wallpaper folder"
+                            text: "How often to change wallpapers automatically (in seconds)"
                             font.pixelSize: 12
                             color: Theme.textSecondary
                             wrapMode: Text.WordWrap
                             Layout.fillWidth: true
                         }
 
+                        RowLayout {
+                            Layout.fillWidth: true
+
+                            Text {
+                                text: Settings.settings.wallpaperInterval + " seconds"
+                                font.pixelSize: 13
+                                color: Theme.textPrimary
+                            }
+
+                            Item {
+                                Layout.fillWidth: true
+                            }
+
+                        }
+
+                        Slider {
+                            id: intervalSlider
+
+                            Layout.fillWidth: true
+                            from: 10
+                            to: 900
+                            stepSize: 10
+                            value: Settings.settings.wallpaperInterval
+                            snapMode: Slider.SnapAlways
+                            onMoved: {
+                                Settings.settings.wallpaperInterval = Math.round(value);
+                            }
+
+                            background: Rectangle {
+                                x: intervalSlider.leftPadding
+                                y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2
+                                implicitWidth: 200
+                                implicitHeight: 4
+                                width: intervalSlider.availableWidth
+                                height: implicitHeight
+                                radius: 2
+                                color: Theme.surfaceVariant
+
+                                Rectangle {
+                                    width: intervalSlider.visualPosition * parent.width
+                                    height: parent.height
+                                    color: Theme.accentPrimary
+                                    radius: 2
+                                }
+
+                            }
+
+                            handle: Rectangle {
+                                x: intervalSlider.leftPadding + intervalSlider.visualPosition * (intervalSlider.availableWidth - width)
+                                y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2
+                                implicitWidth: 20
+                                implicitHeight: 20
+                                radius: 10
+                                color: intervalSlider.pressed ? Theme.surfaceVariant : Theme.surface
+                                border.color: Theme.accentPrimary
+                                border.width: 2
+                            }
+
+                        }
+
+                    }
+
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.topMargin: 26
+                    Layout.bottomMargin: 18
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.3
+                }
+
+                ColumnLayout {
+                    spacing: 4
+                    Layout.fillWidth: true
+
+                    Text {
+                        text: "SWWW"
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Theme.textPrimary
+                        Layout.bottomMargin: 8
+                    }
+
+                    // Use SWWW
+                    ColumnLayout {
+                        spacing: 8
+                        Layout.fillWidth: true
+                        Layout.topMargin: 8
+
                         RowLayout {
                             spacing: 8
                             Layout.fillWidth: true
 
+                            ColumnLayout {
+                                spacing: 4
+                                Layout.fillWidth: true
+
+                                Text {
+                                    text: "Use SWWW"
+                                    font.pixelSize: 13
+                                    font.bold: true
+                                    color: Theme.textPrimary
+                                }
+
+                                Text {
+                                    text: "Use SWWW daemon for advanced wallpaper management"
+                                    font.pixelSize: 12
+                                    color: Theme.textSecondary
+                                    wrapMode: Text.WordWrap
+                                    Layout.fillWidth: true
+                                }
+
+                            }
+
+                            Rectangle {
+                                id: swwwSwitch
+
+                                width: 52
+                                height: 32
+                                radius: 16
+                                color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.surfaceVariant
+                                border.color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.outline
+                                border.width: 2
+
+                                Rectangle {
+                                    id: swwwThumb
+
+                                    width: 28
+                                    height: 28
+                                    radius: 14
+                                    color: Theme.surface
+                                    border.color: Theme.outline
+                                    border.width: 1
+                                    y: 2
+                                    x: Settings.settings.useSWWW ? swwwSwitch.width - width - 2 : 2
+
+                                    Behavior on x {
+                                        NumberAnimation {
+                                            duration: 200
+                                            easing.type: Easing.OutCubic
+                                        }
+
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    anchors.fill: parent
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        Settings.settings.useSWWW = !Settings.settings.useSWWW;
+                                    }
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                    // SWWW Settings (only visible when useSWWW is enabled)
+                    ColumnLayout {
+                        spacing: 8
+                        Layout.fillWidth: true
+                        Layout.topMargin: 8
+                        visible: Settings.settings.useSWWW
+
+                        // Resize Mode
+                        ColumnLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+
+                            Text {
+                                text: "Resize Mode"
+                                font.pixelSize: 13
+                                font.bold: true
+                                color: Theme.textPrimary
+                            }
+
+                            Text {
+                                text: "How SWWW should resize wallpapers to fit the screen"
+                                font.pixelSize: 12
+                                color: Theme.textSecondary
+                                wrapMode: Text.WordWrap
+                                Layout.fillWidth: true
+                            }
+
                             Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 40
                                 radius: 16
                                 color: Theme.surfaceVariant
-                                border.color: folderInput.activeFocus ? Theme.accentPrimary : Theme.outline
+                                border.color: resizeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
                                 border.width: 1
 
-                                TextInput {
-                                    id: folderInput
+                                ComboBox {
+                                    id: resizeComboBox
 
                                     anchors.fill: parent
                                     anchors.leftMargin: 12
                                     anchors.rightMargin: 12
                                     anchors.topMargin: 6
                                     anchors.bottomMargin: 6
-                                    text: Settings.settings.wallpaperFolder !== undefined ? Settings.settings.wallpaperFolder : ""
-                                    font.family: Theme.fontFamily
+                                    model: ["no", "crop", "fit", "stretch"]
+                                    currentIndex: model.indexOf(Settings.settings.wallpaperResize)
+                                    onActivated: {
+                                        Settings.settings.wallpaperResize = model[index];
+                                    }
+
+                                    background: Rectangle {
+                                        color: "transparent"
+                                    }
+
+                                    contentItem: Text {
+                                        text: resizeComboBox.displayText
+                                        font: resizeComboBox.font
+                                        color: Theme.textPrimary
+                                        verticalAlignment: Text.AlignVCenter
+                                        horizontalAlignment: Text.AlignLeft
+                                    }
+
+                                    popup: Popup {
+                                        y: resizeComboBox.height
+                                        width: resizeComboBox.width
+                                        implicitHeight: contentItem.implicitHeight
+                                        padding: 1
+
+                                        contentItem: ListView {
+                                            clip: true
+                                            implicitHeight: contentHeight
+                                            model: resizeComboBox.popup.visible ? resizeComboBox.delegateModel : null
+                                            currentIndex: resizeComboBox.highlightedIndex
+
+                                            ScrollIndicator.vertical: ScrollIndicator {
+                                            }
+
+                                        }
+
+                                        background: Rectangle {
+                                            color: Theme.surface
+                                            border.color: Theme.outline
+                                            border.width: 1
+                                            radius: 8
+                                        }
+
+                                    }
+
+                                    delegate: ItemDelegate {
+                                        width: resizeComboBox.width
+                                        highlighted: resizeComboBox.highlightedIndex === index
+
+                                        contentItem: Text {
+                                            text: modelData
+                                            color: Theme.textPrimary
+                                            font: resizeComboBox.font
+                                            verticalAlignment: Text.AlignVCenter
+                                            horizontalAlignment: Text.AlignLeft
+                                        }
+
+                                        background: Rectangle {
+                                            color: parent.highlighted ? Theme.accentPrimary : "transparent"
+                                        }
+
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Transition Type
+                        ColumnLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+                            Layout.topMargin: 8
+
+                            Text {
+                                text: "Transition Type"
+                                font.pixelSize: 13
+                                font.bold: true
+                                color: Theme.textPrimary
+                            }
+
+                            Text {
+                                text: "Animation type when switching between wallpapers"
+                                font.pixelSize: 12
+                                color: Theme.textSecondary
+                                wrapMode: Text.WordWrap
+                                Layout.fillWidth: true
+                            }
+
+                            Rectangle {
+                                Layout.fillWidth: true
+                                Layout.preferredHeight: 40
+                                radius: 16
+                                color: Theme.surfaceVariant
+                                border.color: transitionTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
+                                border.width: 1
+
+                                ComboBox {
+                                    id: transitionTypeComboBox
+
+                                    anchors.fill: parent
+                                    anchors.leftMargin: 12
+                                    anchors.rightMargin: 12
+                                    anchors.topMargin: 6
+                                    anchors.bottomMargin: 6
+                                    model: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"]
+                                    currentIndex: model.indexOf(Settings.settings.transitionType)
+                                    onActivated: {
+                                        Settings.settings.transitionType = model[index];
+                                    }
+
+                                    background: Rectangle {
+                                        color: "transparent"
+                                    }
+
+                                    contentItem: Text {
+                                        text: transitionTypeComboBox.displayText
+                                        font: transitionTypeComboBox.font
+                                        color: Theme.textPrimary
+                                        verticalAlignment: Text.AlignVCenter
+                                        horizontalAlignment: Text.AlignLeft
+                                    }
+
+                                    popup: Popup {
+                                        y: transitionTypeComboBox.height
+                                        width: transitionTypeComboBox.width
+                                        implicitHeight: contentItem.implicitHeight
+                                        padding: 1
+
+                                        contentItem: ListView {
+                                            clip: true
+                                            implicitHeight: contentHeight
+                                            model: transitionTypeComboBox.popup.visible ? transitionTypeComboBox.delegateModel : null
+                                            currentIndex: transitionTypeComboBox.highlightedIndex
+
+                                            ScrollIndicator.vertical: ScrollIndicator {
+                                            }
+
+                                        }
+
+                                        background: Rectangle {
+                                            color: Theme.surface
+                                            border.color: Theme.outline
+                                            border.width: 1
+                                            radius: 8
+                                        }
+
+                                    }
+
+                                    delegate: ItemDelegate {
+                                        width: transitionTypeComboBox.width
+                                        highlighted: transitionTypeComboBox.highlightedIndex === index
+
+                                        contentItem: Text {
+                                            text: modelData
+                                            color: Theme.textPrimary
+                                            font: transitionTypeComboBox.font
+                                            verticalAlignment: Text.AlignVCenter
+                                            horizontalAlignment: Text.AlignLeft
+                                        }
+
+                                        background: Rectangle {
+                                            color: parent.highlighted ? Theme.accentPrimary : "transparent"
+                                        }
+
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Transition FPS
+                        ColumnLayout {
+                            spacing: 8
+                            Layout.fillWidth: true
+                            Layout.topMargin: 8
+
+                            Text {
+                                text: "Transition FPS"
+                                font.pixelSize: 13
+                                font.bold: true
+                                color: Theme.textPrimary
+                            }
+
+                            Text {
+                                text: "Frames per second for transition animations"
+                                font.pixelSize: 12
+                                color: Theme.textSecondary
+                                wrapMode: Text.WordWrap
+                                Layout.fillWidth: true
+                            }
+
+                            RowLayout {
+                                Layout.fillWidth: true
+
+                                Text {
+                                    text: Settings.settings.transitionFps + " FPS"
                                     font.pixelSize: 13
                                     color: Theme.textPrimary
-                                    verticalAlignment: TextInput.AlignVCenter
-                                    clip: true
-                                    selectByMouse: true
-                                    activeFocusOnTab: true
-                                    inputMethodHints: Qt.ImhUrlCharactersOnly
-                                    onTextChanged: {
-                                        Settings.settings.wallpaperFolder = text;
-                                    }
                                 }
 
-                                MouseArea {
-                                    anchors.fill: parent
-                                    cursorShape: Qt.IBeamCursor
-                                    onClicked: folderInput.forceActiveFocus()
+                                Item {
+                                    Layout.fillWidth: true
                                 }
 
                             }
 
-                        }
+                            Slider {
+                                id: fpsSlider
 
-                    }
-
-                }
-
-            }
-
-            Rectangle {
-                Layout.fillWidth: true
-                Layout.topMargin: 26
-                Layout.bottomMargin: 18
-                height: 1
-                color: Theme.outline
-                opacity: 0.3
-            }
-
-            ColumnLayout {
-                spacing: 4
-                Layout.fillWidth: true
-
-                Text {
-                    text: "Automation"
-                    font.pixelSize: 18
-                    font.bold: true
-                    color: Theme.textPrimary
-                    Layout.bottomMargin: 8
-                }
-
-                // Random Wallpaper
-                ColumnLayout {
-                    spacing: 8
-                    Layout.fillWidth: true
-                    Layout.topMargin: 8
-
-                    RowLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-
-                        ColumnLayout {
-                            spacing: 4
-                            Layout.fillWidth: true
-
-                            Text {
-                                text: "Random Wallpaper"
-                                font.pixelSize: 13
-                                font.bold: true
-                                color: Theme.textPrimary
-                            }
-
-                            Text {
-                                text: "Automatically select random wallpapers from the folder"
-                                font.pixelSize: 12
-                                color: Theme.textSecondary
-                                wrapMode: Text.WordWrap
                                 Layout.fillWidth: true
-                            }
-
-                        }
-
-                        Rectangle {
-                            id: randomWallpaperSwitch
-
-                            width: 52
-                            height: 32
-                            radius: 16
-                            color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.surfaceVariant
-                            border.color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.outline
-                            border.width: 2
-
-                            Rectangle {
-                                id: randomWallpaperThumb
-
-                                width: 28
-                                height: 28
-                                radius: 14
-                                color: Theme.surface
-                                border.color: Theme.outline
-                                border.width: 1
-                                y: 2
-                                x: Settings.settings.randomWallpaper ? randomWallpaperSwitch.width - width - 2 : 2
-
-                                Behavior on x {
-                                    NumberAnimation {
-                                        duration: 200
-                                        easing.type: Easing.OutCubic
-                                    }
-
-                                }
-
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper;
-                                }
-                            }
-
-                        }
-
-                    }
-
-                }
-
-                // Use Wallpaper Theme
-                ColumnLayout {
-                    spacing: 8
-                    Layout.fillWidth: true
-                    Layout.topMargin: 8
-
-                    RowLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-
-                        ColumnLayout {
-                            spacing: 4
-                            Layout.fillWidth: true
-
-                            Text {
-                                text: "Use Wallpaper Theme"
-                                font.pixelSize: 13
-                                font.bold: true
-                                color: Theme.textPrimary
-                            }
-
-                            Text {
-                                text: "Automatically adjust theme colors based on wallpaper"
-                                font.pixelSize: 12
-                                color: Theme.textSecondary
-                                wrapMode: Text.WordWrap
-                                Layout.fillWidth: true
-                            }
-
-                        }
-
-                        Rectangle {
-                            id: wallpaperThemeSwitch
-
-                            width: 52
-                            height: 32
-                            radius: 16
-                            color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.surfaceVariant
-                            border.color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.outline
-                            border.width: 2
-
-                            Rectangle {
-                                id: wallpaperThemeThumb
-
-                                width: 28
-                                height: 28
-                                radius: 14
-                                color: Theme.surface
-                                border.color: Theme.outline
-                                border.width: 1
-                                y: 2
-                                x: Settings.settings.useWallpaperTheme ? wallpaperThemeSwitch.width - width - 2 : 2
-
-                                Behavior on x {
-                                    NumberAnimation {
-                                        duration: 200
-                                        easing.type: Easing.OutCubic
-                                    }
-
-                                }
-
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme;
-                                }
-                            }
-
-                        }
-
-                    }
-
-                }
-
-                // Wallpaper Interval
-                ColumnLayout {
-                    spacing: 8
-                    Layout.fillWidth: true
-                    Layout.topMargin: 8
-
-                    Text {
-                        text: "Wallpaper Interval"
-                        font.pixelSize: 13
-                        font.bold: true
-                        color: Theme.textPrimary
-                    }
-
-                    Text {
-                        text: "How often to change wallpapers automatically (in seconds)"
-                        font.pixelSize: 12
-                        color: Theme.textSecondary
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                    }
-
-                    RowLayout {
-                        Layout.fillWidth: true
-
-                        Text {
-                            text: Settings.settings.wallpaperInterval + " seconds"
-                            font.pixelSize: 13
-                            color: Theme.textPrimary
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                    }
-
-                    Slider {
-                        id: intervalSlider
-
-                        Layout.fillWidth: true
-                        from: 10
-                        to: 900
-                        stepSize: 10
-                        value: Settings.settings.wallpaperInterval
-                        snapMode: Slider.SnapAlways
-                        onMoved: {
-                            Settings.settings.wallpaperInterval = Math.round(value);
-                        }
-
-                        background: Rectangle {
-                            x: intervalSlider.leftPadding
-                            y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 200
-                            implicitHeight: 4
-                            width: intervalSlider.availableWidth
-                            height: implicitHeight
-                            radius: 2
-                            color: Theme.surfaceVariant
-
-                            Rectangle {
-                                width: intervalSlider.visualPosition * parent.width
-                                height: parent.height
-                                color: Theme.accentPrimary
-                                radius: 2
-                            }
-
-                        }
-
-                        handle: Rectangle {
-                            x: intervalSlider.leftPadding + intervalSlider.visualPosition * (intervalSlider.availableWidth - width)
-                            y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 20
-                            implicitHeight: 20
-                            radius: 10
-                            color: intervalSlider.pressed ? Theme.surfaceVariant : Theme.surface
-                            border.color: Theme.accentPrimary
-                            border.width: 2
-                        }
-
-                    }
-
-                }
-
-            }
-
-            Rectangle {
-                Layout.fillWidth: true
-                Layout.topMargin: 26
-                Layout.bottomMargin: 18
-                height: 1
-                color: Theme.outline
-                opacity: 0.3
-            }
-
-            ColumnLayout {
-                spacing: 4
-                Layout.fillWidth: true
-
-                Text {
-                    text: "SWWW"
-                    font.pixelSize: 18
-                    font.bold: true
-                    color: Theme.textPrimary
-                    Layout.bottomMargin: 8
-                }
-
-                // Use SWWW
-                ColumnLayout {
-                    spacing: 8
-                    Layout.fillWidth: true
-                    Layout.topMargin: 8
-
-                    RowLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-
-                        ColumnLayout {
-                            spacing: 4
-                            Layout.fillWidth: true
-
-                            Text {
-                                text: "Use SWWW"
-                                font.pixelSize: 13
-                                font.bold: true
-                                color: Theme.textPrimary
-                            }
-
-                            Text {
-                                text: "Use SWWW daemon for advanced wallpaper management"
-                                font.pixelSize: 12
-                                color: Theme.textSecondary
-                                wrapMode: Text.WordWrap
-                                Layout.fillWidth: true
-                            }
-
-                        }
-
-                        Rectangle {
-                            id: swwwSwitch
-
-                            width: 52
-                            height: 32
-                            radius: 16
-                            color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.surfaceVariant
-                            border.color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.outline
-                            border.width: 2
-
-                            Rectangle {
-                                id: swwwThumb
-
-                                width: 28
-                                height: 28
-                                radius: 14
-                                color: Theme.surface
-                                border.color: Theme.outline
-                                border.width: 1
-                                y: 2
-                                x: Settings.settings.useSWWW ? swwwSwitch.width - width - 2 : 2
-
-                                Behavior on x {
-                                    NumberAnimation {
-                                        duration: 200
-                                        easing.type: Easing.OutCubic
-                                    }
-
-                                }
-
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    Settings.settings.useSWWW = !Settings.settings.useSWWW;
-                                }
-                            }
-
-                        }
-
-                    }
-
-                }
-
-                // SWWW Settings (only visible when useSWWW is enabled)
-                ColumnLayout {
-                    spacing: 8
-                    Layout.fillWidth: true
-                    Layout.topMargin: 8
-                    visible: Settings.settings.useSWWW
-
-                    // Resize Mode
-                    ColumnLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-
-                        Text {
-                            text: "Resize Mode"
-                            font.pixelSize: 13
-                            font.bold: true
-                            color: Theme.textPrimary
-                        }
-
-                        Text {
-                            text: "How SWWW should resize wallpapers to fit the screen"
-                            font.pixelSize: 12
-                            color: Theme.textSecondary
-                            wrapMode: Text.WordWrap
-                            Layout.fillWidth: true
-                        }
-
-                        Rectangle {
-                            Layout.fillWidth: true
-                            Layout.preferredHeight: 40
-                            radius: 16
-                            color: Theme.surfaceVariant
-                            border.color: resizeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
-                            border.width: 1
-
-                            ComboBox {
-                                id: resizeComboBox
-
-                                anchors.fill: parent
-                                anchors.leftMargin: 12
-                                anchors.rightMargin: 12
-                                anchors.topMargin: 6
-                                anchors.bottomMargin: 6
-                                model: ["no", "crop", "fit", "stretch"]
-                                currentIndex: model.indexOf(Settings.settings.wallpaperResize)
-                                onActivated: {
-                                    Settings.settings.wallpaperResize = model[index];
+                                from: 30
+                                to: 500
+                                stepSize: 5
+                                value: Settings.settings.transitionFps
+                                snapMode: Slider.SnapAlways
+                                onMoved: {
+                                    Settings.settings.transitionFps = Math.round(value);
                                 }
 
                                 background: Rectangle {
-                                    color: "transparent"
-                                }
+                                    x: fpsSlider.leftPadding
+                                    y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2
+                                    implicitWidth: 200
+                                    implicitHeight: 4
+                                    width: fpsSlider.availableWidth
+                                    height: implicitHeight
+                                    radius: 2
+                                    color: Theme.surfaceVariant
 
-                                contentItem: Text {
-                                    text: resizeComboBox.displayText
-                                    font: resizeComboBox.font
-                                    color: Theme.textPrimary
-                                    verticalAlignment: Text.AlignVCenter
-                                    horizontalAlignment: Text.AlignLeft
-                                }
-
-                                popup: Popup {
-                                    y: resizeComboBox.height
-                                    width: resizeComboBox.width
-                                    implicitHeight: contentItem.implicitHeight
-                                    padding: 1
-
-                                    contentItem: ListView {
-                                        clip: true
-                                        implicitHeight: contentHeight
-                                        model: resizeComboBox.popup.visible ? resizeComboBox.delegateModel : null
-                                        currentIndex: resizeComboBox.highlightedIndex
-
-                                        ScrollIndicator.vertical: ScrollIndicator {
-                                        }
-
-                                    }
-
-                                    background: Rectangle {
-                                        color: Theme.surface
-                                        border.color: Theme.outline
-                                        border.width: 1
-                                        radius: 8
+                                    Rectangle {
+                                        width: fpsSlider.visualPosition * parent.width
+                                        height: parent.height
+                                        color: Theme.accentPrimary
+                                        radius: 2
                                     }
 
                                 }
 
-                                delegate: ItemDelegate {
-                                    width: resizeComboBox.width
-                                    highlighted: resizeComboBox.highlightedIndex === index
-
-                                    contentItem: Text {
-                                        text: modelData
-                                        color: Theme.textPrimary
-                                        font: resizeComboBox.font
-                                        verticalAlignment: Text.AlignVCenter
-                                        horizontalAlignment: Text.AlignLeft
-                                    }
-
-                                    background: Rectangle {
-                                        color: parent.highlighted ? Theme.accentPrimary : "transparent"
-                                    }
-
+                                handle: Rectangle {
+                                    x: fpsSlider.leftPadding + fpsSlider.visualPosition * (fpsSlider.availableWidth - width)
+                                    y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2
+                                    implicitWidth: 20
+                                    implicitHeight: 20
+                                    radius: 10
+                                    color: fpsSlider.pressed ? Theme.surfaceVariant : Theme.surface
+                                    border.color: Theme.accentPrimary
+                                    border.width: 2
                                 }
 
                             }
 
                         }
 
-                    }
-
-                    // Transition Type
-                    ColumnLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-                        Layout.topMargin: 8
-
-                        Text {
-                            text: "Transition Type"
-                            font.pixelSize: 13
-                            font.bold: true
-                            color: Theme.textPrimary
-                        }
-
-                        Text {
-                            text: "Animation type when switching between wallpapers"
-                            font.pixelSize: 12
-                            color: Theme.textSecondary
-                            wrapMode: Text.WordWrap
+                        // Transition Duration
+                        ColumnLayout {
+                            spacing: 8
                             Layout.fillWidth: true
-                        }
+                            Layout.topMargin: 8
 
-                        Rectangle {
-                            Layout.fillWidth: true
-                            Layout.preferredHeight: 40
-                            radius: 16
-                            color: Theme.surfaceVariant
-                            border.color: transitionTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
-                            border.width: 1
+                            Text {
+                                text: "Transition Duration"
+                                font.pixelSize: 13
+                                font.bold: true
+                                color: Theme.textPrimary
+                            }
 
-                            ComboBox {
-                                id: transitionTypeComboBox
+                            Text {
+                                text: "Duration of transition animations in seconds"
+                                font.pixelSize: 12
+                                color: Theme.textSecondary
+                                wrapMode: Text.WordWrap
+                                Layout.fillWidth: true
+                            }
 
-                                anchors.fill: parent
-                                anchors.leftMargin: 12
-                                anchors.rightMargin: 12
-                                anchors.topMargin: 6
-                                anchors.bottomMargin: 6
-                                model: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"]
-                                currentIndex: model.indexOf(Settings.settings.transitionType)
-                                onActivated: {
-                                    Settings.settings.transitionType = model[index];
+                            RowLayout {
+                                Layout.fillWidth: true
+
+                                Text {
+                                    text: Settings.settings.transitionDuration.toFixed(3) + " seconds"
+                                    font.pixelSize: 13
+                                    color: Theme.textPrimary
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                            }
+
+                            Slider {
+                                id: durationSlider
+
+                                Layout.fillWidth: true
+                                from: 0.25
+                                to: 10
+                                stepSize: 0.05
+                                value: Settings.settings.transitionDuration
+                                snapMode: Slider.SnapAlways
+                                onMoved: {
+                                    Settings.settings.transitionDuration = value;
                                 }
 
                                 background: Rectangle {
-                                    color: "transparent"
-                                }
-
-                                contentItem: Text {
-                                    text: transitionTypeComboBox.displayText
-                                    font: transitionTypeComboBox.font
-                                    color: Theme.textPrimary
-                                    verticalAlignment: Text.AlignVCenter
-                                    horizontalAlignment: Text.AlignLeft
-                                }
-
-                                popup: Popup {
-                                    y: transitionTypeComboBox.height
-                                    width: transitionTypeComboBox.width
-                                    implicitHeight: contentItem.implicitHeight
-                                    padding: 1
-
-                                    contentItem: ListView {
-                                        clip: true
-                                        implicitHeight: contentHeight
-                                        model: transitionTypeComboBox.popup.visible ? transitionTypeComboBox.delegateModel : null
-                                        currentIndex: transitionTypeComboBox.highlightedIndex
-
-                                        ScrollIndicator.vertical: ScrollIndicator {
-                                        }
-
-                                    }
-
-                                    background: Rectangle {
-                                        color: Theme.surface
-                                        border.color: Theme.outline
-                                        border.width: 1
-                                        radius: 8
-                                    }
-
-                                }
-
-                                delegate: ItemDelegate {
-                                    width: transitionTypeComboBox.width
-                                    highlighted: transitionTypeComboBox.highlightedIndex === index
-
-                                    contentItem: Text {
-                                        text: modelData
-                                        color: Theme.textPrimary
-                                        font: transitionTypeComboBox.font
-                                        verticalAlignment: Text.AlignVCenter
-                                        horizontalAlignment: Text.AlignLeft
-                                    }
-
-                                    background: Rectangle {
-                                        color: parent.highlighted ? Theme.accentPrimary : "transparent"
-                                    }
-
-                                }
-
-                            }
-
-                        }
-
-                    }
-
-                    // Transition FPS
-                    ColumnLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-                        Layout.topMargin: 8
-
-                        Text {
-                            text: "Transition FPS"
-                            font.pixelSize: 13
-                            font.bold: true
-                            color: Theme.textPrimary
-                        }
-
-                        Text {
-                            text: "Frames per second for transition animations"
-                            font.pixelSize: 12
-                            color: Theme.textSecondary
-                            wrapMode: Text.WordWrap
-                            Layout.fillWidth: true
-                        }
-
-                        RowLayout {
-                            Layout.fillWidth: true
-
-                            Text {
-                                text: Settings.settings.transitionFps + " FPS"
-                                font.pixelSize: 13
-                                color: Theme.textPrimary
-                            }
-
-                            Item {
-                                Layout.fillWidth: true
-                            }
-
-                        }
-
-                        Slider {
-                            id: fpsSlider
-
-                            Layout.fillWidth: true
-                            from: 30
-                            to: 500
-                            stepSize: 5
-                            value: Settings.settings.transitionFps
-                            snapMode: Slider.SnapAlways
-                            onMoved: {
-                                Settings.settings.transitionFps = Math.round(value);
-                            }
-
-                            background: Rectangle {
-                                x: fpsSlider.leftPadding
-                                y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2
-                                implicitWidth: 200
-                                implicitHeight: 4
-                                width: fpsSlider.availableWidth
-                                height: implicitHeight
-                                radius: 2
-                                color: Theme.surfaceVariant
-
-                                Rectangle {
-                                    width: fpsSlider.visualPosition * parent.width
-                                    height: parent.height
-                                    color: Theme.accentPrimary
+                                    x: durationSlider.leftPadding
+                                    y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2
+                                    implicitWidth: 200
+                                    implicitHeight: 4
+                                    width: durationSlider.availableWidth
+                                    height: implicitHeight
                                     radius: 2
+                                    color: Theme.surfaceVariant
+
+                                    Rectangle {
+                                        width: durationSlider.visualPosition * parent.width
+                                        height: parent.height
+                                        color: Theme.accentPrimary
+                                        radius: 2
+                                    }
+
                                 }
 
-                            }
-
-                            handle: Rectangle {
-                                x: fpsSlider.leftPadding + fpsSlider.visualPosition * (fpsSlider.availableWidth - width)
-                                y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2
-                                implicitWidth: 20
-                                implicitHeight: 20
-                                radius: 10
-                                color: fpsSlider.pressed ? Theme.surfaceVariant : Theme.surface
-                                border.color: Theme.accentPrimary
-                                border.width: 2
-                            }
-
-                        }
-
-                    }
-
-                    // Transition Duration
-                    ColumnLayout {
-                        spacing: 8
-                        Layout.fillWidth: true
-                        Layout.topMargin: 8
-
-                        Text {
-                            text: "Transition Duration"
-                            font.pixelSize: 13
-                            font.bold: true
-                            color: Theme.textPrimary
-                        }
-
-                        Text {
-                            text: "Duration of transition animations in seconds"
-                            font.pixelSize: 12
-                            color: Theme.textSecondary
-                            wrapMode: Text.WordWrap
-                            Layout.fillWidth: true
-                        }
-
-                        RowLayout {
-                            Layout.fillWidth: true
-
-                            Text {
-                                text: Settings.settings.transitionDuration.toFixed(3) + " seconds"
-                                font.pixelSize: 13
-                                color: Theme.textPrimary
-                            }
-
-                            Item {
-                                Layout.fillWidth: true
-                            }
-
-                        }
-
-                        Slider {
-                            id: durationSlider
-
-                            Layout.fillWidth: true
-                            from: 0.25
-                            to: 10
-                            stepSize: 0.05
-                            value: Settings.settings.transitionDuration
-                            snapMode: Slider.SnapAlways
-                            onMoved: {
-                                Settings.settings.transitionDuration = value;
-                            }
-
-                            background: Rectangle {
-                                x: durationSlider.leftPadding
-                                y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2
-                                implicitWidth: 200
-                                implicitHeight: 4
-                                width: durationSlider.availableWidth
-                                height: implicitHeight
-                                radius: 2
-                                color: Theme.surfaceVariant
-
-                                Rectangle {
-                                    width: durationSlider.visualPosition * parent.width
-                                    height: parent.height
-                                    color: Theme.accentPrimary
-                                    radius: 2
+                                handle: Rectangle {
+                                    x: durationSlider.leftPadding + durationSlider.visualPosition * (durationSlider.availableWidth - width)
+                                    y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2
+                                    implicitWidth: 20
+                                    implicitHeight: 20
+                                    radius: 10
+                                    color: durationSlider.pressed ? Theme.surfaceVariant : Theme.surface
+                                    border.color: Theme.accentPrimary
+                                    border.width: 2
                                 }
 
                             }
 
-                            handle: Rectangle {
-                                x: durationSlider.leftPadding + durationSlider.visualPosition * (durationSlider.availableWidth - width)
-                                y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2
-                                implicitWidth: 20
-                                implicitHeight: 20
-                                radius: 10
-                                color: durationSlider.pressed ? Theme.surfaceVariant : Theme.surface
-                                border.color: Theme.accentPrimary
-                                border.width: 2
-                            }
-
                         }
 
                     }
diff --git a/Widgets/SidePanel/Button.qml b/Widgets/SidePanel/Button.qml
index ba38128..94c9e65 100644
--- a/Widgets/SidePanel/Button.qml
+++ b/Widgets/SidePanel/Button.qml
@@ -44,7 +44,7 @@ Item {
         id: iconText
         text: "dashboard"
         font.family: isActive ? "Material Symbols Rounded" : "Material Symbols Outlined"
-        font.pixelSize: 16
+        font.pixelSize: 16 * Theme.uiScale
         color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary
         anchors.centerIn: parent
         z: 1
diff --git a/Widgets/SidePanel/Music.qml b/Widgets/SidePanel/Music.qml
index 6d24310..c51a546 100644
--- a/Widgets/SidePanel/Music.qml
+++ b/Widgets/SidePanel/Music.qml
@@ -8,15 +8,15 @@ import qs.Services
 
 Rectangle {
     id: musicCard
-    width: 360
-    height: 250
+    width: 360 * Theme.uiScale
+    height: 250 * Theme.uiScale
     color: "transparent"
 
     Rectangle {
         id: card
         anchors.fill: parent
         color: Theme.surface
-        radius: 18
+        radius: 18 * Theme.uiScale
 
         // Show fallback UI if no player is available
         Item {
@@ -26,12 +26,12 @@ Rectangle {
 
             ColumnLayout {
                 anchors.centerIn: parent
-                spacing: 16
+                spacing: 16 * Theme.uiScale
 
                 Text {
                     text: "music_note"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: Theme.fontSizeHeader
+                    font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
                     color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
                     Layout.alignment: Qt.AlignHCenter
                 }
@@ -40,7 +40,7 @@ Rectangle {
                     text: MusicManager.hasPlayer ? "No controllable player selected" : "No music player detected"
                     color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
                     font.family: Theme.fontFamily
-                    font.pixelSize: Theme.fontSizeSmall
+                    font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
                     Layout.alignment: Qt.AlignHCenter
                 }
             }
@@ -49,45 +49,45 @@ Rectangle {
         // Main player UI
         ColumnLayout {
             anchors.fill: parent
-            anchors.margins: 18
-            spacing: 12
+            anchors.margins: 18 * Theme.uiScale
+            spacing: 12 * Theme.uiScale
             visible: !!MusicManager.currentPlayer
 
             // Player selector
             ComboBox {
                 id: playerSelector
                 Layout.fillWidth: true
-                Layout.preferredHeight: 40
+                Layout.preferredHeight: 40 * Theme.uiScale
                 visible: MusicManager.getAvailablePlayers().length > 1
                 model: MusicManager.getAvailablePlayers()
                 textRole: "identity"
                 currentIndex: MusicManager.selectedPlayerIndex
 
                 background: Rectangle {
-                    implicitWidth: 120
-                    implicitHeight: 40
+                    implicitWidth: 120 * Theme.uiScale
+                    implicitHeight: 40 * Theme.uiScale
                     color: Theme.surfaceVariant
                     border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline
-                    border.width: 1
-                    radius: 16
+                    border.width: 1 * Theme.uiScale
+                    radius: 16 * Theme.uiScale
                 }
 
                 contentItem: Text {
-                    leftPadding: 12
+                    leftPadding: 12 * Theme.uiScale
                     rightPadding: playerSelector.indicator.width + playerSelector.spacing
                     text: playerSelector.displayText
-                    font.pixelSize: 13
+                    font.pixelSize: 13 * Theme.uiScale
                     color: Theme.textPrimary
                     verticalAlignment: Text.AlignVCenter
                     elide: Text.ElideRight
                 }
 
                 indicator: Text {
-                    x: playerSelector.width - width - 12
+                    x: playerSelector.width - width - 12 * Theme.uiScale
                     y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
                     text: "arrow_drop_down"
                     font.family: "Material Symbols Outlined"
-                    font.pixelSize: 24
+                    font.pixelSize: 24 * Theme.uiScale
                     color: Theme.textPrimary
                 }
 
@@ -95,7 +95,7 @@ Rectangle {
                     y: playerSelector.height
                     width: playerSelector.width
                     implicitHeight: contentItem.implicitHeight
-                    padding: 1
+                    padding: 1 * Theme.uiScale
 
                     contentItem: ListView {
                         clip: true
@@ -109,8 +109,8 @@ Rectangle {
                     background: Rectangle {
                         color: Theme.surfaceVariant
                         border.color: Theme.outline
-                        border.width: 1
-                        radius: 16
+                        border.width: 1 * Theme.uiScale
+                        radius: 16 * Theme.uiScale
                     }
                 }
 
@@ -118,7 +118,7 @@ Rectangle {
                     width: playerSelector.width
                     contentItem: Text {
                         text: modelData.identity
-                        font.pixelSize: 13
+                        font.pixelSize: 13 * Theme.uiScale
                         color: Theme.textPrimary
                         verticalAlignment: Text.AlignVCenter
                         elide: Text.ElideRight
@@ -138,14 +138,14 @@ Rectangle {
 
             // Album art with spectrum visualizer
             RowLayout {
-                spacing: 12
+                spacing: 12 * Theme.uiScale
                 Layout.fillWidth: true
 
                 // Album art container with circular spectrum overlay
                 Item {
                     id: albumArtContainer
-                    width: 96
-                    height: 96 // enough for spectrum and art (will adjust if needed)
+                    width: 96 * Theme.uiScale
+                    height: 96 * Theme.uiScale // enough for spectrum and art (will adjust if needed)
                     Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
                     // Circular spectrum visualizer around album art
@@ -153,36 +153,36 @@ Rectangle {
                         id: spectrum
                         values: MusicManager.cavaValues
                         anchors.centerIn: parent
-                        innerRadius: 30 // Position just outside 60x60 album art
-                        outerRadius: 48 // Extend bars outward from album art
+                        innerRadius: 30 * Theme.uiScale // Position just outside 60x60 album art
+                        outerRadius: 48 * Theme.uiScale // Extend bars outward from album art
                         fillColor: Theme.accentPrimary
                         strokeColor: Theme.accentPrimary
-                        strokeWidth: 0
+                        strokeWidth: 0 * Theme.uiScale
                         z: 0
                     }
 
                     // Album art image
                     Rectangle {
                         id: albumArtwork
-                        width: 60
-                        height: 60
+                        width: 60 * Theme.uiScale
+                        height: 60 * Theme.uiScale
                         anchors.centerIn: parent
-                        radius: 30 // circle
+                        radius: 30 * Theme.uiScale // circle
                         color: Qt.darker(Theme.surface, 1.1)
                         border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
-                        border.width: 1
+                        border.width: 1 * Theme.uiScale
 
                         Image {
                             id: albumArt
                             anchors.fill: parent
-                            anchors.margins: 2
+                            anchors.margins: 2 * Theme.uiScale
                             fillMode: Image.PreserveAspectCrop
                             smooth: true
                             mipmap: true
                             cache: false
                             asynchronous: true
-                            sourceSize.width: 60
-                            sourceSize.height: 60
+                            sourceSize.width: 60 * Theme.uiScale
+                            sourceSize.height: 60 * Theme.uiScale
                             source: MusicManager.trackArtUrl
                             visible: source.toString() !== ""
 
@@ -213,7 +213,7 @@ Rectangle {
                             anchors.centerIn: parent
                             text: "album"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: Theme.fontSizeBody
+                            font.pixelSize: Theme.fontSizeBody * Theme.uiScale
                             color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4)
                             visible: !albumArt.visible
                         }
@@ -223,13 +223,13 @@ Rectangle {
                 // Track metadata
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 4
+                    spacing: 4 * Theme.uiScale
 
                     Text {
                         text: MusicManager.trackTitle
                         color: Theme.textPrimary
                         font.family: Theme.fontFamily
-                        font.pixelSize: Theme.fontSizeSmall
+                        font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
                         font.bold: true
                         elide: Text.ElideRight
                         wrapMode: Text.Wrap
@@ -241,7 +241,7 @@ Rectangle {
                         text: MusicManager.trackArtist
                         color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.8)
                         font.family: Theme.fontFamily
-                        font.pixelSize: Theme.fontSizeCaption
+                        font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
                         elide: Text.ElideRight
                         Layout.fillWidth: true
                     }
@@ -250,7 +250,7 @@ Rectangle {
                         text: MusicManager.trackAlbum
                         color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
                         font.family: Theme.fontFamily
-                        font.pixelSize: Theme.fontSizeCaption
+                        font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
                         elide: Text.ElideRight
                         Layout.fillWidth: true
                     }
@@ -261,8 +261,8 @@ Rectangle {
             Rectangle {
                 id: progressBarBackground
                 width: parent.width
-                height: 6
-                radius: 3
+                height: 6 * Theme.uiScale
+                radius: 3 * Theme.uiScale
                 color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15)
                 Layout.fillWidth: true
 
@@ -290,12 +290,12 @@ Rectangle {
                 // Interactive progress handle
                 Rectangle {
                     id: progressHandle
-                    width: 12
-                    height: 12
-                    radius: 6
+                    width: 12 * Theme.uiScale
+                    height: 12 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: Theme.accentPrimary
                     border.color: Qt.lighter(Theme.accentPrimary, 1.3)
-                    border.width: 1
+                    border.width: 1 * Theme.uiScale
 
                     x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2))
                     anchors.verticalCenter: parent.verticalCenter
@@ -334,18 +334,18 @@ Rectangle {
 
             // Media controls
             RowLayout {
-                spacing: 4
+                spacing: 4 * Theme.uiScale
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
 
                 // Previous button
                 Rectangle {
-                    width: 28
-                    height: 28
-                    radius: 14
+                    width: 28 * Theme.uiScale
+                    height: 28 * Theme.uiScale
+                    radius: 14 * Theme.uiScale
                     color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
                     border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
-                    border.width: 1
+                    border.width: 1 * Theme.uiScale
 
                     MouseArea {
                         id: previousButton
@@ -360,19 +360,19 @@ Rectangle {
                         anchors.centerIn: parent
                         text: "skip_previous"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: Theme.fontSizeCaption
+                        font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
                         color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
                     }
                 }
 
                 // Play/Pause button
                 Rectangle {
-                    width: 36
-                    height: 36
-                    radius: 18
+                    width: 36 * Theme.uiScale
+                    height: 36 * Theme.uiScale
+                    radius: 18 * Theme.uiScale
                     color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
                     border.color: Theme.accentPrimary
-                    border.width: 2
+                    border.width: 2 * Theme.uiScale
 
                     MouseArea {
                         id: playButton
@@ -387,19 +387,19 @@ Rectangle {
                         anchors.centerIn: parent
                         text: MusicManager.isPlaying ? "pause" : "play_arrow"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: Theme.fontSizeBody
+                        font.pixelSize: Theme.fontSizeBody * Theme.uiScale
                         color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
                     }
                 }
 
                 // Next button
                 Rectangle {
-                    width: 28
-                    height: 28
-                    radius: 14
+                    width: 28 * Theme.uiScale
+                    height: 28 * Theme.uiScale
+                    radius: 14 * Theme.uiScale
                     color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
                     border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
-                    border.width: 1
+                    border.width: 1 * Theme.uiScale
 
                     MouseArea {
                         id: nextButton
@@ -414,7 +414,7 @@ Rectangle {
                         anchors.centerIn: parent
                         text: "skip_next"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: Theme.fontSizeCaption
+                        font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
                         color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
                     }
                 }
diff --git a/Widgets/SidePanel/PanelPopup.qml b/Widgets/SidePanel/PanelPopup.qml
index 6119be8..60867d9 100644
--- a/Widgets/SidePanel/PanelPopup.qml
+++ b/Widgets/SidePanel/PanelPopup.qml
@@ -45,11 +45,28 @@ PanelWithOverlay {
 
         property real slideOffset: width
         property bool isAnimating: false
-        property int leftPadding: 20
-        property int bottomPadding: 20
+        property int leftPadding: 20 * Theme.uiScale
+        property int bottomPadding: 20 * Theme.uiScale
         // Recording properties
         property bool isRecording: false
 
+        Process {
+            id: checkRecordingProcess
+            command: ["pgrep", "-f", "gpu-screen-recorder.*portal"]
+            onExited: function(exitCode, exitStatus) {
+                var isActuallyRecording = exitCode === 0
+                if (isRecording && !isActuallyRecording) {
+                    isRecording = isActuallyRecording
+                }
+            }
+        }
+
+        function checkRecordingStatus() {
+            if (isRecording) {
+                checkRecordingProcess.running = true
+            }
+        }
+
         function showAt() {
             if (!sidebarPopup.visible) {
                 sidebarPopup.visible = true;
@@ -73,11 +90,7 @@ PanelWithOverlay {
             if (shell && shell.settingsWindow && shell.settingsWindow.visible)
                 shell.settingsWindow.visible = false;
 
-            if (wifiPanelLoader.active && wifiPanelLoader.item && wifiPanelLoader.item.visible)
-                wifiPanelLoader.item.visible = false;
 
-            if (bluetoothPanelLoader.active && bluetoothPanelLoader.item && bluetoothPanelLoader.item.visible)
-                bluetoothPanelLoader.item.visible = false;
 
             if (sidebarPopup.visible) {
                 slideAnim.from = 0;
@@ -119,8 +132,8 @@ PanelWithOverlay {
             quickAccessWidget.isRecording = false;
         }
 
-        implicitWidth: 500
-        implicitHeight: 800
+        implicitWidth: 500 * Theme.uiScale
+        implicitHeight: 700 * Theme.uiScale
         visible: parent.visible
         color: "transparent"
         anchors.top: parent.top
@@ -173,7 +186,7 @@ PanelWithOverlay {
             x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset
             y: 0
             color: Theme.backgroundPrimary
-            bottomLeftRadius: 20
+            bottomLeftRadius: 20 * Theme.uiScale
             z: 0
 
             Behavior on x {
@@ -188,27 +201,7 @@ PanelWithOverlay {
 
         }
 
-        // LazyLoader for WifiPanel
-        LazyLoader {
-            id: wifiPanelLoader
 
-            loading: false
-
-            component: WifiPanel {
-            }
-
-        }
-
-        // LazyLoader for BluetoothPanel
-        LazyLoader {
-            id: bluetoothPanelLoader
-
-            loading: false
-
-            component: BluetoothPanel {
-            }
-
-        }
 
         // SettingsIcon component
         SettingsIcon {
@@ -228,11 +221,12 @@ PanelWithOverlay {
 
             ColumnLayout {
                 anchors.fill: parent
-                anchors.margins: 20
-                spacing: 16
+                anchors.margins: 20 * Theme.uiScale
+                spacing: 4 * Theme.uiScale
 
                 PowerMenu {
                     id: systemWidget
+                    settingsModal: settingsModal
 
                     Layout.alignment: Qt.AlignHCenter
                     z: 3
@@ -240,14 +234,13 @@ PanelWithOverlay {
 
                 Weather {
                     id: weather
-
                     Layout.alignment: Qt.AlignHCenter
                     z: 2
                 }
 
                 // Music and System Monitor row
                 RowLayout {
-                    spacing: 12
+                    spacing: 12 * Theme.uiScale
                     Layout.fillWidth: true
                     Layout.alignment: Qt.AlignHCenter
 
@@ -257,123 +250,118 @@ PanelWithOverlay {
 
                     SystemMonitor {
                         id: systemMonitor
-
                         z: 2
                     }
 
                 }
 
-                // Power profile, Wifi and Bluetooth row
+                // Power profile, Record and Wallpaper row
                 RowLayout {
-                    Layout.alignment: Qt.AlignLeft
-                    Layout.preferredHeight: 80
-                    spacing: 16
+                    Layout.alignment: Qt.AlignVCenter
+                    spacing: 10 * Theme.uiScale
+                    Layout.preferredHeight: 80 * Theme.uiScale
                     z: 3
 
                     PowerProfile {
-                        Layout.alignment: Qt.AlignLeft
-                        Layout.preferredHeight: 80
+                        Layout.alignment: Qt.AlignVCenter
+                        Layout.preferredHeight: 80 * Theme.uiScale
                     }
 
-                    // Network card containing Wifi and Bluetooth
+                    // Record and Wallpaper card
                     Rectangle {
-                        Layout.preferredHeight: 80
-                        Layout.preferredWidth: 140
+                        Layout.preferredHeight: 80 * Theme.uiScale
+                        Layout.preferredWidth: 140 * Theme.uiScale
                         Layout.fillWidth: false
                         color: Theme.surface
-                        radius: 18
+                        radius: 18 * Theme.uiScale
 
                         Row {
                             anchors.horizontalCenter: parent.horizontalCenter
                             anchors.verticalCenter: parent.verticalCenter
-                            spacing: 20
+                            spacing: 20 * Theme.uiScale
 
-                            // Wifi button
+                            // Record button
                             Rectangle {
-                                id: wifiButton
+                                id: recordButton
 
-                                width: 36
-                                height: 36
-                                radius: 18
+                                width: 36 * Theme.uiScale
+                                height: 36 * Theme.uiScale
+                                radius: 18 * Theme.uiScale
                                 border.color: Theme.accentPrimary
-                                border.width: 1
-                                color: wifiButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
+                                border.width: 1 * Theme.uiScale
+                                color: sidebarPopupRect.isRecording ? Theme.accentPrimary : 
+                                       (recordButtonArea.containsMouse ? Theme.accentPrimary : "transparent")
 
                                 Text {
                                     anchors.centerIn: parent
-                                    text: "wifi"
+                                    text: "photo_camera"
                                     font.family: "Material Symbols Outlined"
-                                    font.pixelSize: 22
-                                    color: wifiButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
+                                    font.pixelSize: 22 * Theme.uiScale
+                                    color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
                                     verticalAlignment: Text.AlignVCenter
                                     horizontalAlignment: Text.AlignHCenter
                                 }
 
                                 MouseArea {
-                                    id: wifiButtonArea
+                                    id: recordButtonArea
 
                                     anchors.fill: parent
                                     hoverEnabled: true
                                     cursorShape: Qt.PointingHandCursor
                                     onClicked: {
-                                        if (!wifiPanelLoader.active)
-                                            wifiPanelLoader.loading = true;
-
-                                        if (wifiPanelLoader.item)
-                                            wifiPanelLoader.item.showAt();
-
+                                        if (sidebarPopupRect.isRecording) {
+                                            sidebarPopupRect.stopRecording();
+                                        } else {
+                                            sidebarPopupRect.startRecording();
+                                        }
                                     }
                                 }
 
                                 StyledTooltip {
-                                    text: "Wifi"
-                                    targetItem: wifiButtonArea
-                                    tooltipVisible: wifiButtonArea.containsMouse
+                                    text: sidebarPopupRect.isRecording ? "Stop Recording" : "Start Recording"
+                                    targetItem: recordButtonArea
+                                    tooltipVisible: recordButtonArea.containsMouse
                                 }
 
                             }
 
-                            // Bluetooth button
+                            // Wallpaper button
                             Rectangle {
-                                id: bluetoothButton
+                                id: wallpaperButton
 
-                                width: 36
-                                height: 36
-                                radius: 18
+                                width: 36 * Theme.uiScale
+                                height: 36 * Theme.uiScale
+                                radius: 18 * Theme.uiScale
                                 border.color: Theme.accentPrimary
-                                border.width: 1
-                                color: bluetoothButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
+                                border.width: 1 * Theme.uiScale
+                                color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                                 Text {
                                     anchors.centerIn: parent
-                                    text: "bluetooth"
+                                    text: "image"
                                     font.family: "Material Symbols Outlined"
-                                    font.pixelSize: 22
-                                    color: bluetoothButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
+                                    font.pixelSize: 22 * Theme.uiScale
+                                    color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
                                     verticalAlignment: Text.AlignVCenter
                                     horizontalAlignment: Text.AlignHCenter
                                 }
 
                                 MouseArea {
-                                    id: bluetoothButtonArea
+                                    id: wallpaperButtonArea
 
                                     anchors.fill: parent
                                     hoverEnabled: true
                                     cursorShape: Qt.PointingHandCursor
                                     onClicked: {
-                                        if (!bluetoothPanelLoader.active)
-                                            bluetoothPanelLoader.loading = true;
-
-                                        if (bluetoothPanelLoader.item)
-                                            bluetoothPanelLoader.item.showAt();
-
+                                        if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
+                                            settingsModal.openSettings(6);
                                     }
                                 }
 
                                 StyledTooltip {
-                                    text: "Bluetooth"
-                                    targetItem: bluetoothButtonArea
-                                    tooltipVisible: bluetoothButtonArea.containsMouse
+                                    text: "Wallpaper"
+                                    targetItem: wallpaperButtonArea
+                                    tooltipVisible: wallpaperButtonArea.containsMouse
                                 }
 
                             }
@@ -384,43 +372,7 @@ PanelWithOverlay {
 
                 }
 
-                Item {
-                    Layout.fillHeight: true
-                }
 
-                // QuickAccess widget
-                QuickAccess {
-                    // 6 is the wallpaper tab index
-
-                    id: quickAccessWidget
-
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.topMargin: -16
-                    z: 2
-                    isRecording: sidebarPopupRect.isRecording
-                    onRecordingRequested: {
-                        sidebarPopupRect.startRecording();
-                    }
-                    onStopRecordingRequested: {
-                        sidebarPopupRect.stopRecording();
-                    }
-                    onRecordingStateMismatch: function(actualState) {
-                        isRecording = actualState;
-                        quickAccessWidget.isRecording = actualState;
-                    }
-                    onSettingsRequested: {
-                        // Use the SettingsModal's openSettings function
-                        if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
-                            settingsModal.openSettings();
-
-                    }
-                    onWallpaperSelectorRequested: {
-                        // Use the SettingsModal's openSettings function with wallpaper tab (index 6)
-                        if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
-                            settingsModal.openSettings(6);
-
-                    }
-                }
 
             }
 
@@ -448,7 +400,7 @@ PanelWithOverlay {
                     size: 1.1
                     fillColor: Theme.backgroundPrimary
                     anchors.top: parent.top
-                    offsetX: -447 + sidebarPopupRect.slideOffset
+                    offsetX: -464 + sidebarPopupRect.slideOffset
                     offsetY: 0
 
                     Behavior on offsetX {
diff --git a/Widgets/SidePanel/PowerMenu.qml b/Widgets/SidePanel/PowerMenu.qml
index 12d6da9..f1c3564 100644
--- a/Widgets/SidePanel/PowerMenu.qml
+++ b/Widgets/SidePanel/PowerMenu.qml
@@ -17,6 +17,7 @@ Rectangle {
 
     property string uptimeText: "--:--"
     property bool panelVisible: false
+    property var settingsModal: null
 
     function logout() {
         if (WorkspaceManager.isNiri)
@@ -43,8 +44,8 @@ Rectangle {
         uptimeProcess.running = true;
     }
 
-    width: 440
-    height: 80
+    width: 440 * Theme.uiScale
+    height: 80 * Theme.uiScale
     color: "transparent"
     anchors.horizontalCenterOffset: -2
     onPanelVisibleChanged: {
@@ -61,29 +62,29 @@ Rectangle {
 
         anchors.fill: parent
         color: Theme.surface
-        radius: 18
+        radius: 18 * Theme.uiScale
 
         ColumnLayout {
             anchors.fill: parent
-            anchors.margins: 18
-            spacing: 12
+            anchors.margins: 18 * Theme.uiScale
+            spacing: 12 * Theme.uiScale
 
             RowLayout {
                 Layout.fillWidth: true
-                spacing: 12
+                spacing: 12 * Theme.uiScale
 
                 Rectangle {
-                    width: 48
-                    height: 48
-                    radius: 24
+                    width: 48 * Theme.uiScale
+                    height: 48 * Theme.uiScale
+                    radius: 24 * Theme.uiScale
                     color: Theme.accentPrimary
 
                     Rectangle {
                         anchors.fill: parent
                         color: "transparent"
-                        radius: 24
+                        radius: 24 * Theme.uiScale
                         border.color: Theme.accentPrimary
-                        border.width: 2
+                        border.width: 2 * Theme.uiScale
                         z: 2
                     }
 
@@ -93,13 +94,13 @@ Rectangle {
                 }
 
                 ColumnLayout {
-                    spacing: 4
+                    spacing: 4 * Theme.uiScale
                     Layout.fillWidth: true
 
                     Text {
                         text: Quickshell.env("USER")
                         font.family: Theme.fontFamily
-                        font.pixelSize: 16
+                        font.pixelSize: 16 * Theme.uiScale
                         font.bold: true
                         color: Theme.textPrimary
                     }
@@ -107,7 +108,7 @@ Rectangle {
                     Text {
                         text: "System Uptime: " + uptimeText
                         font.family: Theme.fontFamily
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * Theme.uiScale
                         color: Theme.textSecondary
                     }
 
@@ -117,21 +118,62 @@ Rectangle {
                     Layout.fillWidth: true
                 }
 
+                Rectangle {
+                    id: settingsButton
+
+                    width: 32 * Theme.uiScale
+                    height: 32 * Theme.uiScale
+                    radius: 16 * Theme.uiScale
+                    color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
+                    border.color: Theme.accentPrimary
+                    border.width: 1 * Theme.uiScale
+
+                    Text {
+                        anchors.centerIn: parent
+                        anchors.horizontalCenterOffset: -1
+                        text: "settings"
+                        font.family: "Material Symbols Outlined"
+                        font.pixelSize: 16 * Theme.uiScale
+                        color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
+                    }
+
+                    MouseArea {
+                        id: settingsButtonArea
+
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+                        onClicked: {
+                            if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
+                                settingsModal.openSettings();
+                        }
+                    }
+
+                    StyledTooltip {
+                        id: settingsTooltip
+
+                        text: "Settings"
+                        targetItem: settingsButton
+                        tooltipVisible: settingsButtonArea.containsMouse
+                    }
+
+                }
+
                 Rectangle {
                     id: systemButton
 
-                    width: 32
-                    height: 32
-                    radius: 16
+                    width: 32 * Theme.uiScale
+                    height: 32 * Theme.uiScale
+                    radius: 16 * Theme.uiScale
                     color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
                     border.color: Theme.accentPrimary
-                    border.width: 1
+                    border.width: 1 * Theme.uiScale
 
                     Text {
                         anchors.centerIn: parent
                         text: "power_settings_new"
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 16
+                        font.pixelSize: 16 * Theme.uiScale
                         color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
                     }
 
@@ -169,18 +211,18 @@ Rectangle {
         anchors.right: systemButton.right
 
         Rectangle {
-            width: 160
-            height: 220
+            width: 160 * Theme.uiScale
+            height: 220 * Theme.uiScale
             color: Theme.surface
-            radius: 8
+            radius: 8 * Theme.uiScale
             border.color: Theme.outline
-            border.width: 1
+            border.width: 1 * Theme.uiScale
             visible: true
             z: 9999
             anchors.top: parent.top
             anchors.right: parent.right
-            anchors.rightMargin: 32
-            anchors.topMargin: systemButton.y + systemButton.height + 48
+            anchors.rightMargin: 32 * Theme.uiScale
+            anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.uiScale
 
             // Prevent closing when clicking in the panel bg
             MouseArea {
@@ -189,31 +231,31 @@ Rectangle {
 
             ColumnLayout {
                 anchors.fill: parent
-                anchors.margins: 8
-                spacing: 4
+                anchors.margins: 8 * Theme.uiScale
+                spacing: 4 * Theme.uiScale
 
                 Rectangle {
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 36
-                    radius: 6
+                    Layout.preferredHeight: 36 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 12
-                        spacing: 8
+                        anchors.margins: 12 * Theme.uiScale
+                        spacing: 8 * Theme.uiScale
 
                         Text {
                             text: "lock_outline"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 16
+                            font.pixelSize: 16 * Theme.uiScale
                             color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                         }
 
                         Text {
                             text: "Lock Screen"
                             font.family: Theme.fontFamily
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                             Layout.fillWidth: true
                         }
@@ -236,25 +278,25 @@ Rectangle {
 
                 Rectangle {
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 36
-                    radius: 6
+                    Layout.preferredHeight: 36 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 12
-                        spacing: 8
+                        anchors.margins: 12 * Theme.uiScale
+                        spacing: 8 * Theme.uiScale
 
                         Text {
                             text: "bedtime"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 16
+                            font.pixelSize: 16 * Theme.uiScale
                             color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                         }
 
                         Text {
                             text: "Suspend"
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                             Layout.fillWidth: true
                         }
@@ -277,26 +319,26 @@ Rectangle {
 
                 Rectangle {
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 36
-                    radius: 6
+                    Layout.preferredHeight: 36 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 12
-                        spacing: 8
+                        anchors.margins: 12 * Theme.uiScale
+                        spacing: 8 * Theme.uiScale
 
                         Text {
                             text: "refresh"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 16
+                            font.pixelSize: 16 * Theme.uiScale
                             color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                         }
 
                         Text {
                             text: "Reboot"
                             font.family: Theme.fontFamily
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                             Layout.fillWidth: true
                         }
@@ -319,25 +361,25 @@ Rectangle {
 
                 Rectangle {
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 36
-                    radius: 6
+                    Layout.preferredHeight: 36 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 12
-                        spacing: 8
+                        anchors.margins: 12 * Theme.uiScale
+                        spacing: 8 * Theme.uiScale
 
                         Text {
                             text: "exit_to_app"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 16
+                            font.pixelSize: 16 * Theme.uiScale
                             color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                         }
 
                         Text {
                             text: "Logout"
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                             Layout.fillWidth: true
                         }
@@ -360,25 +402,25 @@ Rectangle {
 
                 Rectangle {
                     Layout.fillWidth: true
-                    Layout.preferredHeight: 36
-                    radius: 6
+                    Layout.preferredHeight: 36 * Theme.uiScale
+                    radius: 6 * Theme.uiScale
                     color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 12
-                        spacing: 8
+                        anchors.margins: 12 * Theme.uiScale
+                        spacing: 8 * Theme.uiScale
 
                         Text {
                             text: "power_settings_new"
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 16
+                            font.pixelSize: 16 * Theme.uiScale
                             color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                         }
 
                         Text {
                             text: "Shutdown"
-                            font.pixelSize: 14
+                            font.pixelSize: 14 * Theme.uiScale
                             color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
                             Layout.fillWidth: true
                         }
diff --git a/Widgets/SidePanel/PowerProfile.qml b/Widgets/SidePanel/PowerProfile.qml
index bdd9c49..775046e 100644
--- a/Widgets/SidePanel/PowerProfile.qml
+++ b/Widgets/SidePanel/PowerProfile.qml
@@ -7,22 +7,22 @@ import qs.Components
 
 Rectangle {
     id: card
-    width: 200
-    height: 70
+    width: 200 * Theme.uiScale
+    height: 70 * Theme.uiScale
     color: Theme.surface
-    radius: 18
+    radius: 18 * Theme.uiScale
 
     Row {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 20
+        spacing: 20 * Theme.uiScale
 
 
         Rectangle {
-            width: 36; height: 36
-            radius: 18
+            width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
+            radius: 18 * Theme.uiScale
             border.color: Theme.accentPrimary
-            border.width: 1
+            border.width: 1 * Theme.uiScale
             color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance)
                 ? Theme.accentPrimary
                 : (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@@ -33,7 +33,7 @@ Rectangle {
                 anchors.centerIn: parent
                 text: "speed"
                 font.family: "Material Symbols Outlined"
-                font.pixelSize: 22
+                font.pixelSize: 22 * Theme.uiScale
                 color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse
                     ? Theme.backgroundPrimary
                     : Theme.accentPrimary
@@ -65,10 +65,10 @@ Rectangle {
 
 
         Rectangle {
-            width: 36; height: 36
-            radius: 18
+            width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
+            radius: 18 * Theme.uiScale
             border.color: Theme.accentPrimary
-            border.width: 1
+            border.width: 1 * Theme.uiScale
             color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced)
                 ? Theme.accentPrimary
                 : (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@@ -79,7 +79,7 @@ Rectangle {
                 anchors.centerIn: parent
                 text: "balance"
                 font.family: "Material Symbols Outlined"
-                font.pixelSize: 22
+                font.pixelSize: 22 * Theme.uiScale
                 color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse
                     ? Theme.backgroundPrimary
                     : Theme.accentPrimary
@@ -111,10 +111,10 @@ Rectangle {
 
 
         Rectangle {
-            width: 36; height: 36
-            radius: 18
+            width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
+            radius: 18 * Theme.uiScale
             border.color: Theme.accentPrimary
-            border.width: 1
+            border.width: 1 * Theme.uiScale
             color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver)
                 ? Theme.accentPrimary
                 : (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@@ -125,7 +125,7 @@ Rectangle {
                 anchors.centerIn: parent
                 text: "eco"
                 font.family: "Material Symbols Outlined"
-                font.pixelSize: 22
+                font.pixelSize: 22 * Theme.uiScale
                 color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) || saveMouseArea.containsMouse
                     ? Theme.backgroundPrimary
                     : Theme.accentPrimary
diff --git a/Widgets/SidePanel/SettingsIcon.qml b/Widgets/SidePanel/SettingsIcon.qml
index e2a383c..866db59 100644
--- a/Widgets/SidePanel/SettingsIcon.qml
+++ b/Widgets/SidePanel/SettingsIcon.qml
@@ -10,8 +10,8 @@ import qs.Components
 
 PanelWindow {
     id: settingsModal
-    implicitWidth: 480
-    implicitHeight: 780
+    implicitWidth: 480 * Theme.uiScale
+    implicitHeight: 780 * Theme.uiScale
     visible: false
     color: "transparent"
     anchors.top: true
diff --git a/Widgets/SidePanel/SettingsModal.qml b/Widgets/SidePanel/SettingsModal.qml
index 98f88c0..792f76e 100644
--- a/Widgets/SidePanel/SettingsModal.qml
+++ b/Widgets/SidePanel/SettingsModal.qml
@@ -10,8 +10,8 @@ import qs.Components
 
 PanelWindow {
     id: settingsModal
-    implicitWidth: 480
-    implicitHeight: 780
+    implicitWidth: 480 * Theme.uiScale
+    implicitHeight: 780 * Theme.uiScale
     visible: false
     color: "transparent"
     anchors.top: true
diff --git a/Widgets/SidePanel/SystemMonitor.qml b/Widgets/SidePanel/SystemMonitor.qml
index 8b0e3ee..59fc877 100644
--- a/Widgets/SidePanel/SystemMonitor.qml
+++ b/Widgets/SidePanel/SystemMonitor.qml
@@ -8,8 +8,8 @@ import qs.Settings
 
 Rectangle {
     id: systemMonitor
-    width: 70
-    height: 250
+    width: 70 * Theme.uiScale
+    height: 250 * Theme.uiScale
     color: "transparent"
 
     // Track visibility state for panel integration
@@ -19,26 +19,26 @@ Rectangle {
         id: card
         anchors.fill: parent
         color: Theme.surface
-        radius: 18
+        radius: 18 * Theme.uiScale
 
         ColumnLayout {
             anchors.fill: parent
-            anchors.margins: 8
-            spacing: 12
+            anchors.margins: 8 * Theme.uiScale
+            spacing: 12 * Theme.uiScale
             Layout.alignment: Qt.AlignVCenter
 
     
             // CPU usage indicator with circular progress bar
             Item {
-                width: 50; height: 50
+                width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
                 CircularProgressBar {
                     id: cpuBar
                     progress: Sysinfo.cpuUsage / 100
-                    size: 50
-                    strokeWidth: 4
+                    size: 50 * Theme.uiScale
+                    strokeWidth: 4 * Theme.uiScale
                     hasNotch: true
                     notchIcon: "speed"
-                    notchIconSize: 14
+                    notchIconSize: 14 * Theme.uiScale
                     Layout.alignment: Qt.AlignHCenter
                 }
                 MouseArea {
@@ -60,16 +60,16 @@ Rectangle {
     
             // CPU temperature indicator with circular progress bar
             Item {
-                width: 50; height: 50
+                width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
                 CircularProgressBar {
                     id: tempBar
                     progress: Sysinfo.cpuTemp / 100
-                    size: 50
-                    strokeWidth: 4
+                    size: 50 * Theme.uiScale
+                    strokeWidth: 4 * Theme.uiScale
                     hasNotch: true
                     units: "°C"
                     notchIcon: "thermometer"
-                    notchIconSize: 14
+                    notchIconSize: 14 * Theme.uiScale
                     Layout.alignment: Qt.AlignHCenter
                 }
                 MouseArea {
@@ -91,15 +91,15 @@ Rectangle {
     
             // Memory usage indicator with circular progress bar
             Item {
-                width: 50; height: 50
+                width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
                 CircularProgressBar {
                     id: memBar
                     progress: Sysinfo.memoryUsagePer / 100
-                    size: 50
-                    strokeWidth: 4
+                    size: 50 * Theme.uiScale
+                    strokeWidth: 4 * Theme.uiScale
                     hasNotch: true
                     notchIcon: "memory"
-                    notchIconSize: 14
+                    notchIconSize: 14 * Theme.uiScale
                     Layout.alignment: Qt.AlignHCenter
                 }
                 MouseArea {
@@ -121,15 +121,15 @@ Rectangle {
     
             // Disk usage indicator with circular progress bar
             Item {
-                width: 50; height: 50
+                width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
                 CircularProgressBar {
                     id: diskBar
                     progress: Sysinfo.diskUsage / 100
-                    size: 50
-                    strokeWidth: 4
+                    size: 50 * Theme.uiScale
+                    strokeWidth: 4 * Theme.uiScale
                     hasNotch: true
                     notchIcon: "storage"
-                    notchIconSize: 14
+                    notchIconSize: 14 * Theme.uiScale
                     Layout.alignment: Qt.AlignHCenter
                 }
                 MouseArea {
diff --git a/Widgets/SidePanel/Weather.qml b/Widgets/SidePanel/Weather.qml
index 631d22a..1c77192 100644
--- a/Widgets/SidePanel/Weather.qml
+++ b/Widgets/SidePanel/Weather.qml
@@ -6,8 +6,8 @@ import "../../Helpers/Weather.js" as WeatherHelper
 
 Rectangle {
     id: weatherRoot
-    width: 440
-    height: 180
+    width: 440 * Theme.uiScale
+    height: 180 * Theme.uiScale
     color: "transparent"
     anchors.horizontalCenterOffset: -2
 
@@ -83,29 +83,29 @@ Rectangle {
         id: card
         anchors.fill: parent
         color: Theme.surface
-        radius: 18
+        radius: 18 * Theme.uiScale
 
         ColumnLayout {
             anchors.fill: parent
-            anchors.margins: 18
-            spacing: 12
+            anchors.margins: 18 * Theme.uiScale
+            spacing: 12 * Theme.uiScale
 
     
             RowLayout {
-                spacing: 12
+                spacing: 12 * Theme.uiScale
                 Layout.fillWidth: true
 
 
                 RowLayout {
-                    spacing: 12
-                    Layout.preferredWidth: 140
+                    spacing: 12 * Theme.uiScale
+                    Layout.preferredWidth: 140 * Theme.uiScale
 
 
                     Text {
                         id: weatherIcon
                         text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud")
                         font.family: "Material Symbols Outlined"
-                        font.pixelSize: 28
+                        font.pixelSize: 28 * Theme.uiScale
                         verticalAlignment: Text.AlignVCenter
                         color: isLoading ? Theme.accentPrimary : Theme.accentPrimary
                         Layout.alignment: Qt.AlignVCenter
@@ -121,28 +121,28 @@ Rectangle {
                     }
 
                     ColumnLayout {
-                        spacing: 2
+                        spacing: 2 * Theme.uiScale
                         RowLayout {
-                            spacing: 4
+                            spacing: 4 * Theme.uiScale
                             Text {
                                 text: city
                                 font.family: Theme.fontFamily
-                                font.pixelSize: 14
+                                font.pixelSize: 14 * Theme.uiScale
                                 font.bold: true
                                 color: Theme.textPrimary
                             }
                             Text {
                                 text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : ""
                                 font.family: Theme.fontFamily
-                                font.pixelSize: 10
+                                font.pixelSize: 10 * Theme.uiScale
                                 color: Theme.textSecondary
-                                leftPadding: 2
+                                leftPadding: 2 * Theme.uiScale
                             }
                         }
                         Text {
                             text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
                             font.family: Theme.fontFamily
-                            font.pixelSize: 24
+                            font.pixelSize: 24 * Theme.uiScale
                             font.bold: true
                             color: Theme.textPrimary
                         }
@@ -157,16 +157,16 @@ Rectangle {
 
             Rectangle {
                 width: parent.width
-                height: 1
+                height: 1 * Theme.uiScale
                 color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12)
                 Layout.fillWidth: true
-                Layout.topMargin: 2
-                Layout.bottomMargin: 2
+                Layout.topMargin: 2 * Theme.uiScale
+                Layout.bottomMargin: 2 * Theme.uiScale
             }
 
 
             RowLayout {
-                spacing: 12
+                spacing: 12 * Theme.uiScale
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
                 visible: weatherData && weatherData.daily && weatherData.daily.time
@@ -174,13 +174,13 @@ Rectangle {
                 Repeater {
                     model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
                     delegate: ColumnLayout {
-                        spacing: 2
+                        spacing: 2 * Theme.uiScale
                         Layout.alignment: Qt.AlignHCenter
                         Text {
             
                             text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd")
                             font.family: Theme.fontFamily
-                            font.pixelSize: 12
+                            font.pixelSize: 12 * Theme.uiScale
                             color: Theme.textSecondary
                             horizontalAlignment: Text.AlignHCenter
                             Layout.alignment: Qt.AlignHCenter
@@ -189,7 +189,7 @@ Rectangle {
                 
                             text: materialSymbolForCode(weatherData.daily.weathercode[index])
                             font.family: "Material Symbols Outlined"
-                            font.pixelSize: 22
+                            font.pixelSize: 22 * Theme.uiScale
                             color: Theme.accentPrimary
                             horizontalAlignment: Text.AlignHCenter
                             Layout.alignment: Qt.AlignHCenter
@@ -198,7 +198,7 @@ Rectangle {
                 
                             text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°")
                             font.family: Theme.fontFamily
-                            font.pixelSize: 12
+                            font.pixelSize: 12 * Theme.uiScale
                             color: Theme.textPrimary
                             horizontalAlignment: Text.AlignHCenter
                             Layout.alignment: Qt.AlignHCenter
@@ -213,7 +213,7 @@ Rectangle {
                 color: Theme.error
                 visible: errorString !== ""
                 font.family: Theme.fontFamily
-                font.pixelSize: 10
+                font.pixelSize: 10 * Theme.uiScale
                 horizontalAlignment: Text.AlignHCenter
                 Layout.alignment: Qt.AlignHCenter
             }
diff --git a/shell.qml b/shell.qml
index 8f44ca3..fbdc1c9 100644
--- a/shell.qml
+++ b/shell.qml
@@ -213,4 +213,18 @@ Scope {
             }
         }
     }
+
+    Rectangle {
+        width: 200 * Theme.uiScale
+        height: 40 * Theme.uiScale
+        color: "#333"
+        anchors.top: parent.top
+        anchors.left: parent.left
+        Text {
+            text: "UI Scale Demo"
+            anchors.centerIn: parent
+            font.pixelSize: 16 * Theme.uiScale
+            color: "white"
+        }
+    }
 }
\ No newline at end of file