diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml
index 291cde3..c9358cd 100644
--- a/Widgets/NIconButton.qml
+++ b/Widgets/NIconButton.qml
@@ -14,6 +14,7 @@ Rectangle {
   property bool enabled: true
   property bool allowClickWhenDisabled: false
   property bool hovering: false
+  property bool compact: false
 
   property color colorBg: Color.mSurfaceVariant
   property color colorFg: Color.mPrimary
@@ -32,7 +33,7 @@ Rectangle {
   implicitHeight: Math.round(baseSize * scaling)
 
   opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
-  color: root.enabled && root.hovering ? colorBgHover : colorBg
+  color: root.enabled && root.hovering ? colorBgHover : root.compact ? Color.transparent : colorBg
   radius: width * 0.5
   border.color: root.enabled && root.hovering ? colorBorderHover : colorBorder
   border.width: Math.max(1, Style.borderS * scaling)
@@ -46,7 +47,7 @@ Rectangle {
 
   NIcon {
     icon: root.icon
-    font.pointSize: Math.max(1, root.width * 0.48)
+    font.pointSize: Math.max(1, root.compact ? root.width * 0.65 : root.width * 0.48)
     color: root.enabled && root.hovering ? colorFgHover : colorFg
     // Center horizontally
     x: (root.width - width) / 2
diff --git a/Widgets/NPill.qml b/Widgets/NPill.qml
index b69fdc1..28d2578 100644
--- a/Widgets/NPill.qml
+++ b/Widgets/NPill.qml
@@ -16,6 +16,7 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
+  property bool compact: false
 
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
@@ -51,6 +52,7 @@ Item {
         disableOpen: root.disableOpen
         rightOpen: root.rightOpen
         hovered: root.hovered
+        compact: root.compact
         onShown: root.shown()
         onHidden: root.hidden()
         onEntered: root.entered()
@@ -75,6 +77,7 @@ Item {
         disableOpen: root.disableOpen
         rightOpen: root.rightOpen
         hovered: root.hovered
+        compact: root.compact
         onShown: root.shown()
         onHidden: root.hidden()
         onEntered: root.entered()
diff --git a/Widgets/NPillHorizontal.qml b/Widgets/NPillHorizontal.qml
index 842714a..dcc7230 100644
--- a/Widgets/NPillHorizontal.qml
+++ b/Widgets/NPillHorizontal.qml
@@ -16,6 +16,7 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
+  property bool compact: false
 
   // Effective shown state (true if hovered/animated open or forced)
   readonly property bool revealed: forceOpen || showPill
@@ -38,6 +39,9 @@ Item {
   readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling)
   readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
 
+  readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
+  readonly property real textSize: Math.max(1, compact ? pillHeight * 0.45 : pillHeight * 0.33)
+
   width: pillHeight + Math.max(0, pill.width - pillOverlap)
   height: pillHeight
 
@@ -50,7 +54,7 @@ Item {
                    (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Color.mSurfaceVariant
+    color: compact ? Color.transparent : Color.mSurfaceVariant
 
     topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
     bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
@@ -73,7 +77,7 @@ Item {
       }
       text: root.text + root.suffix
       font.family: Settings.data.ui.fontFixed
-      font.pointSize: Math.max(1, root.pillHeight * 0.33)
+      font.pointSize: textSize
       font.weight: Style.fontWeightBold
       color: forceOpen ? Color.mOnSurface : Color.mPrimary
       visible: revealed
@@ -100,7 +104,7 @@ Item {
     width: pillHeight
     height: pillHeight
     radius: width * 0.5
-    color: hovered ? Color.mTertiary : Color.mSurfaceVariant
+    color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
     anchors.verticalCenter: parent.verticalCenter
 
     x: rightOpen ? 0 : (parent.width - width)
@@ -114,7 +118,7 @@ Item {
 
     NIcon {
       icon: root.icon
-      font.pointSize: Math.max(1, pillHeight * 0.5)
+      font.pointSize: iconSize
       color: hovered ? Color.mOnTertiary : Color.mOnSurface
       // Center horizontally
       x: (iconCircle.width - width) / 2
diff --git a/Widgets/NPillVertical.qml b/Widgets/NPillVertical.qml
index a02031a..6f186da 100644
--- a/Widgets/NPillVertical.qml
+++ b/Widgets/NPillVertical.qml
@@ -16,6 +16,7 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
+  property bool compact: false
 
   // Bar position detection for pill direction
   readonly property string barPosition: Settings.data.bar.position
@@ -42,16 +43,19 @@ Item {
   property bool shouldAnimateHide: false
 
   // Sizing logic for vertical bars
-  readonly property int iconSize: Math.round(Style.capsuleHeight * scaling)
-  readonly property int pillHeight: iconSize
+  readonly property int buttonSize: Math.round(Style.capsuleHeight * scaling)
+  readonly property int pillHeight: buttonSize
   readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
-  readonly property int pillOverlap: iconSize * 0.5
-  readonly property int maxPillWidth: iconSize
+  readonly property int pillOverlap: buttonSize * 0.5
+  readonly property int maxPillWidth: buttonSize
   readonly property int maxPillHeight: Math.max(1, textItem.implicitHeight + pillPaddingVertical * 4)
 
+  readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
+  readonly property real textSize: Math.max(1, compact ? pillHeight * 0.38 : pillHeight * 0.33)
+
   // For vertical bars: width is just icon size, height includes pill space
-  width: iconSize
-  height: revealed ? (iconSize + maxPillHeight - pillOverlap) : iconSize
+  width: buttonSize
+  height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
 
   Rectangle {
     id: pill
@@ -63,13 +67,13 @@ Item {
     y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Color.mSurfaceVariant
+    color: compact ? Color.transparent : Color.mSurfaceVariant
 
     // Radius logic for vertical expansion - rounded on the side that connects to icon
-    topLeftRadius: openUpward ? iconSize * 0.5 : 0
-    bottomLeftRadius: openDownward ? iconSize * 0.5 : 0
-    topRightRadius: openUpward ? iconSize * 0.5 : 0
-    bottomRightRadius: openDownward ? iconSize * 0.5 : 0
+    topLeftRadius: openUpward ? buttonSize * 0.5 : 0
+    bottomLeftRadius: openDownward ? buttonSize * 0.5 : 0
+    topRightRadius: openUpward ? buttonSize * 0.5 : 0
+    bottomRightRadius: openDownward ? buttonSize * 0.5 : 0
 
     anchors.horizontalCenter: parent.horizontalCenter
 
@@ -87,7 +91,7 @@ Item {
       }
       text: root.text + root.suffix
       font.family: Settings.data.ui.fontFixed
-      font.pointSize: Style.fontSizeXXS * scaling
+      font.pointSize: textSize
       font.weight: Style.fontWeightMedium
       horizontalAlignment: Text.AlignHCenter
       verticalAlignment: Text.AlignVCenter
@@ -120,10 +124,10 @@ Item {
 
   Rectangle {
     id: iconCircle
-    width: iconSize
-    height: iconSize
+    width: buttonSize
+    height: buttonSize
     radius: width * 0.5
-    color: hovered ? Color.mTertiary : Color.mSurfaceVariant
+    color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
 
     // Icon positioning based on direction
     x: 0
@@ -139,7 +143,7 @@ Item {
 
     NIcon {
       icon: root.icon
-      font.pointSize: Style.fontSizeM * scaling
+      font.pointSize: iconSize
       color: hovered ? Color.mOnTertiary : Color.mOnSurface
       // Center horizontally
       x: (iconCircle.width - width) / 2