diff --git a/Documentation/config-gerrit.txt b/Documentation/config-gerrit.txt
index 5425774..95d78de 100644
--- a/Documentation/config-gerrit.txt
+++ b/Documentation/config-gerrit.txt
@@ -4832,9 +4832,11 @@
 give priority to users that are present as reviewers in any of those
 changes. The number of changes we go over is `sugggest.relevantChanges`.
 +
-By default 50. This nubmer is a tradeoff between speed and accuracy.
+This nubmer is a tradeoff between speed and accuracy.
 A high number would be accurate but slow, and a low number would be
 fast but inaccurate.
++
+By default 50.
 
 [[tracing]]
 === Section tracing
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index e16c58d..9022cf2 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -37,7 +37,7 @@
     <style include="shared-styles">
       :host {
         display: table-row;
-        color: var(--reviewed-text-color);
+        color: var(--primary-text-color);
       }
       :host(:focus) {
         outline: none;
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
index 8fdb90c..69d405d 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
@@ -53,71 +53,77 @@
       }
     </style>
     <table id="changeList">
-      <tr class="topHeader">
-        <th class="leftPadding"></th>
-        <th class="star" hidden$="[[!showStar]]" hidden></th>
-        <th class="number" hidden$="[[!showNumber]]" hidden>#</th>
-        <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
-          <th class$="[[_lowerCase(item)]]"
-              hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
-            [[item]]
-          </th>
-        </template>
-        <template is="dom-repeat" items="[[labelNames]]" as="labelName">
-          <th class="label" title$="[[labelName]]">
-            [[_computeLabelShortcut(labelName)]]
-          </th>
-        </template>
-        <template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]"
-          as="pluginHeader">
-          <th class="endpoint">
-            <gr-endpoint-decorator name$="[[pluginHeader]]">
-            </gr-endpoint-decorator>
-          </th>
-        </template>
-      </tr>
+      <thead>
+        <tr class="topHeader">
+          <th class="leftPadding"></th>
+          <th class="star" hidden$="[[!showStar]]" hidden></th>
+          <th class="number" hidden$="[[!showNumber]]" hidden>#</th>
+          <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
+            <th class$="[[_lowerCase(item)]]"
+                hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
+              [[item]]
+            </th>
+          </template>
+          <template is="dom-repeat" items="[[labelNames]]" as="labelName">
+            <th class="label" title$="[[labelName]]">
+              [[_computeLabelShortcut(labelName)]]
+            </th>
+          </template>
+          <template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]"
+            as="pluginHeader">
+            <th class="endpoint">
+              <gr-endpoint-decorator name$="[[pluginHeader]]">
+              </gr-endpoint-decorator>
+            </th>
+          </template>
+        </tr>
+      </thead>
       <template is="dom-repeat" items="[[sections]]" as="changeSection"
           index-as="sectionIndex">
         <template is="dom-if" if="[[changeSection.name]]">
-          <tr class="groupHeader">
-            <td class="leftPadding"></td>
-            <td class="star" hidden$="[[!showStar]]" hidden></td>
-            <td class="cell"
-                colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
-              <a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
-                <span class="section-name">[[changeSection.name]]</span>
-                <span class="section-count-label">[[changeSection.countLabel]]</span>
-              </a>
-            </td>
-          </tr>
+          <tbody>
+            <tr class="groupHeader">
+              <td class="leftPadding"></td>
+              <td class="star" hidden$="[[!showStar]]" hidden></td>
+              <td class="cell"
+                  colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
+                <a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
+                  <span class="section-name">[[changeSection.name]]</span>
+                  <span class="section-count-label">[[changeSection.countLabel]]</span>
+                </a>
+              </td>
+            </tr>
+          </tbody>
         </template>
