diff --git a/web/rv-edit-screen.ts b/web/rv-edit-screen.ts
index c75cafb..e8f32a1 100644
--- a/web/rv-edit-screen.ts
+++ b/web/rv-edit-screen.ts
@@ -16,7 +16,8 @@
  */
 import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
 import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
-import {css, html, LitElement} from 'lit';
+import '@gerritcodereview/typescript-api/gerrit';
+import {css, CSSResult, html, LitElement} from 'lit';
 import {customElement, property, state} from 'lit/decorators';
 import './rv-filter-section';
 import {Section} from './rv-filter-section';
@@ -54,7 +55,12 @@
 
   static override get styles() {
     return [
+      window.Gerrit.styles.font as CSSResult,
       css`
+        h3 {
+          margin: 0;
+          padding: 0 0 var(--spacing-xl) 0;
+        }
         :host {
           padding: var(--spacing-xl);
           display: block;
@@ -64,7 +70,7 @@
           justify-content: flex-end;
         }
         gr-button {
-          margin-left: var(--spacing-m);
+          margin-left: var(--spacing-l);
         }
         #filterSections {
           width: 100%;
@@ -89,13 +95,14 @@
         </table>
         <div class="bottomButtons">
           <gr-button
+            link
             id="addFilterBtn"
             @click="${this.handleCreateSection}"
             ?hidden="${!this.canModifyConfig || this.editingFilter}"
           >
             Add New Filter
           </gr-button>
-          <gr-button id="closeButton" @click="${this.handleCloseTap}">
+          <gr-button link id="closeButton" @click="${this.handleCloseTap}">
             Close
           </gr-button>
         </div>
diff --git a/web/rv-filter-section.ts b/web/rv-filter-section.ts
index 4162df2..c903f5e 100644
--- a/web/rv-filter-section.ts
+++ b/web/rv-filter-section.ts
@@ -14,10 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement, nothing} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators';
 import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
 import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
+import '@gerritcodereview/typescript-api/gerrit';
 import './rv-reviewer';
 import {
   ReviewerAddedEventDetail,
@@ -88,6 +89,7 @@
 
   static override get styles() {
     return [
+      window.Gerrit.styles.font as CSSResult,
       css`
         :host {
           display: block;
@@ -125,49 +127,61 @@
   override render() {
     return html`
       <div id="container">
-        <div id="filter">
-          <span class="heading-3">Filter</span>
-          <input
-            id="filterInput"
-            value="${this.filter}"
-            @input="${this.onFilterInput}"
-            ?disabled="${!this.canModifyConfig || this.originalFilter !== ''}"
-          />
-          <gr-button
-            @click="${() => this.remove()}"
-            ?hidden="${this.originalFilter !== '' && this.filter !== ''}"
-          >
-            Cancel
-          </gr-button>
-        </div>
+        ${this.renderFilter()}
         <div>
           ${this.reviewers.map(item =>
             this.renderReviewer(item, Type.REVIEWER)
           )}
           ${this.ccs.map(item => this.renderReviewer(item, Type.CC))}
-          <div id="addReviewer">
-            <gr-button
-              link
-              @click="${this.handleAddReviewer}"
-              ?disabled="${this.filter === ''}"
-              ?hidden="${!this.canModifyConfig || this.editingReviewer}"
-            >
-              Add Reviewer
-            </gr-button>
-            <gr-button
-              link
-              @click="${this.handleAddCc}"
-              ?disabled="${this.filter === ''}"
-              ?hidden="${!this.canModifyConfig || this.editingReviewer}"
-            >
-              Add CC
-            </gr-button>
-          </div>
+          ${this.renderAddReviewer()}
         </div>
       </div>
     `;
   }
 
+  private renderFilter() {
+    return html`
+      <div id="filter">
+        <span class="heading-3">Filter</span>
+        <input
+          id="filterInput"
+          value="${this.filter}"
+          @input="${this.onFilterInput}"
+          ?disabled="${!this.canModifyConfig || this.originalFilter !== ''}"
+        />
+        <gr-button
+          @click="${() => this.remove()}"
+          ?hidden="${this.originalFilter !== '' && this.filter !== ''}"
+        >
+          Cancel
+        </gr-button>
+      </div>
+    `;
+  }
+
+  private renderAddReviewer() {
+    if (!this.canModifyConfig) return nothing;
+    if (this.editingReviewer) return nothing;
+    return html`
+      <div id="addReviewer">
+        <gr-button
+          link
+          @click="${this.handleAddReviewer}"
+          ?disabled="${this.filter === ''}"
+        >
+          Add Reviewer
+        </gr-button>
+        <gr-button
+          link
+          @click="${this.handleAddCc}"
+          ?disabled="${this.filter === ''}"
+        >
+          Add CC
+        </gr-button>
+      </div>
+    `;
+  }
+
   private renderReviewer(reviewer: string, type: Type) {
     return html`
       <rv-reviewer
diff --git a/web/rv-reviewer.ts b/web/rv-reviewer.ts
index 9ac7424..4f5b7b9 100644
--- a/web/rv-reviewer.ts
+++ b/web/rv-reviewer.ts
@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 import {customElement, property, state} from 'lit/decorators';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
 import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
+import '@gerritcodereview/typescript-api/gerrit';
 import {
   AccountInfo,
   GroupInfo,
@@ -118,6 +119,7 @@
 
   static override get styles() {
     return [
+      window.Gerrit.styles.font as CSSResult,
       css`
         :host {
           display: block;
diff --git a/web/rv-reviewers.ts b/web/rv-reviewers.ts
index bf7bf08..9e77037 100644
--- a/web/rv-reviewers.ts
+++ b/web/rv-reviewers.ts
@@ -17,8 +17,9 @@
 import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
 import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
 import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
+import '@gerritcodereview/typescript-api/gerrit';
 import {customElement, property, query, state} from 'lit/decorators';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
 import './rv-edit-screen';
 
 // TODO: This should be defined and exposed by @gerritcodereview/typescript-api
@@ -68,6 +69,7 @@
 
   static override get styles() {
     return [
+      window.Gerrit.styles.font as CSSResult,
       css`
         :host {
           display: block;
@@ -77,16 +79,32 @@
           width: 50em;
           overflow: auto;
         }
+        h2 {
+          margin-top: var(--spacing-xxl);
+          margin-bottom: var(--spacing-s);
+        }
+        p {
+          padding: var(--spacing-m) 0;
+          margin: 0;
+        }
       `,
     ];
   }
 
   override render() {
     return html`
-      <h3 class="heading-3">Reviewers Config</h3>
-      <gr-button @click="${() => this.rvScreenOverlay?.open()}">
-        Reviewers Config
-      </gr-button>
+      <h2 class="heading-2">Edit reviewers config</h2>
+      <div>
+        <p>
+          Allows you to define rules for when specific groups or accounts should
+          automatically be added as reviewers or CC to a change.
+        </p>
+      </div>
+      <div>
+        <gr-button @click="${() => this.rvScreenOverlay?.open()}">
+          Edit Reviewers Config
+        </gr-button>
+      </div>
       <gr-overlay id="rvScreenOverlay" with-backdrop>
         <rv-edit-screen
           .pluginRestApi="${this.pluginRestApi}"