diff --git a/app/brave_generated_resources.grd b/app/brave_generated_resources.grd
index 5b321ba28c8..4424e021885 100644
--- a/app/brave_generated_resources.grd
+++ b/app/brave_generated_resources.grd
@@ -353,8 +353,14 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
       <message name="IDS_SETTINGS_BRAVE_SHIELDS_NO_SCRIPT_CONTROL_LABEL" desc="Default Brave script blocking control setting label">
         Block scripts
       </message>
-      <message name="IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGINS_LABEL" desc="Label for a switch control which allows Google logins">
-        Allow Google logins
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_LOOK_AND_FEEL_TITLE" desc="The title the settings section with interface options such as showing the resources blocked badge">
+        Look &amp; Feel
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_SHOW_STATS_BLOCKED_BADGE_LABEL" desc="Default Brave show stats blocked badge control setting label">
+        Show the number of blocked items on the Shields icon
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGIN_LABEL" desc="Label for a switch control which allows Google social buttons to be enabled/disabled">
+        Allow Google login buttons on third party sites
       </message>
       <message name="IDS_SETTINGS_BRAVE_SHIELDS_FACEBOOK_EMBEDDED_POSTS_LABEL" desc="Label for a switch control which allows Facebook embedded posts">
         Allow Facebook logins and embedded posts
diff --git a/browser/brave_profile_prefs.cc b/browser/brave_profile_prefs.cc
index 692cfc0ef10..04046123a15 100644
--- a/browser/brave_profile_prefs.cc
+++ b/browser/brave_profile_prefs.cc
@@ -117,8 +117,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
 
   registry->RegisterBooleanPref(kShieldsAdvancedViewEnabled,
                                 is_new_user == false);
-
-  // Google-oauth should work by default
+  registry->RegisterBooleanPref(kShieldsStatsBadgeVisible, true);
   registry->RegisterBooleanPref(kGoogleLoginControlType, true);
   registry->RegisterBooleanPref(kFBEmbedControlType, true);
   registry->RegisterBooleanPref(kTwitterEmbedControlType, true);
diff --git a/browser/brave_profile_prefs_browsertest.cc b/browser/brave_profile_prefs_browsertest.cc
index d515ae5340d..f970f5eb3f3 100644
--- a/browser/brave_profile_prefs_browsertest.cc
+++ b/browser/brave_profile_prefs_browsertest.cc
@@ -39,6 +39,9 @@ IN_PROC_BROWSER_TEST_F(BraveProfilePrefsBrowserTest, MiscBravePrefs) {
       kHTTPSEVerywhereControlType));
   EXPECT_FALSE(
       browser()->profile()->GetPrefs()->GetBoolean(kNoScriptControlType));
+  EXPECT_TRUE(
+      browser()->profile()->GetPrefs()->GetBoolean(
+        kShieldsStatsBadgeVisible));
   EXPECT_TRUE(
       browser()->profile()->GetPrefs()->GetBoolean(kAdControlType));
   EXPECT_TRUE(
diff --git a/browser/extensions/api/settings_private/brave_prefs_util.cc b/browser/extensions/api/settings_private/brave_prefs_util.cc
index b4485a3375f..9a70dbedcf6 100644
--- a/browser/extensions/api/settings_private/brave_prefs_util.cc
+++ b/browser/extensions/api/settings_private/brave_prefs_util.cc
@@ -47,6 +47,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetWhitelistedKeys() {
   // Default Brave shields
   (*s_brave_whitelist)[kShieldsAdvancedViewEnabled] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
+  (*s_brave_whitelist)[kShieldsStatsBadgeVisible] =
+      settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kAdControlType] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kHTTPSEVerywhereControlType] =
diff --git a/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html b/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
index 35ce0c6e9b8..000a3ee117a 100644
--- a/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
+++ b/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
@@ -129,6 +129,13 @@
         </template>
       </select>
     </div>
+    <div class="settings-box">
+      <div class="label shields-primary-title">$i18n{shieldsLookFeelTitle}</div>
+    </div>
+    <settings-toggle-button
+        class="continuation"
+        pref="{{prefs.brave.shields.stats_badge_visible}}"
+        label="$i18n{showStatsBlockedBadgeLabel}">
   </template>
   <script src="default_brave_shields_page.js"></script>
 </dom-module>