-        <template is="dom-if" if="[[_isEmpty(changeSection)]]">
-          <tr class="noChanges">
-            <td class="leftPadding"></td>
-            <td class="star" hidden$="[[!showStar]]" hidden></td>
-            <td class="cell"
-                colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
-              <template is="dom-if" if="[[_isOutgoing(changeSection)]]">
-                <slot name="empty-outgoing"></slot>
-              </template>
-              <template is="dom-if" if="[[!_isOutgoing(changeSection)]]">
-                No changes
-              </template>
-            </td>
-          </tr>
-        </template>
-        <template is="dom-repeat" items="[[changeSection.results]]" as="change">
-          <gr-change-list-item
-              selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]"
-              highlight$="[[_computeItemHighlight(account, change)]]"
-              needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
-              change="[[change]]"
-              visible-change-table-columns="[[visibleChangeTableColumns]]"
-              show-number="[[showNumber]]"
-              show-star="[[showStar]]"
-              tabindex="0"
-              label-names="[[labelNames]]"></gr-change-list-item>
-        </template>
+        <tbody class="groupContent">
+          <template is="dom-if" if="[[_isEmpty(changeSection)]]">
+            <tr class="noChanges">
+              <td class="leftPadding"></td>
+              <td class="star" hidden$="[[!showStar]]" hidden></td>
+              <td class="cell"
+                  colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
+                <template is="dom-if" if="[[_isOutgoing(changeSection)]]">
+                  <slot name="empty-outgoing"></slot>
+                </template>
+                <template is="dom-if" if="[[!_isOutgoing(changeSection)]]">
+                  No changes
+                </template>
+              </td>
+            </tr>
+          </template>
+          <template is="dom-repeat" items="[[changeSection.results]]" as="change">
+            <gr-change-list-item
+                selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]"
+                highlight$="[[_computeItemHighlight(account, change)]]"
+                needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
+                change="[[change]]"
+                visible-change-table-columns="[[visibleChangeTableColumns]]"
+                show-number="[[showNumber]]"
+                show-star="[[showStar]]"
+                tabindex="0"
+                label-names="[[labelNames]]"></gr-change-list-item>
+          </template>
+        </tbody>
       </template>
     </table>
     <gr-cursor-manager
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
index 41475a0..f119e98 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
@@ -34,7 +34,6 @@
   <template>
     <style include="shared-styles">
       :host {
-        background-color: var(--view-background-color);
         display: block;
       }
       .loading {
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
index f4bd6a6..097b92c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
@@ -68,17 +68,7 @@
       }
       iron-icon {
         color: inherit;
-        height: 1.2rem;
         margin-right: var(--spacing-xs);
-        width: 1.2rem;
-      }
-      gr-button {
-        min-height: 2.25em;
-      }
-      gr-dropdown {
-        --gr-button: {
-          min-height: 2.25em;
-        }
       }
       #moreActions iron-icon {
         margin: 0;
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
index deaa094..91745be 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
@@ -1224,10 +1224,18 @@
 
     _setLoadingOnButtonWithKey(type, key) {
       this._actionLoadingMessage = this._computeLoadingLabel(key);
+      let buttonKey = key;
+      // TODO(dhruvsri): clean this up later
+      // If key is revert-submission, then button key should be 'revert'
+      if (buttonKey === ChangeActions.REVERT_SUBMISSION) {
+        // Revert submission button no longer exists
+        buttonKey = ChangeActions.REVERT;
+      }
 
       // If the action appears in the overflow menu.
-      if (this._getActionOverflowIndex(type, key) !== -1) {
-        this.push('_disabledMenuActions', key === '/' ? 'delete' : key);
+      if (this._getActionOverflowIndex(type, buttonKey) !== -1) {
+        this.push('_disabledMenuActions', buttonKey === '/' ? 'delete' :
+          buttonKey);
         return function() {
           this._actionLoadingMessage = '';
           this._disabledMenuActions = [];
@@ -1235,7 +1243,7 @@
       }
 
       // Otherwise it's a top-level action.
-      const buttonEl = this.$$(`[data-action-key="${key}"]`);
+      const buttonEl = this.$$(`[data-action-key="${buttonKey}"]`);
       buttonEl.setAttribute('loading', true);
       buttonEl.disabled = true;
       return function() {
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 955a8c5..dd49e8d 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -60,7 +60,7 @@
   <template>
     <style include="shared-styles">
       .container:not(.loading) {
-        background-color: var(--view-background-color);
+        background-color: var(--background-color-tertiary);
       }
       .container.loading {
         color: var(--deemphasized-text-color);
@@ -68,7 +68,7 @@
       }
       .header {
         align-items: center;
-        background-color: var(--table-header-background-color);
+        background-color: var(--background-color-primary);
         border-bottom: 1px solid var(--border-color);
         display: flex;
         padding: var(--spacing-s) var(--spacing-l);
@@ -112,13 +112,15 @@
       .changeStatus {
         text-transform: capitalize;
       }
-      .changeInfo {
-        background-color: var(--table-header-background-color);
-      }
       /* Strong specificity here is needed due to
          https://github.com/Polymer/polymer/issues/2531 */
-      .container section.changeInfo {
+      .container .changeInfo {
         display: flex;
+        background-color: var(--background-color-secondary);
+      }
+      section {
+        background-color: var(--view-background-color);
+        box-shadow: var(--elevation-level-1);
       }
       .changeId {
         color: var(--deemphasized-text-color);
@@ -233,9 +235,9 @@
         margin-right: -5px;
       }
       paper-tabs {
-        background-color: var(--table-header-background-color);
-        border-top: 1px solid var(--border-color);
-        height: calc(var(--line-height-normal) + 2*var(--spacing-m));
+        background-color: var(--background-color-tertiary);
+        margin-top: var(--spacing-m);
+        height: calc(var(--line-height-h3) + var(--spacing-m));
         --paper-tabs-selection-bar-color: var(--link-color);
       }
       paper-tab {
@@ -366,182 +368,184 @@
         class="container"
         on-show-checks-table="_handleShowTab"
         hidden$="{{_loading}}">
-      <div class$="[[_computeHeaderClass(_editMode)]]">
-        <div class="headerTitle">
-          <div class="changeStatuses">
-            <template is="dom-repeat" items="[[_changeStatuses]]" as="status">
-              <gr-change-status
-                  max-width="100"
-                  status="[[status]]"></gr-change-status>
-            </template>
-          </div>
-          <div class="statusText">
-            <template
-                is="dom-if"
-                if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
-              <span class="text"> as </span>
-              <gr-commit-info
-                  change="[[_change]]"
-                  commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
-                  server-config="[[_serverConfig]]"></gr-commit-info>
-            </template>
-          </div>
-          <gr-change-star
-              id="changeStar"
-              change="{{_change}}"
-              on-toggle-star="_handleToggleStar"
-              hidden$="[[!_loggedIn]]"></gr-change-star>
-
-          <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
-              href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
-          <span class="changeNumberColon">:&nbsp;</span>
-          <span class="headerSubject">[[_change.subject]]</span>
-          <gr-copy-clipboard
-            hide-input
-            text="[[_computeCopyTextForTitle(_change)]]">
-          </gr-copy-clipboard>
-        </div><!-- end headerTitle -->
-        <div class="commitActions" hidden$="[[!_loggedIn]]">
-          <gr-change-actions
-              id="actions"
-              change="[[_change]]"
-              disable-edit="[[disableEdit]]"
-              has-parent="[[hasParent]]"
-              actions="[[_change.actions]]"
-              revision-actions="{{_currentRevisionActions}}"
-              change-num="[[_changeNum]]"
-              change-status="[[_change.status]]"
-              commit-num="[[_commitInfo.commit]]"
-              latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
-              commit-message="[[_latestCommitMessage]]"
-              edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]"
-              edit-mode="[[_editMode]]"
-              edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]"
-              private-by-default="[[_projectConfig.private_by_default]]"
-              on-reload-change="_handleReloadChange"
-              on-edit-tap="_handleEditTap"
-              on-stop-edit-tap="_handleStopEditTap"
-              on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
-        </div><!-- end commit actions -->
-      </div><!-- end header -->
-      <section class="changeInfo">
-        <div class="changeInfo-column changeMetadata hideOnMobileOverlay">
-          <gr-change-metadata
-              id="metadata"
-              change="{{_change}}"
-              account="[[_account]]"
-              revision="[[_selectedRevision]]"
-              commit-info="[[_commitInfo]]"
-              server-config="[[_serverConfig]]"
-              parent-is-current="[[_parentIsCurrent]]"
-              on-show-reply-dialog="_handleShowReplyDialog">
-          </gr-change-metadata>
-        </div>
-        <div id="mainChangeInfo" class="changeInfo-column mainChangeInfo">
-          <div id="commitAndRelated" class="hideOnMobileOverlay">
-            <div class="commitContainer">
-              <div>
-                <gr-button
-                    id="replyBtn"
-                    class="reply"
-                    title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG,
-                      ShortcutSection.ACTIONS)]]"
-                    hidden$="[[!_loggedIn]]"
-                    primary
-                    disabled="[[_replyDisabled]]"
-                    on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
-              </div>
-              <div
-                  id="commitMessage"
-                  class="commitMessage">
-                <gr-editable-content id="commitMessageEditor"
-                    editing="[[_editingCommitMessage]]"
-                    content="{{_latestCommitMessage}}"
-                    storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]"
-                    remove-zero-width-space
-                    collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
-                  <gr-linked-text pre
-                      content="[[_latestCommitMessage]]"
-                      config="[[_projectConfig.commentlinks]]"
-                      remove-zero-width-space></gr-linked-text>
-                </gr-editable-content>
-                <gr-button link
-                    class="editCommitMessage"
-                    on-click="_handleEditCommitMessage"
-                    hidden$="[[_hideEditCommitMessage]]">Edit</gr-button>
-                <div class="changeId" hidden$="[[!_changeIdCommitMessageError]]">
-                  <hr>
-                  Change-Id:
-                  <span
-                      class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]"
-                      title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]">
-                    [[_change.change_id]]
-                  </span>
-                </div>
-              </div>
-              <div
-                  id="commitCollapseToggle"
-                  class="collapseToggleContainer"
-                  hidden$="[[!_commitCollapsible]]">
-                <gr-button
-                    link
-                    id="commitCollapseToggleButton"
-                    class="collapseToggleButton"
-                    on-click="_toggleCommitCollapsed">
-                  [[_computeCollapseText(_commitCollapsed)]]
-                </gr-button>
-              </div>
-              <gr-endpoint-decorator name="commit-container">
-                <gr-endpoint-param name="change" value="[[_change]]">
-                </gr-endpoint-param>
-                <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
-                </gr-endpoint-param>
-              </gr-endpoint-decorator>
+      <section class="changeInfoSection">
+        <div class$="[[_computeHeaderClass(_editMode)]]">
+          <div class="headerTitle">
+            <div class="changeStatuses">
+              <template is="dom-repeat" items="[[_changeStatuses]]" as="status">
+                <gr-change-status
+                    max-width="100"
+                    status="[[status]]"></gr-change-status>
+              </template>
             </div>
