diff --git a/browser/metro/base/content/browser-ui.js b/browser/metro/base/content/browser-ui.js
index ffafaefd3de1..b2db0e2baf9e 100644
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -1182,6 +1182,18 @@ var StartUI = {
       ContextUI.dismissTabs();
   },
 
+  onNarrowTitleClick: function onNarrowTitleClick(gridId) {
+    let grid = document.getElementById(gridId);
+
+    if (grid.hasAttribute("expanded"))
+      return;
+
+    for (let expandedGrid of Elements.startUI.querySelectorAll("[expanded]"))
+      expandedGrid.removeAttribute("expanded")
+
+    grid.setAttribute("expanded", "true");
+  },
+
   handleEvent: function handleEvent(aEvent) {
     switch (aEvent.type) {
       case "contextmenu":
diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul
index 569180f638f2..fa8ed5183ef6 100644
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -193,33 +193,39 @@
         <!-- Start UI -->
         <hbox id="start-container" flex="1" observes="bcast_windowState" class="meta content-height content-width">
           <!-- portrait/landscape/filled view -->
-          <hbox id="start" class="start-page" flex="1" observes="bcast_windowState">
-            <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
-              <vbox id="start-topsites" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startTopSitesHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedTopSitesHeader.label;"/>
-                <richgrid id="start-topsites-grid" noun="topsite" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1"/>
-              </vbox>
 
-              <vbox id="start-bookmarks" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startBookmarksHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedBookmarksHeader.label;"/>
-                <richgrid id="start-bookmarks-grid" noun="bookmark" seltype="multiple" flex="1"/>
-              </vbox>
+          <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
+            <vbox id="start-topsites" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startTopSitesHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedTopSitesHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-topsites-grid')"/>
+              <richgrid id="start-topsites-grid" noun="topsite" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1" expanded="true"/>
+            </vbox>
 
-              <vbox id="start-history" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startHistoryHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedHistoryHeader.label;"/>
-                <richgrid id="start-history-grid" noun="history" seltype="multiple" flex="1"/>
-              </vbox>
+            <vbox id="start-bookmarks" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startBookmarksHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedBookmarksHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-bookmarks-grid')"/>
+              <richgrid id="start-bookmarks-grid" noun="bookmark" seltype="multiple" flex="1"/>
+            </vbox>
 
-              <vbox id="start-remotetabs" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startRemoteTabsHeader.label;"/>
-                <label id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" value="&snappedRemoteTabsHeader.label;"/>
-                <richgrid id="start-remotetabs-grid" noun="tab" seltype="multiple" flex="1"/>
-              </vbox>
-            </scrollbox>
-          </hbox>
+            <vbox id="start-history" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startHistoryHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedHistoryHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-history-grid')"/>
+              <richgrid id="start-history-grid" noun="history" seltype="multiple" flex="1"/>
+            </vbox>
+
+            <vbox id="start-remotetabs" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startRemoteTabsHeader.label;"/>
+              <label id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" value="&snappedRemoteTabsHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-remotetabs-grid')"/>
+              <richgrid id="start-remotetabs-grid" noun="tab" seltype="multiple" flex="1"/>
+            </vbox>
+
+            <!-- Spacer to take extra space in snapped mode. -->
+            <spacer flex="999"/>
+          </scrollbox>
 
         </hbox>
       </vbox> <!-- end tray -->
diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css
index e48d28214469..0ed0f8948dbf 100644
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -722,8 +722,6 @@ setting[type="radio"] > vbox {
 
 #start-scrollbox[input="precise"] {
   overflow-x: scroll;
-  /* Move scrollbar above toolbar, discount padding added by .meta in #start-container */
-  margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
 }
 
 /* if autocomplete is set, hide both start pages,
@@ -746,9 +744,11 @@ setting[type="radio"] > vbox {
 
 #start-scrollbox {
   -moz-box-orient: horizontal;
+  /* Move scrollbar above toolbar, discount padding added by .meta in #start-container */
+  margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
 }
 
-#start[viewstate="snapped"] #start-scrollbox {
+#start-container[viewstate="snapped"] #start-scrollbox {
   -moz-box-orient: vertical;
 }
 
@@ -766,6 +766,16 @@ setting[type="radio"] > vbox {
 #start-container[viewstate="snapped"] .meta-section {
   margin: 0px;
   min-width: @grid_double_column_width@;
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
+#start-container[viewstate="snapped"] richgrid {
+  visibility: collapse;
+}
+
+#start-container[viewstate="snapped"] richgrid[expanded] {
+  visibility: visible;
 }
 
 /* Browser Content Areas ----------------------------------------------------- */
diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css
index 4befba74c110..121d53fb1041 100644
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -664,8 +664,8 @@ arrowbox {
   visibility: collapse;
 }
 
-#start[viewstate="snapped"] .meta-section-title.narrow-title,
-#start:not([viewstate="snapped"]) .meta-section-title.wide-title {
+#start-container[viewstate="snapped"] .meta-section-title.narrow-title,
+#start-container:not([viewstate="snapped"]) .meta-section-title.wide-title {
   visibility: visible;
 }