diff --git a/Widgets/TopBar/ClockWidget.qml b/Widgets/TopBar/ClockWidget.qml
index 9838cd47..66bf95cf 100644
--- a/Widgets/TopBar/ClockWidget.qml
+++ b/Widgets/TopBar/ClockWidget.qml
@@ -8,7 +8,7 @@ Rectangle {
     
     signal clockClicked()
     
-    width: clockRow.implicitWidth + Theme.spacingM
+    width: clockRow.implicitWidth + Theme.spacingS * 2
     height: 30
     radius: Theme.cornerRadius
     color: clockMouseArea.containsMouse ? 
diff --git a/Widgets/TopBar/MediaWidget.qml b/Widgets/TopBar/MediaWidget.qml
index bbab1e7e..31b95e57 100644
--- a/Widgets/TopBar/MediaWidget.qml
+++ b/Widgets/TopBar/MediaWidget.qml
@@ -11,7 +11,7 @@ Rectangle {
     signal clicked()
     
     visible: hasActiveMedia
-    width: hasActiveMedia ? Math.min(200, mediaText.implicitWidth + Theme.spacingS + 48) : 0
+    width: hasActiveMedia ? Math.min(200, mediaText.implicitWidth + Theme.spacingS * 2 + 20 + Theme.spacingXS) : 0
     height: 30
     radius: Theme.cornerRadius
     color: mediaArea.containsMouse ? 
diff --git a/Widgets/TopBar/WeatherWidget.qml b/Widgets/TopBar/WeatherWidget.qml
index ab91b229..95187575 100644
--- a/Widgets/TopBar/WeatherWidget.qml
+++ b/Widgets/TopBar/WeatherWidget.qml
@@ -13,7 +13,7 @@ Rectangle {
     signal clicked()
     
     visible: weatherAvailable
-    width: weatherAvailable ? Math.min(100, weatherRow.implicitWidth + Theme.spacingS) : 0
+    width: weatherAvailable ? Math.min(100, weatherRow.implicitWidth + Theme.spacingS * 2) : 0
     height: 30
     radius: Theme.cornerRadius
     color: weatherArea.containsMouse ?