-            <div class="relatedChanges">
-              <gr-related-changes-list id="relatedChanges"
-                  class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]"
-                  change="[[_change]]"
-                  mergeable="[[_mergeable]]"
-                  has-parent="{{hasParent}}"
-                  on-update="_updateRelatedChangeMaxHeight"
-                  patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
-                  on-new-section-loaded="_computeShowRelatedToggle">
-              </gr-related-changes-list>
-              <div
-                  id="relatedChangesToggle"
-                  class="collapseToggleContainer">
-                <gr-button
-                    link
-                    id="relatedChangesToggleButton"
-                    class="collapseToggleButton"
-                    on-click="_toggleRelatedChangesCollapsed">
-                  [[_computeCollapseText(_relatedChangesCollapsed)]]
-                </gr-button>
+            <div class="statusText">
+              <template
+                  is="dom-if"
+                  if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
+                <span class="text"> as </span>
+                <gr-commit-info
+                    change="[[_change]]"
+                    commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
+                    server-config="[[_serverConfig]]"></gr-commit-info>
+              </template>
+            </div>
+            <gr-change-star
+                id="changeStar"
+                change="{{_change}}"
+                on-toggle-star="_handleToggleStar"
+                hidden$="[[!_loggedIn]]"></gr-change-star>
+
+            <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
+                href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
+            <span class="changeNumberColon">:&nbsp;</span>
+            <span class="headerSubject">[[_change.subject]]</span>
+            <gr-copy-clipboard
+              hide-input
+              text="[[_computeCopyTextForTitle(_change)]]">
+            </gr-copy-clipboard>
+          </div><!-- end headerTitle -->
+          <div class="commitActions" hidden$="[[!_loggedIn]]">
+            <gr-change-actions
+                id="actions"
+                change="[[_change]]"
+                disable-edit="[[disableEdit]]"
+                has-parent="[[hasParent]]"
+                actions="[[_change.actions]]"
+                revision-actions="{{_currentRevisionActions}}"
+                change-num="[[_changeNum]]"
+                change-status="[[_change.status]]"
+                commit-num="[[_commitInfo.commit]]"
+                latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
+                commit-message="[[_latestCommitMessage]]"
+                edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]"
+                edit-mode="[[_editMode]]"
+                edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]"
+                private-by-default="[[_projectConfig.private_by_default]]"
+                on-reload-change="_handleReloadChange"
+                on-edit-tap="_handleEditTap"
+                on-stop-edit-tap="_handleStopEditTap"
+                on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
+          </div><!-- end commit actions -->
+        </div><!-- end header -->
+        <div class="changeInfo">
+          <div class="changeInfo-column changeMetadata hideOnMobileOverlay">
+            <gr-change-metadata
+                id="metadata"
+                change="{{_change}}"
+                account="[[_account]]"
+                revision="[[_selectedRevision]]"
+                commit-info="[[_commitInfo]]"
+                server-config="[[_serverConfig]]"
+                parent-is-current="[[_parentIsCurrent]]"
+                on-show-reply-dialog="_handleShowReplyDialog">
+            </gr-change-metadata>
+          </div>
+          <div id="mainChangeInfo" class="changeInfo-column mainChangeInfo">
+            <div id="commitAndRelated" class="hideOnMobileOverlay">
+              <div class="commitContainer">
+                <div>
+                  <gr-button
+                      id="replyBtn"
+                      class="reply"
+                      title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG,
+                        ShortcutSection.ACTIONS)]]"
+                      hidden$="[[!_loggedIn]]"
+                      primary
+                      disabled="[[_replyDisabled]]"
+                      on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
+                </div>
+                <div
+                    id="commitMessage"
+                    class="commitMessage">
+                  <gr-editable-content id="commitMessageEditor"
+                      editing="[[_editingCommitMessage]]"
+                      content="{{_latestCommitMessage}}"
+                      storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]"
+                      remove-zero-width-space
+                      collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
+                    <gr-linked-text pre
+                        content="[[_latestCommitMessage]]"
+                        config="[[_projectConfig.commentlinks]]"
+                        remove-zero-width-space></gr-linked-text>
+                  </gr-editable-content>
+                  <gr-button link
+                      class="editCommitMessage"
+                      on-click="_handleEditCommitMessage"
+                      hidden$="[[_hideEditCommitMessage]]">Edit</gr-button>
+                  <div class="changeId" hidden$="[[!_changeIdCommitMessageError]]">
+                    <hr>
+                    Change-Id:
+                    <span
+                        class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]"
+                        title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]">
+                      [[_change.change_id]]
+                    </span>
+                  </div>
+                </div>
+                <div
+                    id="commitCollapseToggle"
+                    class="collapseToggleContainer"
+                    hidden$="[[!_commitCollapsible]]">
+                  <gr-button
+                      link
+                      id="commitCollapseToggleButton"
+                      class="collapseToggleButton"
+                      on-click="_toggleCommitCollapsed">
+                    [[_computeCollapseText(_commitCollapsed)]]
+                  </gr-button>
+                </div>
+                <gr-endpoint-decorator name="commit-container">
+                  <gr-endpoint-param name="change" value="[[_change]]">
+                  </gr-endpoint-param>
+                  <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
+                  </gr-endpoint-param>
+                </gr-endpoint-decorator>
+              </div>
+              <div class="relatedChanges">
+                <gr-related-changes-list id="relatedChanges"
+                    class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]"
+                    change="[[_change]]"
+                    mergeable="[[_mergeable]]"
+                    has-parent="{{hasParent}}"
+                    on-update="_updateRelatedChangeMaxHeight"
+                    patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
+                    on-new-section-loaded="_computeShowRelatedToggle">
+                </gr-related-changes-list>
+                <div
+                    id="relatedChangesToggle"
+                    class="collapseToggleContainer">
+                  <gr-button
+                      link
+                      id="relatedChangesToggleButton"
+                      class="collapseToggleButton"
+                      on-click="_toggleRelatedChangesCollapsed">
+                    [[_computeCollapseText(_relatedChangesCollapsed)]]
+                  </gr-button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </section>
 
