diff --git a/data/Makefile.am b/data/Makefile.am
index 990f2325e..b0477194c 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -49,6 +49,7 @@ dist_theme_DATA =				\
 	theme/separator-white.png		\
 	theme/single-view-active.svg		\
 	theme/single-view.svg			\
+	theme/source-button-border.svg		\
 	theme/toggle-off-us.svg			\
 	theme/toggle-off-intl.svg		\
 	theme/toggle-on-us.svg			\
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 5cae9c23c..ccf3d91f3 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -971,7 +971,7 @@ StTooltip StLabel {
 #message-tray {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0,0,0,0.01);
-    background-gradient-end: rgba(0,0,0,0.95);
+    background-gradient-end: rgba(0,0,0,0.82);
     height: 36px;
     color: white;
 }
@@ -1157,14 +1157,32 @@ StTooltip StLabel {
     padding: 2px 4px 0px 0px;
 }
 
+.summary-source-button {
+    color: #fff;
+    text-shadow: black 0px 2px 2px;
+}
+
 .summary-source-button:ltr {
-    padding-left: 4px;
-    padding-right: 16px;
+    padding-right: 12px;
+}
+
+.summary-source-button:selected .summary-source {
+    background-image: url("panel-button-highlight-narrow.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
+}
+
+.summary-source-button:expanded:selected .summary-source {
+    background-image: none;
+    border-image: none;
+}
+
+.summary-source-button:expanded:selected {
+    background-image: url("panel-button-highlight-wide.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
 }
 
 .summary-source-button:rtl {
-    padding-right: 4px;
-    padding-left: 16px;
+    padding-left: 12px;
 }
 
 .summary-source-button:last-child:ltr {
@@ -1175,6 +1193,11 @@ StTooltip StLabel {
     padding-left: 12px;
 }
 
+.summary-source {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
 .source-title {
     font-size: 9pt;
     font-weight: bold;
diff --git a/data/theme/source-button-border.svg b/data/theme/source-button-border.svg
new file mode 100644
index 000000000..6e5051ee9
--- /dev/null
+++ b/data/theme/source-button-border.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="21"
+   height="10"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.0 r9654"
+   sodipodi:docname="source-button-border.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.8"
+     inkscape:cx="8.704132"
+     inkscape:cy="5.7029946"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="1145"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     guidetolerance="10000"
+     objecttolerance="10000">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3792"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3796"
+       width="19"
+       height="2"
+       x="1"
+       y="8" />
+  </g>
+</svg>
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index ea21d494d..22d15c5dc 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -910,6 +910,7 @@ SummaryItem.prototype = {
     _init: function(source) {
         this.source = source;
         this.actor = new St.Button({ style_class: 'summary-source-button',
+                                     y_fill: true,
                                      reactive: true,
                                      button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO | St.ButtonMask.THREE,
                                      track_hover: true });
@@ -926,8 +927,8 @@ SummaryItem.prototype = {
         this._sourceTitleBin.child = this._sourceTitle;
         this._sourceTitleBin.width = 0;
 
-        this._sourceBox.add_actor(this._sourceIcon);
-        this._sourceBox.add_actor(this._sourceTitleBin, { expand: true });
+        this._sourceBox.add(this._sourceIcon, { y_fill: false });
+        this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
         this.actor.child = this._sourceBox;
         this.rightClickMenu = new St.BoxLayout({ name: 'summary-right-click-menu',
                                                  vertical: true });
@@ -1331,12 +1332,18 @@ MessageTray.prototype = {
         // Turn off ellipsization for the previously expanded item that is
         // collapsing and for the item that is expanding because it looks
         // better that way.
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            // Ideally, we would remove 'expanded' pseudo class when the item
+            // is done collapsing, but we don't track when that happens.
+            this._expandedSummaryItem.actor.remove_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         this._expandedSummaryItem = summaryItem;
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            this._expandedSummaryItem.actor.add_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         // We tween on a "_expandedSummaryItemTitleWidth" pseudo-property
         // that represents the current title width of the
@@ -1928,6 +1935,7 @@ MessageTray.prototype = {
         this._adjustSummaryBoxPointerPosition();
 
         this._summaryBoxPointerState = State.SHOWING;
+        this._clickedSummaryItem.actor.add_style_pseudo_class('selected');
         this._summaryBoxPointer.show(true, Lang.bind(this, function() {
             this._summaryBoxPointerState = State.SHOWN;
         }));
@@ -1954,6 +1962,8 @@ MessageTray.prototype = {
             this._summaryRightClickMenuClickedId = 0;
         }
 
+        if (this._clickedSummaryItem)
+            this._clickedSummaryItem.actor.remove_style_pseudo_class('selected');
         this._clickedSummaryItem = null;
         this._clickedSummaryItemMouseButton = -1;
     },