diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 73938b51144..f9582c3d228 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     display: 'block',
     color: globalStyles.color.darkGray,
-    fontSize: '14.5px',
+    fontSize: globalStyles.spacing.textAreaFontSize,
     height: '2.25em',
     outline: 'none',
     padding: '0.4em',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index f36dda17b32..025d105af05 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -72,6 +72,7 @@ const globalStyles = {
     defaultSpacing: '12px',
     defaultFontSize: '13px',
     contextMenuFontSize: '14px',
+    textAreaFontSize: '14.5px',
     dragSpacing: '50px',
     switchHeight: '16px',
     switchWidth: '45px',
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index fd8a95955d6..0e88a86ae99 100644
--- a/app/renderer/components/textbox.js
+++ b/app/renderer/components/textbox.js
@@ -8,6 +8,7 @@ const {StyleSheet, css} = require('aphrodite')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
+// Textbox
 class Textbox extends ImmutableComponent {
   render () {
     const className = css(
@@ -40,7 +41,26 @@ class RecoveryKeyTextbox extends ImmutableComponent {
   }
 }
 
+// TextArea
+class TextArea extends ImmutableComponent {
+  render () {
+    const className = css(
+      styles.textArea,
+      this.props['data-isAboutAdblock'] && styles.isAboutAdblock
+    )
+
+    return <textarea className={className} {...this.props} />
+  }
+}
+
+class AboutAdblockTextArea extends ImmutableComponent {
+  render () {
+    return <TextArea data-isAboutAdblock='true' {...this.props} />
+  }
+}
+
 const styles = StyleSheet.create({
+  // Textbox
   'textbox': {
     boxSizing: 'border-box',
     width: 'auto'
@@ -63,6 +83,14 @@ const styles = StyleSheet.create({
   },
   'recoveryKeys': {
     marginBottom: '20px'
+  },
+
+  // TextArea
+  'textArea': {
+    padding: '5px'
+  },
+  'isAboutAdblock': {
+    fontSize: globalStyles.spacing.textAreaFontSize  // Issue #6851
   }
 })
 
@@ -70,5 +98,7 @@ module.exports = {
   Textbox,
   FormTextbox,
   SettingTextbox,
-  RecoveryKeyTextbox
+  RecoveryKeyTextbox,
+  TextArea,
+  AboutAdblockTextArea
 }
diff --git a/js/about/adblock.js b/js/about/adblock.js
index 5217138528d..b3c709d4994 100644
--- a/js/about/adblock.js
+++ b/js/about/adblock.js
@@ -11,6 +11,7 @@ const getSetting = require('../settings').getSetting
 const aboutActions = require('./aboutActions')
 const ImmutableComponent = require('../components/immutableComponent')
 const SwitchControl = require('../components/switchControl')
+const {AboutAdblockTextArea} = require('../../app/renderer/components/textbox')
 
 const ipc = window.chrome.ipcRenderer
 
@@ -90,10 +91,10 @@ class AboutAdBlock extends React.Component {
             </div>
             <h3 data-l10n-id='customFilters' />
             <div className='adblockSubtext' data-l10n-id='customFilterDescription' />
-            <textarea
+            <AboutAdblockTextArea
               onChange={this.onChangeCustomFilters}
               value={getSetting(ADBLOCK_CUSTOM_RULES, this.state.settings) || ''}
-              className='customFiltersInput'
+              data-test-id='customFiltersInput'
               cols='100'
               rows='10'
               spellCheck='false' />
diff --git a/js/about/styles.js b/js/about/styles.js
index 8b30ca95117..89e47810480 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -11,6 +11,7 @@ require('../../less/button.less')
 require('../../less/forms.less')
 
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox')
+const {TextArea, AboutAdblockTextArea} = require('../../app/renderer/components/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown')
 
 class AboutStyle extends ImmutableComponent {
@@ -67,6 +68,24 @@ class AboutStyle extends ImmutableComponent {
         </code></pre>
       </div>
 
+      <div className='container'>
+        <h2>Plain textarea</h2>
+        <TextArea placeholder='TextArea' />
+        <pre><code>
+          const { '{TextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;TextArea />
+        </code></pre>
+      </div>
+
+      <div className='container'>
+        <h2>Textarea used on <code>about:adblock</code></h2>
+        <AboutAdblockTextArea placeholder='AboutAdblockTextArea' />
+        <pre><code>
+          const { '{AboutAdblockTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;AboutAdblockTextArea />
+        </code></pre>
+      </div>
+
       <hr />
 
       <h1 data-l10n-id='dropdowns' />
diff --git a/less/about/adblock.less b/less/about/adblock.less
index 8e50e236eca..82a1c20994b 100644
--- a/less/about/adblock.less
+++ b/less/about/adblock.less
@@ -18,6 +18,10 @@
     -webkit-user-select: text;
   }
 
+  .adblockDetailsPageContent {
+    margin-bottom: 10px;
+  }
+
   .adblockLists {
     margin-top: 10px;
   }
@@ -26,13 +30,9 @@
     margin-left: 15px;
   }
 
-  .customFiltersInput {
-    margin: 10px 0;
-    padding: 5px;
-  }
-
   .adblockSubtext {
     font-size: smaller;
     font-weight: bold;
+    margin-bottom: 10px;
   }
 }
diff --git a/test/components/braveryPanelTest.js b/test/components/braveryPanelTest.js
index 35544a6016c..ebee8585f2a 100644
--- a/test/components/braveryPanelTest.js
+++ b/test/components/braveryPanelTest.js
@@ -2,7 +2,7 @@
 
 const Brave = require('../lib/brave')
 const messages = require('../../js/constants/messages')
-const {urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, fpStat, noScriptNavButton} = require('../lib/selectors')
+const {urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, fpStat, noScriptNavButton, customFiltersInput} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 
 describe('Bravery Panel', function () {
@@ -205,8 +205,8 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(aboutAdblockURL)
         .url(aboutAdblockURL)
-        .waitForVisible('.customFiltersInput')
-        .setValue('.customFiltersInput', 'testblock.brave.com')
+        .waitForVisible(customFiltersInput)
+        .setValue(customFiltersInput, 'testblock.brave.com')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -239,8 +239,8 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(aboutAdblockURL)
         .url(aboutAdblockURL)
-        .waitForVisible('.customFiltersInput')
-        .setValue('.customFiltersInput', 'testblock.brave.com')
+        .waitForVisible(customFiltersInput)
+        .setValue(customFiltersInput, 'testblock.brave.com')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 76220487d36..38d27359f43 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -94,5 +94,6 @@ module.exports = {
   tabsToolbar: '.tabsToolbar',
   hamburgerMenu: '.menuButton',
   contextMenu: '.contextMenu',
-  okButton: '[data-l10n-id="ok"]'
+  okButton: '[data-l10n-id="ok"]',
+  customFiltersInput: '[data-test-id="customFiltersInput"]'
 }