-      <section class="patchInfo">
-        <template is="dom-if" if="[[_showPrimaryTabs]]">
-          <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
-            <paper-tab>Files</paper-tab>
-            <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
-              as="tabHeader">
-              <paper-tab>
-                  <gr-endpoint-decorator name$="[[tabHeader]]">
-                      <gr-endpoint-param name="change" value="[[_change]]">
-                      </gr-endpoint-param>
-                      <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
-                      </gr-endpoint-param>
-                  </gr-endpoint-decorator>
-              </paper-tab>
-            </template>
-          </paper-tabs>
-        </template>
+      <template is="dom-if" if="[[_showPrimaryTabs]]">
+        <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
+          <paper-tab>Files</paper-tab>
+          <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
+            as="tabHeader">
+            <paper-tab>
+                <gr-endpoint-decorator name$="[[tabHeader]]">
+                    <gr-endpoint-param name="change" value="[[_change]]">
+                    </gr-endpoint-param>
+                    <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
+                    </gr-endpoint-param>
+                </gr-endpoint-decorator>
+            </paper-tab>
+          </template>
+        </paper-tabs>
+      </template>
 
+      <section class="patchInfo">
         <div hidden$="[[!_showFileTabContent]]">
           <gr-file-list-header
             id="fileListHeader"
@@ -609,6 +613,7 @@
         <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
         </gr-endpoint-param>
       </gr-endpoint-decorator>
+
       <paper-tabs
           id="commentTabs"
           on-selected-changed="_handleCommentTabChange">
@@ -622,49 +627,53 @@
         </paper-tab>
         <paper-tab class="robotComments">Findings</paper-tab>
       </paper-tabs>