diff --git a/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc b/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc
index 4585a5e74c0..ad783761a35 100644
--- a/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc
+++ b/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc
@@ -99,9 +99,13 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
       IDS_SETTINGS_BRAVE_SHIELDS_HTTPS_EVERYWHERE_CONTROL_LABEL},
     {"noScriptControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_NO_SCRIPT_CONTROL_LABEL},
-   {"googleLoginControlLabel",
-      IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGINS_LABEL},
-   {"fbEmbedControlLabel",
+    {"shieldsLookFeelTitle",
+      IDS_SETTINGS_BRAVE_SHIELDS_LOOK_AND_FEEL_TITLE},
+    {"showStatsBlockedBadgeLabel",
+      IDS_SETTINGS_BRAVE_SHIELDS_SHOW_STATS_BLOCKED_BADGE_LABEL},
+    {"googleLoginControlLabel",
+      IDS_SETTINGS_BRAVE_SHIELDS_GOOGLE_LOGIN_LABEL},
+    {"fbEmbedControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_FACEBOOK_EMBEDDED_POSTS_LABEL},
     {"twitterEmbedControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_TWITTER_EMBEDDED_TWEETS_LABEL},
diff --git a/common/pref_names.cc b/common/pref_names.cc
index 9f0a1a5a056..4a187f261f9 100644
--- a/common/pref_names.cc
+++ b/common/pref_names.cc
@@ -47,6 +47,8 @@ const char kHTTPSEVerywhereControlType[] = "brave.https_everywhere_default";
 const char kNoScriptControlType[] = "brave.no_script_default";
 const char kShieldsAdvancedViewEnabled[] =
     "brave.shields.advanced_view_enabled";
+const char kShieldsStatsBadgeVisible[] =
+    "brave.shields.stats_badge_visible";
 const char kAdControlType[] = "brave.ad_default";
 const char kGoogleLoginControlType[] = "brave.google_login_default";
 const char kFBEmbedControlType[] = "brave.fb_embed_default";
diff --git a/common/pref_names.h b/common/pref_names.h
index 7188e2725c3..1d1414a8760 100644
--- a/common/pref_names.h
+++ b/common/pref_names.h
@@ -40,6 +40,7 @@ extern const char kReferralAndroidFirstRunTimestamp[];
 extern const char kHTTPSEVerywhereControlType[];
 extern const char kNoScriptControlType[];
 extern const char kShieldsAdvancedViewEnabled[];
+extern const char kShieldsStatsBadgeVisible[];
 extern const char kAdControlType[];
 extern const char kGoogleLoginControlType[];
 extern const char kFBEmbedControlType[];
diff --git a/components/brave_extension/extension/brave_extension/actions/settingsActions.ts b/components/brave_extension/extension/brave_extension/actions/settingsActions.ts
new file mode 100644
index 00000000000..1201eee5fea
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/actions/settingsActions.ts
@@ -0,0 +1,58 @@
+/* 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/. */
+
+// Types
+import * as types from '../constants/settingsTypes'
+import * as actions from '../types/actions/settingsActions'
+import { SettingsOptions, GeneratedSettingsKey, SettingsData } from '../types/other/settingsTypes'
+
+// Helpers
+import * as shieldsAPI from '../background/api/shieldsAPI'
+import * as settingsUtils from '../helpers/settingsUtils'
+import { areObjectsEqual } from '../helpers/objectUtils'
+import { Dispatch } from 'redux'
+import { State } from '../types/state/mainState'
+/**
+ * Inform the store that settings have changed. This action is used only
+ * for storing values in Redux and does not tell which brave settings have changed.
+ */
+export const setStoreSettingsChange: actions.SetStoreSettingsChange = (settingsData) => {
+  return {
+    type: types.SET_STORE_SETTINGS_CHANGE,
+    settingsData
+  }
+}
+
+/**
+ * Perform an update in settings both in brave://settings and Shields store whenever a setting change.
+ * This action is bounded to the settings listener and should not be used outside this scope.
+ */
+export const settingsDidChange: actions.SettingsDidChange = (settings) => {
+  const settingsOptions: SettingsOptions = settingsUtils.settingsOptions
+  const currentSetting: Partial<GeneratedSettingsKey> = settingsOptions[settings.key]
+  return setStoreSettingsChange({ [currentSetting]: settings.value })
+}
+
+/**
+ * Get a list of settings values from brave://settings and update if comparison
+ * against settings values from store deosn't match.
+ */
+interface FetchAndDispatchSettings {
+  (): (dispatch: Dispatch, getState: () => State) => void
+}
+
+export const fetchAndDispatchSettings: FetchAndDispatchSettings = () => {
+  return (dispatch, getState) => {
+    const settingsDataFromStore: SettingsData = getState().shieldsPanel.settingsData
+    shieldsAPI.getViewPreferences()
+      .then(
+        (settingsData: SettingsData) => {
+          if (!areObjectsEqual(settingsDataFromStore, settingsData)) {
+            dispatch(setStoreSettingsChange(settingsData))
+          }
+        },
+        error => console.error('[Shields] error updating settings data', error)
+      )
+  }
+}
diff --git a/components/brave_extension/extension/brave_extension/background/actions.js b/components/brave_extension/extension/brave_extension/background/actions.js
index 38071300448..b9f0b05a5ec 100644
--- a/components/brave_extension/extension/brave_extension/background/actions.js
+++ b/components/brave_extension/extension/brave_extension/background/actions.js
@@ -7,3 +7,4 @@ require('./actions/webNavigationActions')
 require('./actions/runtimeActions')
 require('./actions/tabActions')
 require('./actions/windowActions')
+require('./actions/settingsActions')
diff --git a/components/brave_extension/extension/brave_extension/background/actions/settingsActions.ts b/components/brave_extension/extension/brave_extension/background/actions/settingsActions.ts
new file mode 100644
index 00000000000..ba905a87462
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/background/actions/settingsActions.ts
@@ -0,0 +1,8 @@
+/* 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/. */
+
+import { bindActionCreators } from 'redux'
+import store from '../store'
+import * as settingsActions from '../../actions/settingsActions'
+export default bindActionCreators(settingsActions, store.dispatch)
diff --git a/components/brave_extension/extension/brave_extension/background/api.ts b/components/brave_extension/extension/brave_extension/background/api.ts
index ede80094de1..ddf1d2c2d92 100644
--- a/components/brave_extension/extension/brave_extension/background/api.ts
+++ b/components/brave_extension/extension/brave_extension/background/api.ts
@@ -7,3 +7,4 @@ require('./api/cosmeticFilterAPI')
 require('./api/localeAPI')
 require('./api/shieldsAPI')
 require('./api/tabsAPI')
+require('./api/storageAPI')
diff --git a/components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts b/components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts
index 22499e17e1f..4f02417ee22 100644
--- a/components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts
+++ b/components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts
@@ -175,23 +175,33 @@ export const reportBrokenSite = (tabId: number) =>
 
 export type GetViewPreferencesData = {
   showAdvancedView: boolean
+  statsBadgeVisible: boolean
 }
 
 const settingsKeys = {
-  showAdvancedView: { key: 'brave.shields.advanced_view_enabled', type: chrome.settingsPrivate.PrefType.BOOLEAN }
+  showAdvancedView: { key: 'brave.shields.advanced_view_enabled', type: chrome.settingsPrivate.PrefType.BOOLEAN },
+  statsBadgeVisible: { key: 'brave.shields.stats_badge_visible', type: chrome.settingsPrivate.PrefType.BOOLEAN }
 }
 export async function getViewPreferences (): Promise<GetViewPreferencesData> {
-  const showAdvancedViewPref = await SettingsPrivate.getPreference(settingsKeys.showAdvancedView.key)
-  if (showAdvancedViewPref.type !== settingsKeys.showAdvancedView.type) {
-    throw new Error(`Unexpected settings type received for "${settingsKeys.showAdvancedView.key}". Expected: ${settingsKeys.showAdvancedView.type}, Received: ${showAdvancedViewPref.type}`)
-  }
-  return {
-    showAdvancedView: showAdvancedViewPref.value
-  }
+  let newSettings = {} as GetViewPreferencesData
+  await Promise.all(
+    Object.keys(settingsKeys).map(async (name) => {
+      // Get setting by internal key
+      const pref = await SettingsPrivate.getPreference(settingsKeys[name].key)
+      // Validate setting type
+      if (pref.type !== settingsKeys[name].type) {
+        throw new Error(`Unexpected settings type received for "${settingsKeys[name].key}". Expected: ${settingsKeys[name].type}, Received: ${pref.type}`)
+      }
+      // Valid
+      newSettings[name] = pref.value
+    })
+  )
+  return newSettings
 }
 
 export type SetViewPreferencesData = {
   showAdvancedView?: boolean
+  statsBadgeVisible?: boolean
 }
 export async function setViewPreferences (preferences: SetViewPreferencesData): Promise<void> {
   const setOps = []
@@ -200,6 +210,11 @@ export async function setViewPreferences (preferences: SetViewPreferencesData):
       SettingsPrivate.setPreference(settingsKeys.showAdvancedView.key, preferences.showAdvancedView)
     )
   }
+  if (preferences.statsBadgeVisible !== undefined) {
+    setOps.push(
+      SettingsPrivate.setPreference(settingsKeys.statsBadgeVisible.key, preferences.statsBadgeVisible)
+    )
+  }
   await Promise.all(setOps)
 }
 
diff --git a/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts b/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
index 5821814ba8b..8aa63e52794 100644
--- a/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
+++ b/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
@@ -2,11 +2,19 @@
  * 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/. */
 
-import { debounce } from '../../../../../common/debounce'
+// Types
 import * as Shields from '../../types/state/shieldsPannelState'
+import { SettingsData } from '../../types/other/settingsTypes'
 
+// Helpers
+import { debounce } from '../../../../../common/debounce'
 const keyName = 'shields-persistent-data'
 
+export const initialSettingsData: SettingsData = {
+  showAdvancedView: false,
+  statsBadgeVisible: true
+}
+
 export const defaultPersistentData: Shields.PersistentData = {
   isFirstAccess: true
 }
diff --git a/components/brave_extension/extension/brave_extension/background/events.ts b/components/brave_extension/extension/brave_extension/background/events.ts
index 203e21c08ec..ca4fde5abb4 100644
--- a/components/brave_extension/extension/brave_extension/background/events.ts
+++ b/components/brave_extension/extension/brave_extension/background/events.ts
@@ -8,6 +8,7 @@ require('./events/shieldsEvents')
 require('./events/runtimeEvents')
 require('./events/webNavigationEvents')
 require('./events/cosmeticFilterEvents')
+require('./events/settingsEvents')
 // Only do detection events if the wallet API is available
 if (chrome.braveWallet) {
   require('./events/dappDetectionEvents')
diff --git a/components/brave_extension/extension/brave_extension/background/events/settingsEvents.ts b/components/brave_extension/extension/brave_extension/background/events/settingsEvents.ts
new file mode 100644
index 00000000000..9e843e3d6e3
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/background/events/settingsEvents.ts
@@ -0,0 +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/. */
+
+import settingsActions from '../actions/settingsActions'
+import { settingsKeyList } from '../../helpers/settingsUtils'
+import { SettingsKey } from '../../types/other/settingsTypes'
+
+chrome.settingsPrivate.onPrefsChanged.addListener(function (settings) {
+  const settingsKey = settings[0].key as SettingsKey
+  // only call the store update if the settings change is something we care about
+  if (settingsKeyList.includes(settingsKey)) {
+    settingsActions.settingsDidChange(settings[0])
+  }
+})
diff --git a/components/brave_extension/extension/brave_extension/background/events/webNavigationEvents.ts b/components/brave_extension/extension/brave_extension/background/events/webNavigationEvents.ts
index 1ad61327678..068a401ebcd 100644
--- a/components/brave_extension/extension/brave_extension/background/events/webNavigationEvents.ts
+++ b/components/brave_extension/extension/brave_extension/background/events/webNavigationEvents.ts
@@ -2,14 +2,24 @@
  * 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/. */
 
+// Actions
 import actions from '../actions/webNavigationActions'
+import settingsActions from '../actions/settingsActions'
 
 chrome.webNavigation.onBeforeNavigate.addListener(function ({ tabId, url, frameId }: chrome.webNavigation.WebNavigationParentedCallbackDetails) {
   const isMainFrame: boolean = frameId === 0
   actions.onBeforeNavigate(tabId, url, isMainFrame)
 })
 
+let shouldRequestSettingsData = true
 chrome.webNavigation.onCommitted.addListener(function ({ tabId, url, frameId }: chrome.webNavigation.WebNavigationTransitionCallbackDetails) {
   const isMainFrame: boolean = frameId === 0
   actions.onCommitted(tabId, url, isMainFrame)
+  if (shouldRequestSettingsData) {
+    // check whether or not the settings store should update based on settings changes.
+    // this action is needed in the onCommitted phase for edge cases such as when after Brave is re-launched
+    settingsActions.fetchAndDispatchSettings()
+    // this request only needs to perform once
+    shouldRequestSettingsData = false
+  }
 })
diff --git a/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts b/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
index cc078dc0c18..b4d3cee46d2 100644
--- a/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
+++ b/components/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
@@ -9,9 +9,11 @@ import * as storageAPI from '../api/storageAPI'
 import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
 import * as windowTypes from '../../constants/windowTypes'
 import * as tabTypes from '../../constants/tabTypes'
+import * as settingsTypes from '../../constants/settingsTypes'
 import * as webNavigationTypes from '../../constants/webNavigationTypes'
 import { State, PersistentData } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
+import { SettingsData } from '../../types/other/settingsTypes'
 
 // State helpers
 import * as shieldsPanelState from '../../state/shieldsPanelState'
@@ -28,9 +30,9 @@ import {
   setAllowCookies,
   toggleShieldsValue,
   requestShieldPanelData,
-  setAllowScriptOriginsOnce,
   onShieldsPanelShown,
-  reportBrokenSite
+  reportBrokenSite,
+  setAllowScriptOriginsOnce
 } from '../api/shieldsAPI'
 import { reloadTab } from '../api/tabsAPI'
 import {
@@ -47,6 +49,7 @@ import { getHostname } from '../../helpers/urlUtils'
 export default function shieldsPanelReducer (
   state: State = {
     persistentData: storageAPI.loadPersistentData(),
+    settingsData: storageAPI.initialSettingsData,
     tabs: {},
     windows: {},
     currentWindowId: -1
@@ -299,6 +302,11 @@ export default function shieldsPanelReducer (
         })
       break
     }
+    case settingsTypes.SET_STORE_SETTINGS_CHANGE: {
+      const settingsData: Partial<SettingsData> = action.settingsData
+      state = { ...state, settingsData: { ...state.settingsData, ...settingsData } }
+      break
+    }
     // NoScriptInfo is the name we call for the list of scripts that are either
     // blocked or allowed by the user. Each script have three properties:
     // ....................................................................................
diff --git a/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx b/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx
index 3712c3568b9..0ae280f008d 100644
--- a/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx
+++ b/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx
@@ -45,7 +45,7 @@ Promise.all([
     mountNode
   )
 })
-.catch((e) => {
+.catch((error: any) => {
   console.error('Problem mounting brave shields')
-  console.error(e)
+  console.error(error)
 })
diff --git a/components/brave_extension/extension/brave_extension/constants/settingsTypes.ts b/components/brave_extension/extension/brave_extension/constants/settingsTypes.ts
new file mode 100644
index 00000000000..9f123181c03
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/constants/settingsTypes.ts
@@ -0,0 +1,5 @@
+/* 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/. */
+
+export const SET_STORE_SETTINGS_CHANGE = 'SET_STORE_SETTINGS_CHANGE'
diff --git a/components/brave_extension/extension/brave_extension/containers/app.tsx b/components/brave_extension/extension/brave_extension/containers/app.tsx
index 27129b849db..6f06457b028 100644
--- a/components/brave_extension/extension/brave_extension/containers/app.tsx
+++ b/components/brave_extension/extension/brave_extension/containers/app.tsx
@@ -5,6 +5,7 @@
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as shieldsPanelActions from '../actions/shieldsPanelActions'
+import * as settingsActions from '../actions/settingsActions'
 import * as shieldsPanelState from '../state/shieldsPanelState'
 import BraveShields from '../containers/braveShields'
 import { State } from '../types/state/mainState'
@@ -18,12 +19,16 @@ const mapStateToProps = (
   return ({
     shieldsPanelTabData: shieldsPanelState.getActiveTabData(state.shieldsPanel),
     persistentData: shieldsPanelState.getPersistentData(state.shieldsPanel),
-    settings: ownProps.settings
+    settingsData: shieldsPanelState.mergeSettingsData(state.shieldsPanel, ownProps.settings)
   })
 }
 
+// combine all actions used outside background pages.
+// for background action bindings, refer to background/index.js
+const actions = Object.assign({}, shieldsPanelActions, settingsActions)
+
 const mapDispatchToProps = (dispatch: any) => ({
-  actions: bindActionCreators(shieldsPanelActions, dispatch)
+  actions: bindActionCreators(actions, dispatch)
 })
 
 export default connect(
diff --git a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
index a20013e1a6b..9c9a5e46eb7 100644
--- a/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
+++ b/components/brave_extension/extension/brave_extension/containers/braveShields.tsx
@@ -33,6 +33,10 @@ import {
   SetAdvancedViewFirstAccess,
   ShieldsReady
 } from '../types/actions/shieldsPanelActions'
+import { SetStoreSettingsChange } from '../types/actions/settingsActions'
+import { SettingsData } from '../types/other/settingsTypes'
+
+// Helpers
 import { shieldsHasFocus } from '../helpers/shieldsUtils'
 
 interface Props {
@@ -50,24 +54,23 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
+    setStoreSettingsChange: SetStoreSettingsChange
     shieldsReady: ShieldsReady
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
-  settings: any
+  settingsData: SettingsData
 }
 
 interface State {
   showReadOnlyView: boolean
-  showAdvancedView: boolean
 }
 
 export default class Shields extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      showReadOnlyView: false,
-      showAdvancedView: props.settings.showAdvancedView
+      showReadOnlyView: false
     }
   }
 
@@ -76,11 +79,9 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   toggleAdvancedView = () => {
-    const { showAdvancedView } = this.state
+    const { showAdvancedView } = this.props.settingsData
     shieldsAPI.setViewPreferences({ showAdvancedView: !showAdvancedView })
-      // change local state so the component can trigger an update
-      // otherwise change will be visible only after shields closes
-      .then(() => this.setState({ showAdvancedView: !showAdvancedView }))
+      .then(() => this.props.actions.setStoreSettingsChange({ showAdvancedView: !showAdvancedView }))
       .catch((err) => console.log('[Shields] Unable to toggle advanced view interface:', err))
   }
 
@@ -98,12 +99,12 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { shieldsPanelTabData, persistentData, actions } = this.props
-    const { showAdvancedView, showReadOnlyView } = this.state
+    const { shieldsPanelTabData, persistentData, settingsData, actions } = this.props
+    const { showReadOnlyView } = this.state
     if (!shieldsPanelTabData) {
       return null
     }
-    return showAdvancedView
+    return settingsData.showAdvancedView
       ? (
         <AdvancedView
           shieldsPanelTabData={shieldsPanelTabData}
diff --git a/components/brave_extension/extension/brave_extension/helpers/settingsUtils.ts b/components/brave_extension/extension/brave_extension/helpers/settingsUtils.ts
new file mode 100644
index 00000000000..b79b4b34cad
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/helpers/settingsUtils.ts
@@ -0,0 +1,16 @@
+
+/* 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/. */
+
+import { SettingsOptions, SettingsKey } from '../types/other/settingsTypes'
+
+export const settingsOptions: SettingsOptions = {
+  'brave.shields.stats_badge_visible': 'statsBadgeVisible',
+  'brave.shields.advanced_view_enabled': 'showAdvancedView'
+}
+
+export const settingsKeyList: Array<SettingsKey> = [
+  'brave.shields.stats_badge_visible',
+  'brave.shields.advanced_view_enabled'
+]
diff --git a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
index aa1ef65323b..ddcca2191d5 100644
--- a/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
+++ b/components/brave_extension/extension/brave_extension/state/shieldsPanelState.ts
@@ -29,6 +29,10 @@ export const updatePersistentData: shieldState.UpdatePersistentData = (state, pe
   return { ...state, persistentData: { ...state.persistentData, ...persistentData } }
 }
 
+export const mergeSettingsData: shieldState.MergeSettingsData = (state, settingsData) => {
+  return { ...state.settingsData, settingsData }
+}
+
 export const updateActiveTab: shieldState.UpdateActiveTab = (state, windowId, tabId) => {
   let windows: shieldState.Windows = { ...state.windows } || {}
   windows[windowId] = tabId
@@ -135,8 +139,11 @@ export const updateShieldsIconBadgeText: shieldState.UpdateShieldsIconBadgeText
   const tab: shieldState.Tab = state.tabs[tabId]
   if (tab) {
     const total = getTotalResourcesBlocked(tab)
-    // do not show any badge if there are no blocked items
-    setBadgeText(tabId, total > 99 ? '99+' : total > 0 ? total.toString() : '')
+    const text: string = state.settingsData.statsBadgeVisible
+      // do not show any badge if there are no blocked items
+      ? total > 99 ? '99+' : total > 0 ? total.toString() : ''
+      : ''
+    setBadgeText(tabId, text)
   }
 }
 
diff --git a/components/brave_extension/extension/brave_extension/types/actions/index.ts b/components/brave_extension/extension/brave_extension/types/actions/index.ts
index b138ee74336..2da31875e5b 100644
--- a/components/brave_extension/extension/brave_extension/types/actions/index.ts
+++ b/components/brave_extension/extension/brave_extension/types/actions/index.ts
@@ -3,10 +3,12 @@ import { tabActions } from './tabActions'
 import { webNavigationActions } from './webNavigationActions'
 import { windowActions } from './windowActions'
 import { runtimeActions } from './runtimeActions'
+import { settingsActions } from './settingsActions'
 
 export type Actions =
   shieldPanelActions |
   tabActions |
   webNavigationActions |
   windowActions |
-  runtimeActions
+  runtimeActions |
+  settingsActions
diff --git a/components/brave_extension/extension/brave_extension/types/actions/settingsActions.ts b/components/brave_extension/extension/brave_extension/types/actions/settingsActions.ts
new file mode 100644
index 00000000000..57ae10326fe
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/types/actions/settingsActions.ts
@@ -0,0 +1,22 @@
+/* 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/. */
+
+import * as types from '../../constants/settingsTypes'
+import { Settings, SettingsData } from '../other/settingsTypes'
+
+interface SetStoreSettingsChangeReturn {
+  type: typeof types.SET_STORE_SETTINGS_CHANGE,
+  settingsData: Partial<SettingsData>
+}
+
+export interface SetStoreSettingsChange {
+  (settingsData: Partial<SettingsData>): SetStoreSettingsChangeReturn
+}
+
+export interface SettingsDidChange {
+  (settings: Settings): SetStoreSettingsChangeReturn
+}
+
+export type settingsActions =
+  SetStoreSettingsChangeReturn
diff --git a/components/brave_extension/extension/brave_extension/types/constants/settingsTypes.ts b/components/brave_extension/extension/brave_extension/types/constants/settingsTypes.ts
new file mode 100644
index 00000000000..a8a4d641638
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/types/constants/settingsTypes.ts
@@ -0,0 +1,7 @@
+/* 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/. */
+
+import * as types from '../../constants/settingsTypes'
+
+export type SET_STORE_SETTINGS_CHANGE = typeof types.SET_STORE_SETTINGS_CHANGE
diff --git a/components/brave_extension/extension/brave_extension/types/other/settingsTypes.ts b/components/brave_extension/extension/brave_extension/types/other/settingsTypes.ts
new file mode 100644
index 00000000000..ef891831c85
--- /dev/null
+++ b/components/brave_extension/extension/brave_extension/types/other/settingsTypes.ts
@@ -0,0 +1,26 @@
+/* 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/. */
+
+export type Settings = {
+  key: string
+  type: any
+  // TODO: can support multiple types, see PrefType in chromel.d.ts
+  value: boolean
+}
+
+export type SettingsData = {
+  [key in GeneratedSettingsKey]: boolean
+}
+
+export type SettingsOptions = {
+  [key: string]: GeneratedSettingsKey
+}
+
+export type GeneratedSettingsKey =
+  'showAdvancedView' |
+  'statsBadgeVisible'
+
+export type SettingsKey =
+  'brave.shields.advanced_view_enabled' |
+  'brave.shields.stats_badge_visible'
diff --git a/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts b/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
index 2738c15456b..3501e2f4823 100644
--- a/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
+++ b/components/brave_extension/extension/brave_extension/types/state/shieldsPannelState.ts
@@ -5,6 +5,7 @@
 import { BlockOptions, BlockTypes, BlockFPOptions, BlockCookiesOptions } from '../other/blockTypes'
 import { CosmeticFilteringState } from '../adblock/adblockTypes'
 import { NoScriptInfo } from '../other/noScriptInfo'
+import { SettingsData } from '../other/settingsTypes'
 
 export interface Tab {
   cosmeticBlocking: boolean
@@ -47,6 +48,7 @@ export interface PersistentData {
 
 export interface State {
   persistentData: PersistentData
+  settingsData: SettingsData
   currentWindowId: number
   tabs: Tabs
   windows: Windows
@@ -68,6 +70,10 @@ export interface UpdatePersistentData {
   (state: State, persistentData: Partial<PersistentData>): State
 }
 
+export interface MergeSettingsData {
+  (state: State, settingsData: SettingsData): SettingsData
+}
+
 export interface UpdateActiveTab {
   (state: State, windowId: number, tabId: number): State
 }
diff --git a/components/definitions/chromel.d.ts b/components/definitions/chromel.d.ts
index d1081c5e264..6737dfbfb96 100644
--- a/components/definitions/chromel.d.ts
+++ b/components/definitions/chromel.d.ts
@@ -56,6 +56,10 @@ declare namespace chrome.settingsPrivate {
 
   type SetDefaultZoomCallback = (success: boolean) => void
   function setDefaultZoom (zoom: number, callback?: SetDefaultZoomCallback): void
+
+  const onPrefsChanged: {
+    addListener: (callback: (prefs: PrefObject[]) => void) => void
+  }
 }
 
 declare namespace chrome.braveRewards {
@@ -225,9 +229,7 @@ declare namespace chrome.braveShields {
 
   type BraveShieldsViewPreferences = {
     showAdvancedView: boolean
-  }
-  type BraveShieldsSetViewPreferencesData = {
-    showAdvancedView?: boolean
+    statsBadgeVisible: boolean
   }
 }
 
diff --git a/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts b/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
index 42b2989bad1..9c2c8876b87 100644
--- a/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
+++ b/components/test/brave_extension/background/reducers/shieldsPanelReducer_test.ts
@@ -60,6 +60,10 @@ const state: State = deepFreeze({
   persistentData: {
     isFirstAccess: true
   },
+  settingsData: {
+    showAdvancedView: false,
+    statsBadgeVisible: true
+  },
   tabs: {
     2: {
       ...details,
diff --git a/components/test/brave_extension/state/shieldsPanelState_test.ts b/components/test/brave_extension/state/shieldsPanelState_test.ts
index 0eb95d74887..839e5e33026 100644
--- a/components/test/brave_extension/state/shieldsPanelState_test.ts
+++ b/components/test/brave_extension/state/shieldsPanelState_test.ts
@@ -13,6 +13,10 @@ const state: State = deepFreeze({
   persistentData: {
     isFirstAccess: true
   },
+  settingsData: {
+    showAdvancedView: false,
+    statsBadgeVisible: true
+  },
   tabs: {
     2: {
       id: 2,
diff --git a/components/test/testData.ts b/components/test/testData.ts
index 2020cfaee8f..c57f9ea2769 100644
--- a/components/test/testData.ts
+++ b/components/test/testData.ts
@@ -123,6 +123,11 @@ let mockSettings: MockSettingsStore = {
     key: 'brave.shields.advanced_view_enabled',
     type: 'BOOLEAN',
     value: false
+  },
+  ['brave.shields.stats_badge_visible']: {
+    key: 'brave.shields.stats_badge_visible',
+    type: 'BOOLEAN',
+    value: true
   }
 }
 
@@ -342,7 +347,8 @@ export const initialState = deepFreeze({
     currentWindowId: -1,
     tabs: {},
     windows: {},
-    persistentData: { isFirstAccess: true }
+    persistentData: { isFirstAccess: true },
+    settingsData: { showAdvancedView: false, statsBadgeVisible: true }
   }
 })