diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index 6e9db23dda7..71469d3dfa8 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -88,9 +88,9 @@ const styles = StyleSheet.create({
     boxShadow: globalStyles.button.default.boxShadow,
     cursor: 'pointer',
     width: 'auto',
-    height: 'auto',
 
     // TODO: #9223
+    height: '32px', // 32px == 1rem * 2
     fontSize: globalStyles.spacing.defaultFontSize,
     lineHeight: 1.25,
 
@@ -163,11 +163,8 @@ const styles = StyleSheet.create({
   },
 
   browserButton_notificationItem: {
-    fontSize: '13px',
-    marginRight: '10px',
-    padding: '2px 15px',
     textTransform: 'capitalize',
-    width: 'auto'
+    height: '28px'
   },
 
   browserButton_subtleItem: {
diff --git a/app/renderer/components/main/notificationBar.js b/app/renderer/components/main/notificationBar.js
index 93e49d43390..979de732847 100644
--- a/app/renderer/components/main/notificationBar.js
+++ b/app/renderer/components/main/notificationBar.js
@@ -83,7 +83,7 @@ class NotificationItem extends ImmutableComponent {
           }
           {
             this.props.detail.get('buttons').map((button) =>
-              <BrowserButton notificationItem secondaryColor
+              <BrowserButton secondaryColor notificationItem groupedItem
                 iconClass={button.get('className')}
                 testId='notificationButton'
                 label={button.get('text')}
diff --git a/js/about/styles.js b/js/about/styles.js
index 58491d03ee2..0edb83eabaa 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -270,13 +270,17 @@ class AboutStyle extends ImmutableComponent {
 
         <BrowserButton primaryColor l10nId='primaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton primaryColor l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+        </Code></Pre>
+
+        <BrowserButton secondaryColor l10nId='secondaryColor' onClick={this.onRemoveBookmark} />
+        <Pre><Code>
+          &lt;BrowserButton secondaryColor l10nId='secondaryColor' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <BrowserButton actionItem l10nId='actionButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton actionItem l10nId='done'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton actionItem l10nId='done' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <BrowserButton subtleItem l10nId='subtleButton' onClick={this.onRemoveBookmark} />
@@ -284,9 +288,9 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton subtleItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
-        <BrowserButton secondaryColor groupedItem l10nId='whiteButton' onClick={this.onRemoveBookmark} />
-        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryColor' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor groupedItem l10nId='secondaryColor' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
           &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
           &lt;BrowserButton secondaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
@@ -298,9 +302,11 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton extensionItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <BrowserButton notificationItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor notificationItem groupedItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor notificationItem groupedItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton notificationItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton secondaryColor notificationItem groupedItem l10nId='Yes' onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;BrowserButton secondaryColor notificationItem groupedItem l10nId='No' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <GoTop />
@@ -694,15 +700,18 @@ const styles = StyleSheet.create({
 
   wrapper: common,
   container: common,
+
   pre: {
     background: '#1d1f21',
-    color: '#FFFFFF',
+    color: '#fff',
     fontSize: '14px',
-    padding: '5px',
+    padding: '1rem',
     borderRadius: globalStyles.radius.borderRadius,
     tabSize: '2',
-    wordBreak: 'normal'
+    wordBreak: 'normal',
+    overflowX: 'scroll'
   },
+
   code: {
     fontFamily: 'monospace',
     whiteSpace: 'pre'