-      <template is="dom-if" if="[[_isSelectedView(_currentView,
-        _commentTabs.CHANGE_LOG)]]">
-        <gr-messages-list
-            class="hideOnMobileOverlay"
-            change-num="[[_changeNum]]"
-            labels="[[_change.labels]]"
-            messages="[[_change.messages]]"
-            reviewer-updates="[[_change.reviewer_updates]]"
-            change-comments="[[_changeComments]]"
-            project-name="[[_change.project]]"
-            show-reply-buttons="[[_loggedIn]]"
-            on-message-anchor-tap="_handleMessageAnchorTap"
-            on-reply="_handleMessageReply"></gr-messages-list>
-      </template>
-      <template is="dom-if" if="[[_isSelectedView(_currentView,
-        _commentTabs.COMMENT_THREADS)]]">
-        <gr-thread-list
-            threads="[[_commentThreads]]"
-            change="[[_change]]"
-            change-num="[[_changeNum]]"
-            comment-tab="[[_currentView]]"
-            logged-in="[[_loggedIn]]"
-            only-show-robot-comments-with-human-reply
-            on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
-      </template>
-      <template is="dom-if" if="[[_isSelectedView(_currentView,
-        _commentTabs.ROBOT_COMMENTS)]]">
-        <gr-dropdown-list
-          class="patch-set-dropdown"
-          items="[[_robotCommentsPatchSetDropdownItems]]"
-          on-value-change="_handleRobotCommentPatchSetChanged"
-          value="[[_currentRobotCommentsPatchSet]]">
-        </gr-dropdown-list>
-        <gr-thread-list
-            threads="[[_robotCommentThreads]]"
-            change="[[_change]]"
-            change-num="[[_changeNum]]"
-            logged-in="[[_loggedIn]]"
-            comment-tab="[[_currentView]]"
-            hide-toggle-buttons
-            on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
-      </template>
+
+      <section class="changeLog">
+        <template is="dom-if" if="[[_isSelectedView(_currentView,
+          _commentTabs.CHANGE_LOG)]]">
+          <gr-messages-list
+              class="hideOnMobileOverlay"
+              change-num="[[_changeNum]]"
+              labels="[[_change.labels]]"
+              messages="[[_change.messages]]"
+              reviewer-updates="[[_change.reviewer_updates]]"
+              change-comments="[[_changeComments]]"
+              project-name="[[_change.project]]"
+              show-reply-buttons="[[_loggedIn]]"
+              on-message-anchor-tap="_handleMessageAnchorTap"
+              on-reply="_handleMessageReply"></gr-messages-list>
+        </template>
+        <template is="dom-if" if="[[_isSelectedView(_currentView,
+          _commentTabs.COMMENT_THREADS)]]">
+          <gr-thread-list
+              threads="[[_commentThreads]]"
+              change="[[_change]]"
+              change-num="[[_changeNum]]"
+              comment-tab="[[_currentView]]"
+              logged-in="[[_loggedIn]]"
+              only-show-robot-comments-with-human-reply
+              on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
+        </template>
+        <template is="dom-if" if="[[_isSelectedView(_currentView,
+          _commentTabs.ROBOT_COMMENTS)]]">
+          <gr-dropdown-list
+            class="patch-set-dropdown"
+            items="[[_robotCommentsPatchSetDropdownItems]]"
+            on-value-change="_handleRobotCommentPatchSetChanged"
+            value="[[_currentRobotCommentsPatchSet]]">
+          </gr-dropdown-list>
+          <gr-thread-list
+              threads="[[_robotCommentThreads]]"
+              change="[[_change]]"
+              change-num="[[_changeNum]]"
+              logged-in="[[_loggedIn]]"
+              comment-tab="[[_currentView]]"
+              hide-toggle-buttons
+              on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
+        </template>
+      </section>
     </div>
+
     <gr-apply-fix-dialog
       id="applyFixDialog"
       prefs="[[_diffPrefs]]"
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
index c807c3d..600f2ab 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -46,7 +46,6 @@
       }
       .patchInfo-header {
         align-items: center;
-        background-color: var(--table-header-background-color);
         border-top: 1px solid var(--border-color);
         display: flex;
         padding: var(--spacing-s) var(--spacing-l);
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index 0a7f1ce..33420f4 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -67,6 +67,7 @@
         visibility: hidden;
       }
       .header-row {
+        background-color: var(--background-color-secondary);
         font-weight: var(--font-weight-bold);
       }
       .controlRow {
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
index 1e57693..6154ca5 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -33,12 +33,10 @@
       }
       .header {
         align-items: center;
-        background-color: var(--table-header-background-color);
-        border-bottom: 1px solid var(--border-color);
         border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
         display: flex;
         justify-content: space-between;
-        min-height: 3.2em;
         padding: var(--spacing-s) var(--spacing-l);
       }
       #messageControlsContainer {
@@ -53,6 +51,7 @@
       }
       #messageControlsContainer {
         align-items: center;
+        background-color: var(--background-color-secondary);
         border-bottom: 1px solid var(--border-color);
         display: flex;
         height: 2.25em;
diff --git a/polygerrit-ui/app/elements/gr-app-element.html b/polygerrit-ui/app/elements/gr-app-element.html
index 0b96706..62f2967 100644
--- a/polygerrit-ui/app/elements/gr-app-element.html
+++ b/polygerrit-ui/app/elements/gr-app-element.html
@@ -51,7 +51,7 @@
   <template>
     <style include="shared-styles">
       :host {
-        background-color: var(--view-background-color);
+        background-color: var(--background-color-tertiary);
         display: flex;
         flex-direction: column;
         min-height: 100%;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
index ea6c0de..6e5eefd 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
@@ -227,6 +227,29 @@
         user-select: none;
       }
 
+      .respectfulReviewTip {
+        justify-content: space-between;
+        display: flex;
+        padding: var(--spacing-m);
+        border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
+        margin-bottom: var(--spacing-m);
+      }
+      .respectfulReviewTip div {
+        display: flex;
+      }
+      .respectfulReviewTip div iron-icon {
+        margin-right: var(--spacing-s);
+      }
+      .respectfulReviewTip a {
+        white-space: nowrap;
+        margin-right: var(--spacing-s);
+        padding-left: var(--spacing-m);
+        text-decoration: none;
+      }
+      .pointer {
+        cursor: pointer;
+      }
     </style>
     <div id="container" class="container">
       <div class="header" id="header" on-click="_handleToggleCollapsed">
@@ -289,6 +312,30 @@
               disabled="{{disabled}}"
               rows="4"
               text="{{_messageText}}"></gr-textarea>
