diff --git a/src/_sass/gtk/apps/_budgie.scss b/src/_sass/gtk/apps/_budgie.scss
index 2db1250a..36b27ff6 100644
--- a/src/_sass/gtk/apps/_budgie.scss
+++ b/src/_sass/gtk/apps/_budgie.scss
@@ -542,8 +542,8 @@ window.budgie-popover:not(.csd) {
     @extend %budgie_panel_button;
   }
 
-  &.horizontal button { padding: 0 4px; }
-  &.vertical button { padding: 4px 0; }
+  &.horizontal button { padding: 0 6px; }
+  &.vertical button { padding: 6px 0; }
 
   separator { background-color: rgba($panel_fg, 0.12); }
 
@@ -587,6 +587,35 @@ window.budgie-popover:not(.csd) {
       &:disabled { color: rgba($panel_fg, 0.5); }
     }
   }
+
+  // Add padding for panel indicators icons
+  > box > widget > widget {
+    > image, // normal
+    > stack > image, // Screenshot
+    > box > image { // Places
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+
+    > box { // keyboard Layout
+      > widget > image { margin-left: 6px; }
+      > stack > widget > label { margin-right: 6px; }
+    }
+
+    > box > widget > widget > image { // Status
+      margin-left: 2px;
+      margin-right: 2px;
+    }
+  }
+
+  // Time label
+  .budgie-clock-applet,
+  .budgie-calendar-applet {
+    > widget > box {
+      padding-left: 3px;
+      padding-right: 3px;
+    }
+  }
 }
 
 %underscores {
@@ -885,7 +914,7 @@ button.raven-trigger {
   // MPRIS Applet
   .raven-mpris {
     background-color: rgba(black, 0.5);
-    color: $selected_fg_color;
+    color: white;
 
     label { min-height: 24px; }
 
@@ -896,14 +925,45 @@ button.raven-trigger {
     }
   }
 
-  image.raven-mpris {
-    background-color: $borders_color;
-    color: $sec_fg_color;
-    border-radius: 3px;
-  }
+  .mpris-widget {
+    .raven-header {
+      background-color: rgba(black, 0.75);
+      color: white;
 
-  .raven-mpris-controls > button {
-    padding: $cont_padding;
+      button.image-button {
+        border: none;
+        @extend %budgie_panel_button_flat;
+      }
+    }
+
+    .raven-background {
+      background-color: rgba(black, 0.65);
+      color: white;
+      border: none;
+
+      image.raven-mpris {
+        background-color: rgba(white, 0.1);
+        color: rgba(white, 0.65);
+        border-radius: 3px;
+      }
+
+      .raven-mpris-controls {
+        background-color: rgba(black, 0.35);
+        border-radius: $circular_radius;
+        margin-top: 3px;
+        padding: 3px;
+
+        > button {
+          padding: $cont_padding;
+          border: none;
+          @extend %budgie_panel_button_flat;
+
+          &:not(:first-child):not(:last-child):not(:hover):not(:active) {
+            background-color: rgba(white, 0.06);
+          }
+        }
+      }
+    }
   }
 }
 
diff --git a/src/gtk/theme-3.0/gtk-Dark.css b/src/gtk/theme-3.0/gtk-Dark.css
index 209402da..8863ae34 100644
--- a/src/gtk/theme-3.0/gtk-Dark.css
+++ b/src/gtk/theme-3.0/gtk-Dark.css
@@ -7803,32 +7803,32 @@ MsdOsdWindow.background.osd .progressbar {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.raven .raven-mpris button.image-button {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button, .raven .mpris-widget .raven-header button.image-button, .raven .raven-mpris button.image-button {
   color: #D3DAE3;
   background: none;
 }
 
-.raven .raven-mpris button.image-button:hover {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:hover, .raven .mpris-widget .raven-header button.image-button:hover, .raven .raven-mpris button.image-button:hover {
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0.15);
 }
 
-.raven .raven-mpris button.image-button:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:disabled, .raven .mpris-widget .raven-header button.image-button:disabled, .raven .raven-mpris button.image-button:disabled {
   color: rgba(211, 218, 227, 0.5);
   background: none;
 }
 
-.raven .raven-mpris button.image-button:active {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:active, .raven .mpris-widget .raven-header button.image-button:active, .raven .raven-mpris button.image-button:active {
   background-color: rgba(255, 255, 255, 0.3);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked, .raven .mpris-widget .raven-header button.image-button:checked, .raven .raven-mpris button.image-button:checked {
   background-color: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked:disabled, .raven .mpris-widget .raven-header button.image-button:checked:disabled, .raven .raven-mpris button.image-button:checked:disabled {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.65);
 }
@@ -8371,11 +8371,11 @@ window.budgie-popover:not(.csd) > frame.container > border {
 }
 
 .budgie-panel.horizontal button {
-  padding: 0 4px;
+  padding: 0 6px;
 }
 
 .budgie-panel.vertical button {
-  padding: 4px 0;
+  padding: 6px 0;
 }
 
 .budgie-panel separator {
@@ -8430,6 +8430,32 @@ window.budgie-popover:not(.csd) > frame.container > border {
   color: rgba(211, 218, 227, 0.5);
 }
 
+.budgie-panel > box > widget > widget > image,
+.budgie-panel > box > widget > widget > stack > image,
+.budgie-panel > box > widget > widget > box > image {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > image {
+  margin-left: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > stack > widget > label {
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > widget > image {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.budgie-panel .budgie-clock-applet > widget > box,
+.budgie-panel .budgie-calendar-applet > widget > box {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .top window#ValaPanel.background button.flat.-panel-button, window#ValaPanel.background .top button.flat.-panel-button,
 .top window#ValaPanel.background button#tasklist-button.toggle.flat,
 window#ValaPanel.background .top button#tasklist-button.toggle.flat,
@@ -8782,7 +8808,7 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
 
 .raven .raven-mpris {
   background-color: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
+  color: white;
 }
 
 .raven .raven-mpris label {
@@ -8794,14 +8820,41 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
   border: none;
 }
 
-.raven image.raven-mpris {
-  background-color: rgba(255, 255, 255, 0.12);
-  color: rgba(230, 235, 239, 0.6);
+.raven .mpris-widget .raven-header {
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+}
+
+.raven .mpris-widget .raven-header button.image-button {
+  border: none;
+}
+
+.raven .mpris-widget .raven-background {
+  background-color: rgba(0, 0, 0, 0.65);
+  color: white;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background image.raven-mpris {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.65);
   border-radius: 3px;
 }
 
-.raven .raven-mpris-controls > button {
+.raven .mpris-widget .raven-background .raven-mpris-controls {
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 9999px;
+  margin-top: 3px;
+  padding: 3px;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button {
   padding: 6px;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:not(:first-child):not(:last-child):not(:hover):not(:active) {
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
 calendar.raven-calendar {
diff --git a/src/gtk/theme-3.0/gtk-Light.css b/src/gtk/theme-3.0/gtk-Light.css
index 8f8ba87d..6e2004f3 100644
--- a/src/gtk/theme-3.0/gtk-Light.css
+++ b/src/gtk/theme-3.0/gtk-Light.css
@@ -7781,32 +7781,32 @@ MsdOsdWindow.background.osd .progressbar {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.raven .raven-mpris button.image-button {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button, .raven .mpris-widget .raven-header button.image-button, .raven .raven-mpris button.image-button {
   color: #D3DAE3;
   background: none;
 }
 
-.raven .raven-mpris button.image-button:hover {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:hover, .raven .mpris-widget .raven-header button.image-button:hover, .raven .raven-mpris button.image-button:hover {
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0.15);
 }
 
-.raven .raven-mpris button.image-button:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:disabled, .raven .mpris-widget .raven-header button.image-button:disabled, .raven .raven-mpris button.image-button:disabled {
   color: rgba(211, 218, 227, 0.5);
   background: none;
 }
 
-.raven .raven-mpris button.image-button:active {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:active, .raven .mpris-widget .raven-header button.image-button:active, .raven .raven-mpris button.image-button:active {
   background-color: rgba(255, 255, 255, 0.3);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked, .raven .mpris-widget .raven-header button.image-button:checked, .raven .raven-mpris button.image-button:checked {
   background-color: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked:disabled, .raven .mpris-widget .raven-header button.image-button:checked:disabled, .raven .raven-mpris button.image-button:checked:disabled {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.65);
 }
@@ -8349,11 +8349,11 @@ window.budgie-popover:not(.csd) > frame.container > border {
 }
 
 .budgie-panel.horizontal button {
-  padding: 0 4px;
+  padding: 0 6px;
 }
 
 .budgie-panel.vertical button {
-  padding: 4px 0;
+  padding: 6px 0;
 }
 
 .budgie-panel separator {
@@ -8408,6 +8408,32 @@ window.budgie-popover:not(.csd) > frame.container > border {
   color: rgba(211, 218, 227, 0.5);
 }
 
+.budgie-panel > box > widget > widget > image,
+.budgie-panel > box > widget > widget > stack > image,
+.budgie-panel > box > widget > widget > box > image {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > image {
+  margin-left: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > stack > widget > label {
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > widget > image {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.budgie-panel .budgie-clock-applet > widget > box,
+.budgie-panel .budgie-calendar-applet > widget > box {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .top window#ValaPanel.background button.flat.-panel-button, window#ValaPanel.background .top button.flat.-panel-button,
 .top window#ValaPanel.background button#tasklist-button.toggle.flat,
 window#ValaPanel.background .top button#tasklist-button.toggle.flat,
@@ -8760,7 +8786,7 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
 
 .raven .raven-mpris {
   background-color: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
+  color: white;
 }
 
 .raven .raven-mpris label {
@@ -8772,14 +8798,41 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
   border: none;
 }
 
-.raven image.raven-mpris {
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(70, 72, 83, 0.6);
+.raven .mpris-widget .raven-header {
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+}
+
+.raven .mpris-widget .raven-header button.image-button {
+  border: none;
+}
+
+.raven .mpris-widget .raven-background {
+  background-color: rgba(0, 0, 0, 0.65);
+  color: white;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background image.raven-mpris {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.65);
   border-radius: 3px;
 }
 
-.raven .raven-mpris-controls > button {
+.raven .mpris-widget .raven-background .raven-mpris-controls {
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 9999px;
+  margin-top: 3px;
+  padding: 3px;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button {
   padding: 6px;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:not(:first-child):not(:last-child):not(:hover):not(:active) {
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
 calendar.raven-calendar {
diff --git a/src/gtk/theme-3.0/gtk.css b/src/gtk/theme-3.0/gtk.css
index b6a4240f..3dc2650c 100644
--- a/src/gtk/theme-3.0/gtk.css
+++ b/src/gtk/theme-3.0/gtk.css
@@ -7797,32 +7797,32 @@ MsdOsdWindow.background.osd .progressbar {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.raven .raven-mpris button.image-button {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button, .raven .mpris-widget .raven-header button.image-button, .raven .raven-mpris button.image-button {
   color: #D3DAE3;
   background: none;
 }
 
-.raven .raven-mpris button.image-button:hover {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:hover, .raven .mpris-widget .raven-header button.image-button:hover, .raven .raven-mpris button.image-button:hover {
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0.15);
 }
 
-.raven .raven-mpris button.image-button:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:disabled, .raven .mpris-widget .raven-header button.image-button:disabled, .raven .raven-mpris button.image-button:disabled {
   color: rgba(211, 218, 227, 0.5);
   background: none;
 }
 
-.raven .raven-mpris button.image-button:active {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:active, .raven .mpris-widget .raven-header button.image-button:active, .raven .raven-mpris button.image-button:active {
   background-color: rgba(255, 255, 255, 0.3);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked, .raven .mpris-widget .raven-header button.image-button:checked, .raven .raven-mpris button.image-button:checked {
   background-color: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }
 
-.raven .raven-mpris button.image-button:checked:disabled {
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked:disabled, .raven .mpris-widget .raven-header button.image-button:checked:disabled, .raven .raven-mpris button.image-button:checked:disabled {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.65);
 }
@@ -8365,11 +8365,11 @@ window.budgie-popover:not(.csd) > frame.container > border {
 }
 
 .budgie-panel.horizontal button {
-  padding: 0 4px;
+  padding: 0 6px;
 }
 
 .budgie-panel.vertical button {
-  padding: 4px 0;
+  padding: 6px 0;
 }
 
 .budgie-panel separator {
@@ -8424,6 +8424,32 @@ window.budgie-popover:not(.csd) > frame.container > border {
   color: rgba(211, 218, 227, 0.5);
 }
 
+.budgie-panel > box > widget > widget > image,
+.budgie-panel > box > widget > widget > stack > image,
+.budgie-panel > box > widget > widget > box > image {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > image {
+  margin-left: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > stack > widget > label {
+  margin-right: 6px;
+}
+
+.budgie-panel > box > widget > widget > box > widget > widget > image {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.budgie-panel .budgie-clock-applet > widget > box,
+.budgie-panel .budgie-calendar-applet > widget > box {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .top window#ValaPanel.background button.flat.-panel-button, window#ValaPanel.background .top button.flat.-panel-button,
 .top window#ValaPanel.background button#tasklist-button.toggle.flat,
 window#ValaPanel.background .top button#tasklist-button.toggle.flat,
@@ -8776,7 +8802,7 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
 
 .raven .raven-mpris {
   background-color: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
+  color: white;
 }
 
 .raven .raven-mpris label {
@@ -8788,14 +8814,41 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
   border: none;
 }
 
-.raven image.raven-mpris {
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(70, 72, 83, 0.6);
+.raven .mpris-widget .raven-header {
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+}
+
+.raven .mpris-widget .raven-header button.image-button {
+  border: none;
+}
+
+.raven .mpris-widget .raven-background {
+  background-color: rgba(0, 0, 0, 0.65);
+  color: white;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background image.raven-mpris {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.65);
   border-radius: 3px;
 }
 
-.raven .raven-mpris-controls > button {
+.raven .mpris-widget .raven-background .raven-mpris-controls {
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 9999px;
+  margin-top: 3px;
+  padding: 3px;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button {
   padding: 6px;
+  border: none;
+}
+
+.raven .mpris-widget .raven-background .raven-mpris-controls > button:not(:first-child):not(:last-child):not(:hover):not(:active) {
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
 calendar.raven-calendar {