diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 02d122b91..bb9239f49 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -25,6 +25,20 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_margin;
   spacing: $base_spacing * 2;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 99px;
+    border-style: solid;
+
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
 }
 
 // message bubbles
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 710efbac4..8ccc73d70 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -954,10 +954,12 @@ class CalendarMessageList extends St.Widget {
 
         this._dndSwitch = new DoNotDisturbSwitch();
         this._dndButton = new St.Button({
+            style_class: 'dnd-button',
             can_focus: true,
             toggle_mode: true,
             child: this._dndSwitch,
             label_actor: dndLabel,
+            y_align: Clutter.ActorAlign.CENTER,
         });
         this._dndSwitch.bind_property('state',
             this._dndButton, 'checked',