+          <template is="dom-if" if="[[_computeVisibilityOfTip(_showRespectfulTip, _respectfulTipDismissed)]]">
+            <div class="respectfulReviewTip">
+              <div>
+                <gr-tooltip-content
+                  has-tooltip
+                  title="Tips for respectful code reviews.">
+                  <iron-icon class="pointer" icon="gr-icons:lightbulb-outline"></iron-icon>
+                </gr-tooltip-content>
+                [[_respectfulReviewTip]]
+              </div>
+              <div>
+                <a
+                  on-click="_onRespectfulReadMoreClick"
+                  href="https://testing.googleblog.com/2019/11/code-health-respectful-reviews-useful.html"
+                  target="_blank">
+                  Read more
+                </a>
+                <iron-icon
+                  class="close pointer"
+                  on-click="_dismissRespectfulTip"
+                  icon="gr-icons:close"></iron-icon>
+              </div>
+            </div>
+          </template>
         </template>
         <!--The message class is needed to ensure selectability from
         gr-diff-selection.-->
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
index 3f4cc69..91c88af 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
@@ -32,6 +32,22 @@
   const FILE = 'FILE';
 
   /**
+   * All candidates tips to show, will pick randomly.
+   */
+  const RESPECTFUL_REVIEW_TIPS= [
+    'DO: Assume competence.',
+    'DO: Provide rationale or context.',
+    'DO: Consider how comments may be interpreted.',
+    'DON’T: Criticize the person.',
+    'DON’T: Use harsh language.',
+    'DO: Provide specific and actionable feedback.',
+    'DO: Clearly mark nitpicks and optional comments.',
+    'DO: Clarify code or reply to the reviewer’s comment.',
+    'DO: When disagreeing with feedback, explain the advantage' +
+    ' of your approach.',
+  ];
+
+  /**
    * @appliesMixin Gerrit.FireMixin
    * @appliesMixin Gerrit.KeyboardShortcutMixin
    * @extends Polymer.Element
@@ -167,6 +183,16 @@
           type: Object,
           value: () => { return {}; },
         },
+
+        _showRespectfulTip: {
+          type: Boolean,
+          value: false,
+        },
+        _respectfulReviewTip: String,
+        _respectfulTipDismissed: {
+          type: Boolean,
+          value: false,
+        },
       };
     }
 
@@ -177,6 +203,7 @@
         '_isRobotComment(comment)',
         '_calculateActionstoShow(showActions, isRobotComment)',
         '_computeHasHumanReply(comment, comments.*)',
+        '_onEditingChange(editing)',
       ];
     }
 
@@ -209,6 +236,50 @@
       }
     }
 
+    _onEditingChange(editing) {
+      if (!editing) return;
+      // visibility based on cache this will make sure we only and always show
+      // a tip once every Math.max(a day, period between creating comments)
+      const cachedVisibilityOfRespectfulTip =
+        this.$.storage.getRespectfulTipVisibility();
+      if (!cachedVisibilityOfRespectfulTip) {
+        // we still want to show the tip with a probability of 30%
+        if (this.getRandomNum(0, 3) >= 1) return;
+        this._showRespectfulTip = true;
+        const randomIdx = this.getRandomNum(0, RESPECTFUL_REVIEW_TIPS.length);
+        this._respectfulReviewTip = RESPECTFUL_REVIEW_TIPS[randomIdx];
+        this.$.reporting.reportInteraction(
+            'respectful-tip-appeared',
+            {tip: this._respectfulReviewTip}
+        );
+        // update cache
+        this.$.storage.setRespectfulTipVisibility();
+      }
+    }
+
+    /** Set as a separate method so easy to stub. */
+    getRandomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min);
+    }
+
+    _computeVisibilityOfTip(showTip, tipDismissed) {
+      return showTip && !tipDismissed;
+    }
+
+    _dismissRespectfulTip() {
+      this._respectfulTipDismissed = true;
+      this.$.reporting.reportInteraction(
+          'respectful-tip-dismissed',
+          {tip: this._respectfulReviewTip}
+      );
+      // add a 3 day delay to the tip cache
+      this.$.storage.setRespectfulTipVisibility(/* delayDays= */ 3);
+    }
+
+    _onRespectfulReadMoreClick() {
+      this.$.reporting.reportInteraction('respectful-read-more-clicked');
+    }
+
     get textarea() {
       return this.shadowRoot.querySelector('#editTextarea');
     }
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html
index 8bc9518..6d0a5e5 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html
@@ -1031,5 +1031,153 @@
         MockInteractions.tap(element.$$('.show-fix'));
       });
     });
