--- a/browser/base/content/newtab/grid.js
+++ b/browser/base/content/newtab/grid.js
@@ -14,16 +14,17 @@ const SPONSORED_TAG_BUFFER = 2; // 2px b
 /**
  * This singleton represents the grid that contains all sites.
  */
 var gGrid = {
   /**
    * The DOM node of the grid.
    */
   _node: null,
+  _gridDefaultContent: null,
   get node() { return this._node; },
 
   /**
    * The cached DOM fragment for sites.
    */
   _siteFragment: null,
 
   /**
@@ -44,16 +45,17 @@ var gGrid = {
   get isDocumentLoaded() { return document.readyState == "complete"; },
 
   /**
    * Initializes the grid.
    * @param aSelector The query selector of the grid.
    */
   init: function Grid_init() {
     this._node = document.getElementById("newtab-grid");
+    this._gridDefaultContent = this._node.lastChild;
     this._createSiteFragment();
 
     gLinks.populateCache(() => {
       this._refreshGrid();
       this._ready = true;
 
       // If fetching links took longer than loading the page itself then
       // we need to resize the grid as that was blocked until now.
@@ -142,17 +144,19 @@ var gGrid = {
     let numLinks = Math.min(links.length, cells.length);
     for (let i = 0; i < numLinks; i++) {
       if (links[i]) {
         this.createSite(links[i], cells[i]);
       }
     }
 
     this._cells = cells;
-    this._node.innerHTML = "";
+    while (this._gridDefaultContent.nextSibling) {
+      this._gridDefaultContent.nextSibling.remove();
+    }
     this._node.appendChild(fragment);
   },
 
   /**
    * Calculate the height for a number of rows up to the maximum rows
    * @param rows Number of rows defaulting to the max
    */
   _computeHeight: function Grid_computeHeight(aRows) {

--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -117,16 +117,20 @@ input[type=button] {
   opacity: 0;
 }
 
 #newtab-grid[locked],
 #newtab-grid[page-disabled] {
   pointer-events: none;
 }
 
+body:not(.compact) #topsites-heading {
+  display: none;
+}
+
 /*
  * If you change the sizes here, make sure you
  * change the preferences:
  * toolkit.pageThumbs.minWidth
  * toolkit.pageThumbs.minHeight
  */
 /* CELLS */
 .newtab-cell {

--- a/browser/base/content/newtab/newTab.xhtml
+++ b/browser/base/content/newtab/newTab.xhtml
@@ -50,16 +50,17 @@
             <label>&newtab.customize.cog.learn;</label>
           </div>
         </div>
     </div>
   </div>
 
   <div id="newtab-vertical-margin">
     <div id="newtab-margin-top"/>
+
     <div id="newtab-margin-undo-container">
       <div id="newtab-undo-container" undo-disabled="true">
         <label id="newtab-undo-label">&newtab.undo.removedLabel;</label>
         <button id="newtab-undo-button" tabindex="-1"
                 class="newtab-undo-button">&newtab.undo.undoButton;</button>
         <button id="newtab-undo-restore-button" tabindex="-1"
                 class="newtab-undo-button">&newtab.undo.restoreButton;</button>
         <button id="newtab-undo-close-button" tabindex="-1" title="&newtab.undo.closeTooltip;"/>
@@ -74,19 +75,21 @@
         <input id="newtab-search-submit" type="button"
              title="&contentSearchSubmit.tooltip;"/>
       </div>
     </div>
 
     <div id="newtab-horizontal-margin">
       <div class="newtab-side-margin"/>
       <div id="newtab-grid">
+        <h1 id="topsites-heading">&newtab.topSites.heading;</h1>
       </div>
       <div class="newtab-side-margin"/>
     </div>
+
     <div id="newtab-margin-bottom"/>
   </div>
   <input id="newtab-customize-button" type="button" dir="&locale.dir;"
          value="&#x2699;"
          title="&newtab.customize.title;"/>
 </body>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/contentSearchUI.js"/>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/>

--- a/browser/locales/en-US/chrome/browser/newTab.dtd
+++ b/browser/locales/en-US/chrome/browser/newTab.dtd
@@ -1,14 +1,15 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!-- These strings are used in the about:newtab page -->
 <!ENTITY newtab.pageTitle "New Tab">
+<!ENTITY newtab.topSites.heading "Your Top Sites">
 <!ENTITY newtab.customize.classic "Show your top sites">
 <!ENTITY newtab.customize.cog.enhanced "Include suggested sites">
 <!ENTITY newtab.customize.cog.title2 "NEW TAB CONTROLS">
 <!ENTITY newtab.customize.cog.learn "Learn about New Tab">
 <!ENTITY newtab.customize.title "Customize your New Tab page">
 <!ENTITY newtab.customize.suggested "Show suggested and your top sites">
 <!ENTITY newtab.customize.topsites "Show your top sites">
 <!ENTITY newtab.customize.blank2 "Show blank page">

--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -94,16 +94,37 @@
 
 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
   background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
   background-color: #FFFFFF;
   border: solid 1px #CCCCCC;
   border-radius: 2px;
 }
 
+/* GRID */
+body.compact #newtab-grid {
+  /* Allow #topsites-heading to use position:absolute such that it doesn't
+     affect how many cells we can fit into the grid. */
+  position: relative;
+  padding-top: 1em;
+  margin-top: -1em;
+}
+
+#topsites-heading {
+  color: #7A7A7A;
+  font-size: 1em;
+  font-weight: normal;
+  /* Position the heading such that it doesn't affect how many cells we
+     can fit into the grid. */
+  position: absolute;
+  top: 0;
+  /* The horizontal margin aligns the heading with the cells. */
+  margin: 0 10px;
+}
+
 /* CELLS */
 .newtab-cell {
   --cell-corner-radius: 8px;
   background-color: rgba(255,255,255,.2);
   border-radius: var(--cell-corner-radius);
 }
 
 body.compact .newtab-cell {