+
+    suite('respectful tips', () => {
+      let element;
+      let sandbox;
+      let clock;
+      setup(() => {
+        stub('gr-rest-api-interface', {
+          getAccount() { return Promise.resolve(null); },
+        });
+        clock = sinon.useFakeTimers();
+        sandbox = sinon.sandbox.create();
+      });
+
+      teardown(() => {
+        clock.restore();
+        sandbox.restore();
+      });
+
+      test('show tip when no cached record', done => {
+        // fake stub for storage
+        const respectfulGetStub = sinon.stub();
+        const respectfulSetStub = sinon.stub();
+        stub('gr-storage', {
+          getRespectfulTipVisibility() { return respectfulGetStub(); },
+          setRespectfulTipVisibility() { return respectfulSetStub(); },
+        });
+        respectfulGetStub.returns(null);
+        element = fixture('draft');
+        // fake random
+        element.getRandomNum = () => 0;
+        element.comment = {__editing: true};
+        flush(() => {
+          assert.isTrue(respectfulGetStub.called);
+          assert.isTrue(respectfulSetStub.called);
+          assert.isTrue(
+              !!element.shadowRoot.querySelector('.respectfulReviewTip')
+          );
+          done();
+        });
+      });
+
+      test('add 3 day delays once dismissed', done => {
+        // fake stub for storage
+        const respectfulGetStub = sinon.stub();
+        const respectfulSetStub = sinon.stub();
+        stub('gr-storage', {
+          getRespectfulTipVisibility() { return respectfulGetStub(); },
+          setRespectfulTipVisibility(days) { return respectfulSetStub(days); },
+        });
+        respectfulGetStub.returns(null);
+        element = fixture('draft');
+        // fake random
+        element.getRandomNum = () => 0;
+        element.comment = {__editing: true};
+        flush(() => {
+          assert.isTrue(respectfulGetStub.called);
+          assert.isTrue(respectfulSetStub.called);
+          assert.isTrue(respectfulSetStub.lastCall.args[0] === undefined);
+          assert.isTrue(
+              !!element.shadowRoot.querySelector('.respectfulReviewTip')
+          );
+
+          MockInteractions.tap(element.shadowRoot
+              .querySelector('.respectfulReviewTip .close'));
+          flushAsynchronousOperations();
+          assert.isTrue(respectfulSetStub.lastCall.args[0] === 3);
+          done();
+        });
+      });
+
+      test('do not show tip when fall out of probability', done => {
+        // fake stub for storage
+        const respectfulGetStub = sinon.stub();
+        const respectfulSetStub = sinon.stub();
+        stub('gr-storage', {
+          getRespectfulTipVisibility() { return respectfulGetStub(); },
+          setRespectfulTipVisibility() { return respectfulSetStub(); },
+        });
+        respectfulGetStub.returns(null);
+        element = fixture('draft');
+        // fake random
+        element.getRandomNum = () => 3;
+        element.comment = {__editing: true};
+        flush(() => {
+          assert.isTrue(respectfulGetStub.called);
+          assert.isFalse(respectfulSetStub.called);
+          assert.isFalse(
+              !!element.shadowRoot.querySelector('.respectfulReviewTip')
+          );
+          done();
+        });
+      });
+
+      test('show tip when editing changed to true', done => {
+        // fake stub for storage
+        const respectfulGetStub = sinon.stub();
+        const respectfulSetStub = sinon.stub();
+        stub('gr-storage', {
+          getRespectfulTipVisibility() { return respectfulGetStub(); },
+          setRespectfulTipVisibility() { return respectfulSetStub(); },
+        });
+        respectfulGetStub.returns(null);
+        element = fixture('draft');
+        // fake random
+        element.getRandomNum = () => 0;
+        element.comment = {__editing: false};
+        flush(() => {
+          assert.isFalse(respectfulGetStub.called);
+          assert.isFalse(respectfulSetStub.called);
+          assert.isFalse(
+              !!element.shadowRoot.querySelector('.respectfulReviewTip')
+          );
+
+          element.editing = true;
+          flush(() => {
+            assert.isTrue(respectfulGetStub.called);
+            assert.isTrue(respectfulSetStub.called);
+            assert.isTrue(
+                !!element.shadowRoot.querySelector('.respectfulReviewTip')
+            );
+            done();
+          });
+        });
+      });
+
+      test('no tip when cached record', done => {
+        // fake stub for storage
+        const respectfulGetStub = sinon.stub();
+        const respectfulSetStub = sinon.stub();
+        stub('gr-storage', {
+          getRespectfulTipVisibility() { return respectfulGetStub(); },
+          setRespectfulTipVisibility() { return respectfulSetStub(); },
+        });
+        respectfulGetStub.returns({});
+        element = fixture('draft');
+        // fake random
+        element.getRandomNum = () => 0;
+        element.comment = {__editing: true};
+        flush(() => {
+          assert.isTrue(respectfulGetStub.called);
+          assert.isFalse(respectfulSetStub.called);
+          assert.isFalse(
+              !!element.shadowRoot.querySelector('.respectfulReviewTip')
+          );
+          done();
+        });
+      });
+    });
   });
 </script>
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
index d36ce3b..fb8f5f8 100644
--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
@@ -60,6 +60,8 @@
       <g id="comment"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path d="M0 0h24v24H0z" fill="none"/></g>
       <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
       <g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g>
+      <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
+      <g id="lightbulb-outline"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path></g>
       <!-- This is a custom PolyGerrit SVG -->
       <g id="side-by-side"><path d="M17.1578947,10.8888889 L2.84210526,10.8888889 C2.37894737,10.8888889 2,11.2888889 2,11.7777778 L2,17.1111111 C2,17.6 2.37894737,18 2.84210526,18 L17.1578947,18 C17.6210526,18 18,17.6 18,17.1111111 L18,11.7777778 C18,11.2888889 17.6210526,10.8888889 17.1578947,10.8888889 Z M17.1578947,2 L2.84210526,2 C2.37894737,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.37894737,9.11111111 2.84210526,9.11111111 L17.1578947,9.11111111 C17.6210526,9.11111111 18,8.71111111 18,8.22222222 L18,2.88888889 C18,2.4 17.6210526,2 17.1578947,2 Z M16.1973628,2 L2.78874238,2 C2.35493407,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.35493407,9.11111111 2.78874238,9.11111111 L16.1973628,9.11111111 C16.6311711,9.11111111 16.9861052,8.71111111 16.9861052,8.22222222 L16.9861052,2.88888889 C16.9861052,2.4 16.6311711,2 16.1973628,2 Z" id="Shape" transform="scale(1.2) translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000)"/></g>
       <!-- This is a custom PolyGerrit SVG -->
diff --git a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js
index 53311b5..8cc9de9 100644
--- a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js
+++ b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js
@@ -17,16 +17,17 @@
 (function() {
   'use strict';
 
-  // Date cutoff is one day:
-  const CLEANUP_MAX_AGE = 24 * 60 * 60 * 1000;
+  const DURATION_DAY = 24 * 60 * 60 * 1000;
 
   // Clean up old entries no more frequently than one day.
-  const CLEANUP_THROTTLE_INTERVAL = 24 * 60 * 60 * 1000;
+  const CLEANUP_THROTTLE_INTERVAL = DURATION_DAY;
 
-  const CLEANUP_PREFIXES = [
-    'draft:',
-    'editablecontent:',
-  ];
+  const CLEANUP_PREFIXES_MAX_AGE_MAP = {
+    // respectfultip has a 3 day expiration
+    'respectfultip:': 3 * DURATION_DAY,
+    'draft:': DURATION_DAY,
+    'editablecontent:': DURATION_DAY,
+  };
 
   /** @extends Polymer.Element */
   class GrStorage extends Polymer.GestureEventListeners(
@@ -76,6 +77,19 @@
           {message, updated: Date.now()});
     }
 
+    getRespectfulTipVisibility() {
+      this._cleanupItems();
+      return this._getObject('respectfultip:visibility');
+    }
+
+    setRespectfulTipVisibility(delayDays = 0) {
+      this._cleanupItems();
+      this._setObject(
+          'respectfultip:visibility',
+          {updated: Date.now() + delayDays * DURATION_DAY}
+      );
+    }
+
     eraseEditableContentItem(key) {
       this._storage.removeItem(this._getEditableContentKey(key));
     }
@@ -106,18 +120,17 @@
       this._lastCleanup = Date.now();
 
       let item;
-      for (const key in this._storage) {
-        if (!this._storage.hasOwnProperty(key)) { continue; }
-        for (const prefix of CLEANUP_PREFIXES) {
+      Object.keys(this._storage).forEach(key => {
+        Object.keys(CLEANUP_PREFIXES_MAX_AGE_MAP).forEach(prefix => {
           if (key.startsWith(prefix)) {
             item = this._getObject(key);
-            if (Date.now() - item.updated > CLEANUP_MAX_AGE) {
+            const expiration = CLEANUP_PREFIXES_MAX_AGE_MAP[prefix];
+            if (Date.now() - item.updated > expiration) {
               this._storage.removeItem(key);
             }
-            break;
           }
-        }
-      }
+        });
+      });
     }
 
     _getObject(key) {
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 2c6f679..81e6fdd 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -17,34 +17,13 @@
 <dom-module id="gr-change-list-styles">
   <template>
     <style>
-      gr-change-list-item,
-      tr {
+      gr-change-list-item:not(:first-of-type) {
         border-top: 1px solid var(--border-color);
       }
       gr-change-list-item[selected],
       gr-change-list-item:focus {
         background-color: var(--selection-background-color);
       }
-      /* The border-collapse attribute only works on sibling elements, not
-        cousin elements. So, if we want the table to have a sticky header and
-        have borders between each row, we must disable the border-top on the
-        elements directly below a .topHeader. */
-      .topHeader ~ gr-change-list-item:first-of-type,
-      .topHeader + .groupHeader {
-        border-top: none;
-      }
-      /* Needed to show a border on top of the first gr-change-list-item when a
-        groupHeader exists. Cannot use + selector because of dom-repeats
-        existing in the DOM tree. */
-      .topHeader ~ .groupHeader ~ gr-change-list-item {
-        border-top: 1px solid var(--border-color);
-      }
-      tbody {
-        border-bottom: 1px solid var(--border-color);
-      }
-      tr.topHeader {
-        border: none;
-      }
       th {
         text-align: left;
       }
@@ -59,16 +38,12 @@
       th.label {
         border-left: none;
       }
-      .topHeader,
-      .groupHeader {
-        font-weight: var(--font-weight-bold);
-      }
       .topHeader th {
-        background-color: var(--table-header-background-color);
-        height: 3rem;
+        background-color: var(--background-color-primary);
+        padding: var(--spacing-s) 0;
         position: -webkit-sticky;
         position: sticky;
-        top: -1px; /* Offset for top borders */
+        top: 0;
         z-index: 1;
       }
       /* :after pseudoelements are used here because borders on sticky table
@@ -86,7 +61,14 @@
         top: 0;
       }
       .groupHeader {
-        background-color: var(--table-subheader-background-color);
+        background-color: transparent;
+        font-size: var(--font-size-h3);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h3);
+      }
+      .groupContent {
+        background-color: var(--background-color-primary);
+        box-shadow: var(--elevation-level-1);
       }
       .groupHeader a {
         color: var(--primary-text-color);
@@ -98,6 +80,9 @@
       .cell {
         padding: var(--spacing-s) 0;
       }
+      .groupHeader .cell {
+        padding-top: var(--spacing-l);
+      }
       .star {
         padding: 0;
       }
@@ -199,7 +184,7 @@
         }
         .groupHeader .cell,
         .noChanges .cell {
-          padding: 0 var(--spacing-m);
+          padding-left: var(--spacing-m);
         }
         .subject {
           margin-bottom: var(--spacing-xs);
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index 2b9bdab..590ba33 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -143,9 +143,16 @@
         --paper-toggle-button-checked-button-color: var(--link-color);
       }
       paper-tabs {
+        font-size: var(--font-size-h3);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h3);
+        --paper-font-common-base: {
+          font-family: var(--font-family);
+          -webkit-font-smoothing: initial;
+        };
         --paper-tab-content-focused: {
           /* paper-tabs uses 700 here, which can look awkward */
-          font-weight: var(--font-weight-normal);
+          font-weight: var(--font-weight-bold);
         };
         --paper-tab-content-unselected: {
           /* paper-tabs uses 0.8 here, but we want to control the color directly */
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 02defc0..b1992aa 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -113,8 +113,8 @@
   --spacing-xxl: 24px;
 
   /* header and footer */
-  --footer-background-color: var(--background-color-tertiary);
-  --footer-border-top: 1px solid var(--border-color);
+  --footer-background-color: transparent;
+  --footer-border-top: none;
   --header-background-color: var(--background-color-tertiary);
   --header-border-bottom: 1px solid var(--border-color);
   --header-border-image: '';