diff --git a/BUILD.gn b/BUILD.gn
index 39ef014..111c4cb 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -32,11 +32,13 @@ action("brave-extension") {
     "app/background/store.ts",
     "app/braveShieldsPanel.tsx",
     "app/components/braveShields/braveShields.tsx",
-    "app/components/braveShields/braveShieldsControls.tsx",
-    "app/components/braveShields/braveShieldsFooter.tsx",
-    "app/components/braveShields/braveShieldsHeader.tsx",
-    "app/components/braveShields/braveShieldsStats.tsx",
-    "app/components/noScript/noScript.tsx",
+    "app/components/braveShields/footer.tsx",
+    "app/components/braveShields/header.tsx",
+    "app/components/braveShields/interfaceControls.tsx",
+    "app/components/braveShields/privacyControls.tsx",
+    "app/components/braveShields/blockedResources/blockedResources.tsx",
+    "app/components/braveShields/blockedResources/scriptsList.tsx",
+    "app/components/braveShields/blockedResources/staticList.tsx",
     "app/constants/cosmeticFilterTypes.ts",
     "app/constants/resourceIdentifiers.ts",
     "app/constants/runtimeActionTypes.ts",
@@ -48,6 +50,7 @@ action("brave-extension") {
     "app/content.ts",
     "app/helpers/arrayUtils.ts",
     "app/helpers/urlUtils.ts",
+    "app/helpers/shieldsUtils.ts",
     "app/state/shieldsPanelState.ts",
     "app/types/actions/cosmeticFilterActions.ts",
     "app/types/actions/index.ts",
diff --git a/app/_locales/en_US/messages.json b/app/_locales/en_US/messages.json
index e76bc4d..eb92525 100644
--- a/app/_locales/en_US/messages.json
+++ b/app/_locales/en_US/messages.json
@@ -3,121 +3,164 @@
     "message": "The Brave Extension",
     "description": "The name of the the extension."
   },
-
-  "shieldsStatsAdsTrackersBlocked": {
-    "message": "Ads and Trackers Blocked",
-    "description": "Website ads and trackering elements such as pixels, images, scripts, etc."
+  "shields": {
+    "message": "Shields",
+    "description": "The Shields feature name"
   },
-  "shieldsStatsHttpsUpgrades": {
-    "message": "HTTPS Upgrades",
-    "description": "Label for shields stats, HTTPS upgrades count"
+  "up": {
+    "message": "up",
+    "description": "Message for when shields is enabled"
   },
-  "shieldsStatsScriptsBlocked": {
-    "message": "Scripts Blocked",
-    "description": "Label for shields stats, Scripts Blocked count"
+  "down": {
+    "message": "down",
+    "description": "Message for when shields is disabled"
   },
-  "shieldsFingerPrintingBlocked": {
-    "message": "Fingerprinting Methods Blocked",
-    "description": "Label for shields stats, Fingerprinting Methods Blocked count"
+  "totalBlocked": {
+    "message": "Total blocked",
+    "description": "Message showing the amount of all blocked resources"
   },
-
-  "shieldsHeaderShieldsToggle": {
-    "message": "Shields",
-    "description": "Label for top shields switch in shields header"
-  },
-  "shieldsHeaderToggleLeftPosition": {
-    "message": "Down",
-    "description": "Label for top shields switch in shields header turned off position"
-  },
-  "shieldsHeaderToggleRightPosition": {
-    "message": "Up",
-    "description": "Label for top shields switch in shields header turned on position"
-  },
-  "shieldsHeaderForSite": {
-    "message": "Site shield settings for",
-    "description": "Label for shields header near current site name"
-  },
-
-  "shieldsControlsAdvancedControls": {
-    "message": "Advanced Controls",
-    "description": "Label for advanced controls group"
-  },
-
-  "shieldsControlsAdControl": {
-    "message": "Ad Control",
-    "description": "Label for Advertisement Control dropdown box options "
-  },
-  "shieldsControlsAdControlOptionBlockAds": {
-    "message": "Block Ads",
-    "description": "Ad Control dropdown box, option block ads"
-  },
-  "shieldsControlsAdControlOptionAllowAdsTracking": {
-    "message": "Allow Ads and Tracking",
-    "description": "Ad Control dropdown box, option allow ads and tracking"
-  },
-
-  "shieldsControlsCookieControl": {
-    "message": "Cookie Control",
-    "description": "Label Cookie Control dropdown options"
-  },
-  "shieldsControlsCookieOptionBlock3p": {
-    "message": "Block 3rd Party Cookies",
-    "description": "Cookie control dropdown option Block 3rd Party Cookies"
-  },
-  "shieldsControlsCookieOptionAllowAll": {
-    "message": "Allow All Cookies",
-    "description": "Cookie control dropdown option Allow All Cookies"
-  },
-  "shieldsControlsCookieOptionBlockAll": {
-    "message": "Block All Cookies",
-    "description": "Cookie control dropdown option Block All Cookies"
-  },
-
-  "shieldsControlsFingerprintingProtection": {
-    "message": "Fingerprinting Protection",
-    "description": "Label Fingerprinting Protection dropdown options"
-  },
-  "shieldsControlsFingerprintingOptionBlock3p": {
-    "message": "Block 3rd Party Fingerprinting",
-    "description": "Fingerprinting control dropdown option Block 3rd Party Fingerprinting"
-  },
-  "shieldsControlsFingerprintingOptionAllowAll": {
-    "message": "Allow All Fingerprinting",
-    "description": "Fingerprinting control dropdown option Allow All Fingerprinting"
-  },
-  "shieldsControlsFingerprintingOptionBlockAll": {
-    "message": "Block All Fingerprinting",
-    "description": "Fingerprinting control dropdown option Block All Fingerprinting"
-  },
-
-  "shieldsControlsHttpsEverywhereSwitch": {
-    "message": "HTTPS Everywhere",
-    "description": "Shields controls, switch for HTTPS Everywhere"
-  },
-  "shieldsControlsBlockScriptsSwitch": {
-    "message": "Block Scripts",
-    "description": "Shields controls, switch for Block Scripts"
-  },
-  "shieldsControlsBlockPhishingMalwareSwitch": {
-    "message": "Block Phishing/Malware",
-    "description": "Shields controls, switch for Block Phishing/Malware"
-  },
-
-  "noScriptSwitches": {
-    "message": "Toggle switches to disable script blocking",
-    "description": "Instructions for per-origin noScript switches"
-  },
-  "noScriptApplyOnce": {
+  "forThisSite": {
+    "message": "for this site",
+    "description": "Partial string for the phrase `shields is up *for this site*`"
+  },
+  "enabledMessage": {
+    "message": "If a site appears broken, try shields down",
+    "description": "Message telling the user to disable shields if a site appears broken"
+  },
+  "disabledMessage": {
+    "message": "You’re browsing this site without any privacy and security protections.",
+    "description": "Message telling the user that shields are disabled"
+  },
+  "blockAds": {
+    "message": "Ads and trackers blocked",
+    "description": "Message indicating the number of ads and trackers blocked"
+  },
+  "blockPopups": {
+    "message": "Pop-ups blocked",
+    "description": "Message indicating the number of pop-ups blocked"
+  },
+  "blockImages": {
+    "message": "Images blocked",
+    "description": "Message indicating the number of images blocked"
+  },
+  "block3partyCookies": {
+    "message": "3rd-party cookies blocked",
+    "description": "Message for the select option about cookies blocked, blocking 3rd party cookies"
+  },
+  "allowAllCookies": {
+    "message": "All cookies allowed",
+    "description": "Message for the select option about cookies blocked, allowing all cookies"
+  },
+  "blockAllCookies": {
+    "message": "Cookies blocked",
+    "description": "Message for the select option about cookies blocked, blocking all cookies"
+  },
+  "blockSomeScripts": {
+    "message": "Some scripts blocked",
+    "description": "Message for the select option about scripts blocked, blocking 3rd party scripts"
+  },
+  "allowAllScripts": {
+    "message": "All scripts allowed",
+    "description": "Message for the select option about scripts blocked, allowing all scripts"
+  },
+  "blockAllScriptsOrigins": {
+    "message": "Scripts blocked",
+    "description": "Message for the select option about scripts blocked, blocking all scripts"
+  },
+  "block3partyFingerprinting": {
+    "message": "3rd-party device recognition blocked",
+    "description": "Message for the select option about fingerprinting blocked, blocking 3rd party fingerprinting"
+  },
+  "allowAllFingerprinting": {
+    "message": "All device recognition allowed",
+    "description": "Message for the select option about fingerprinting blocked, allowing all fingerprinting"
+  },
+  "blockAllFingerprinting": {
+    "message": "Device recognition blocked",
+    "description": "Message for the select option about fingerprinting blocked, blocking all fingerprinting"
+  },
+  "blockPishing": {
+    "message": "Phishing/malware attempts blocked",
+    "description": "Message indicating the number of phishing/malware blocked"
+  },
+  "connectionsEncrypted": {
+    "message": "Connections encrypted",
+    "description": "Message indicating the number of connections encrypted"
+  },
+  "editDefaults": {
+    "message": "Global shield defaults",
+    "description": "Message linking shields to the global shield settings"
+  },
+  "cookiesOnThisSite": {
+    "message": "Cookies on this site",
+    "description": "Message for the cookie resources blocked panel"
+  },
+  "deviceRecognitionAttempts": {
+    "message": "Device recognition attempts",
+    "description": "Message for the device recognition attempts blocked panel"
+  },
+  "scriptsOnThisSite": {
+    "message": "Scripts on this site",
+    "description": "Message for the script resources blocked panel"
+  },
+  "blockedScripts": {
+    "message": "Blocked scripts",
+    "description": "Message for the script resources blocked"
+  },
+  "allowedScripts": {
+    "message": "Allowed scripts",
+    "description": "Message for the script resources allowed"
+  },
+  "allowAll": {
+    "message": "Allow all",
+    "description": "Message for the resources blocked *allow all* option"
+  },
+  "allow": {
+    "message": "Allow",
+    "description": "Message for the resources blocked *allow* option"
+  },
+  "allowed": {
+    "message": "Allowed",
+    "description": "Message for the resources blocked *allowed* option"
+  },
+  "blockAll": {
+    "message": "Block all",
+    "description": "Message for the resources blocked *block all* option"
+  },
+  "block": {
+    "message": "Block",
+    "description": "Message for the resources blocked *block* option"
+  },
+  "blocked": {
+    "message": "Blocked",
+    "description": "Message for the resources blocked *blocked* option"
+  },
+  "apply": {
     "message": "Apply",
-    "description": "Label for applying per-origin noScript settings"
+    "description": "Message for the button inside dynamic list of resources blocked"
+  },
+  "applyOnce": {
+    "message": "Apply once",
+    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply once*"
+  },
+  "applyUntilRestart": {
+    "message": "Apply until restart",
+    "description": "Message for the dropdown option inside dynamic list of resources blocked to *apply until restart*"
+  },
+  "alwaysApply": {
+    "message": "Always apply",
+    "description": "Message for the dropdown option inside dynamic list of resources blocked to *always apply*"
+  },
+  "undo": {
+    "message": "Undo",
+    "description": "Message for the resources blocked *undo* option"
   },
-
-  "shieldsFooterEditDefault":{
-    "message": "Edit default shield settings...",
-    "description": "Shields controls footer, link to edit default shields settings"
+  "cancel": {
+    "message": "Cancel",
+    "description": "Message for the button inside the static list of resources blocked to cancel the operation"
   },
-  "shieldsFooterReload":{
-    "message": "Reload...",
-    "description": "Shields controls footer, label for action reload page to apply current shields settings"
+  "goBack": {
+    "message": "Go back",
+    "description": "Message for the button inside the static list of resources blocked to go back from the current screen"
   }
 }
diff --git a/app/actions/shieldsPanelActions.ts b/app/actions/shieldsPanelActions.ts
index 6603f5a..99546fe 100644
--- a/app/actions/shieldsPanelActions.ts
+++ b/app/actions/shieldsPanelActions.ts
@@ -40,15 +40,17 @@ export const controlsToggled: actions.ControlsToggled = (setting = true) => {
   }
 }
 
-export const httpsEverywhereToggled: actions.HttpsEverywhereToggled = () => {
+export const httpsEverywhereToggled: actions.HttpsEverywhereToggled = (setting) => {
   return {
-    type: types.HTTPS_EVERYWHERE_TOGGLED
+    type: types.HTTPS_EVERYWHERE_TOGGLED,
+    setting
   }
 }
 
-export const javascriptToggled: actions.JavascriptToggled = () => {
+export const blockJavaScript: actions.BlockJavaScript = (setting) => {
   return {
-    type: types.JAVASCRIPT_TOGGLED
+    type: types.JAVASCRIPT_TOGGLED,
+    setting
   }
 }
 
@@ -79,3 +81,11 @@ export const changeNoScriptSettings: actions.ChangeNoScriptSettings = (origin) =
     origin
   }
 }
+
+export const changeAllNoScriptSettings: actions.ChangeAllNoScriptSettings = (origin, shouldBlock) => {
+  return {
+    type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
+    origin,
+    shouldBlock
+  }
+}
diff --git a/app/assets/fonts/Muli-v11/Muli_300_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..2dd8484
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..a9f24cd
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..1a4aeb7
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_300_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..f48b172
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..e7ace44
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..c3c039a
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..a4e2b32
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..7c974b8
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..2a50230
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..34dbb30
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..8af1755
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..1b93e15
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..7213c98
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..0f0c572
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..ed7d556
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2
new file mode 100644
index 0000000..9a5845b
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2
new file mode 100644
index 0000000..cfa2943
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2 differ
diff --git a/app/assets/fonts/Muli-v11/Muli_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 b/app/assets/fonts/Muli-v11/Muli_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2
new file mode 100644
index 0000000..052c5eb
Binary files /dev/null and b/app/assets/fonts/Muli-v11/Muli_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..c5343fe
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..75f2e34
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..074e36c
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..d64906c
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..551379a
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..ee94627
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..8763f6b
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..5fa0acb
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..5ccb3e4
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..e07eaeb
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..dca9001
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..19f70c6
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..1cf59b2
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..eba3c79
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..766570c
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..cfebdd9
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..eac735d
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_500_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_500_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..b57f095
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_500_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..121091e
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..4d9bd8f
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..6128779
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2
new file mode 100644
index 0000000..72edec6
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2
new file mode 100644
index 0000000..94574ad
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 differ
diff --git a/app/assets/fonts/Poppins-v5/Poppins_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 b/app/assets/fonts/Poppins-v5/Poppins_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2
new file mode 100644
index 0000000..b418923
Binary files /dev/null and b/app/assets/fonts/Poppins-v5/Poppins_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 differ
diff --git a/app/assets/fonts/muli.css b/app/assets/fonts/muli.css
new file mode 100644
index 0000000..4652c3a
--- /dev/null
+++ b/app/assets/fonts/muli.css
@@ -0,0 +1,144 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_italic_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Muli-v11/Muli_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Muli-v11/Muli_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_normal_19882c2c7f40473fb6ffcf2c9ae29c9d_vietnamese_v11.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v11.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Muli';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Muli-v11/Muli_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v11.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
diff --git a/app/assets/fonts/poppins.css b/app/assets/fonts/poppins.css
new file mode 100644
index 0000000..82c9931
--- /dev/null
+++ b/app/assets/fonts/poppins.css
@@ -0,0 +1,193 @@
+
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(./Poppins-v5/Poppins_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Poppins-v5/Poppins_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(./Poppins-v5/Poppins_500_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* devanagari */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2) format('woff2');
+    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./Poppins-v5/Poppins_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
diff --git a/app/background/reducers/shieldsPanelReducer.ts b/app/background/reducers/shieldsPanelReducer.ts
index 98db536..098b63f 100644
--- a/app/background/reducers/shieldsPanelReducer.ts
+++ b/app/background/reducers/shieldsPanelReducer.ts
@@ -23,12 +23,13 @@ import { reloadTab } from '../api/tabsAPI'
 import * as shieldsPanelState from '../../state/shieldsPanelState'
 import { State, Tab } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
+import { getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
 
 const updateShieldsIconBadgeText = (state: State) => {
   const tabId: number = shieldsPanelState.getActiveTabId(state)
   const tab: Tab = state.tabs[tabId]
   if (tab) {
-    const total = tab.adsBlocked + tab.trackersBlocked + tab.javascriptBlocked + tab.fingerprintingBlocked + tab.httpsRedirected
+    const total = getTotalResourcesBlocked(tab)
     // do not show any badge if there are no blocked items
     setBadgeText(tabId, total > 99 ? '99+' : total > 0 ? total.toString() : '')
   }
@@ -161,7 +162,7 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
           break
         }
 
-        setAllowHTTPUpgradableResources(tabData.origin, toggleShieldsValue(tabData.httpUpgradableResources))
+        setAllowHTTPUpgradableResources(tabData.origin, toggleShieldsValue(action.setting))
           .then(() => {
             requestShieldPanelData(shieldsPanelState.getActiveTabId(state))
             reloadTab(tabData.id, true).catch(() => {
@@ -320,6 +321,12 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
         state = shieldsPanelState.changeNoScriptSettings(state, tabId, action.origin)
         break
       }
+    case shieldsPanelTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS:
+      {
+        const tabId: number = shieldsPanelState.getActiveTabId(state)
+        state = shieldsPanelState.changeAllNoScriptSettings(state, tabId, action.origin, action.shouldBlock)
+        break
+      }
   }
   return state
 }
diff --git a/app/braveShieldsPanel.tsx b/app/braveShieldsPanel.tsx
index 244fab1..b2cd83b 100644
--- a/app/braveShieldsPanel.tsx
+++ b/app/braveShieldsPanel.tsx
@@ -4,13 +4,18 @@
 
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+
+import Theme from 'brave-ui/theme/brave-default'
+import { ThemeProvider } from 'brave-ui/theme'
+
 import { Provider } from 'react-redux'
 import { Store } from 'react-chrome-redux'
 import BraveShields from './containers/braveShields'
-import { State } from './types/state/shieldsPannelState'
+require('./assets/fonts/muli.css')
+require('./assets/fonts/poppins.css')
 
 chrome.storage.local.get('state', (obj) => {
-  const store: Store<State> = new Store({
+  const store: any = new Store({
     portName: 'BRAVE'
   })
 
@@ -19,7 +24,9 @@ chrome.storage.local.get('state', (obj) => {
       const mountNode: HTMLElement | null = document.querySelector('#root')
       ReactDOM.render(
         <Provider store={store}>
-          <BraveShields />
+          <ThemeProvider theme={Theme}>
+            <BraveShields />
+          </ThemeProvider>
         </Provider>,
         mountNode
       )
diff --git a/app/components/braveShields/blockedResources/blockedResources.tsx b/app/components/braveShields/blockedResources/blockedResources.tsx
new file mode 100644
index 0000000..fbbeaa9
--- /dev/null
+++ b/app/components/braveShields/blockedResources/blockedResources.tsx
@@ -0,0 +1,61 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import {
+  Label,
+  ResourcesGrid,
+  ResourcesSiteInfoGrid,
+  CloseButton,
+  CloseIcon,
+  EmptyButton,
+  StatFlex,
+  ShowLessIcon,
+  ResourcesStatusTitle,
+  ResourcesSiteInfoFlex,
+  ResourcesStatusGrid
+} from 'brave-ui/features/shields'
+
+// Utils
+import { getFavicon } from '../../../helpers/shieldsUtils'
+
+interface Props {
+  hostname: string
+  stats: number | undefined
+  title: string
+  url: string
+  onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void
+  dynamic?: boolean
+}
+
+export default class BlockedResources extends React.PureComponent<Props, {}> {
+  renderHeader = (stats: number | undefined, title: string, onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void) => {
+    return (
+      <ResourcesStatusGrid withStats={stats !== undefined} onClick={onToggle}>
+        <EmptyButton><ShowLessIcon /></EmptyButton>
+        {stats !== undefined ? <StatFlex>{stats}</StatFlex> : null}
+        <ResourcesStatusTitle>{title}</ResourcesStatusTitle>
+      </ResourcesStatusGrid>
+    )
+  }
+
+  render () {
+    const { stats, hostname, title, url, onToggle, children } = this.props
+    return (
+      <ResourcesGrid>
+        <ResourcesSiteInfoFlex>
+          <ResourcesSiteInfoGrid>
+            <img src={getFavicon(url)} />
+            <Label size='large'>{hostname}</Label>
+          </ResourcesSiteInfoGrid>
+          <CloseButton onClick={onToggle}><CloseIcon /></CloseButton>
+        </ResourcesSiteInfoFlex>
+        {this.renderHeader(stats, title, onToggle)}
+        {children}
+      </ResourcesGrid>
+    )
+  }
+}
diff --git a/app/components/braveShields/blockedResources/scriptsList.tsx b/app/components/braveShields/blockedResources/scriptsList.tsx
new file mode 100644
index 0000000..35a5237
--- /dev/null
+++ b/app/components/braveShields/blockedResources/scriptsList.tsx
@@ -0,0 +1,187 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import {
+  AllowedScriptsIcon,
+  BlockedScriptsIcon,
+  DismissOverlay,
+  ResourcesListScroll,
+  ResourcesSubTitle,
+  ResourcesFooterGrid,
+  ResourcesFooterGridColumnLeft,
+  ResourcesFooterGridColumnRight,
+  ResourcesListItem,
+  Link,
+  ResourcesListAllowedLink,
+  ResourcesListBlockedLink,
+  ResourcesSubTitleGrid,
+  ResourcesListGrid
+} from 'brave-ui/features/shields'
+
+// Shared components
+import { Button } from 'brave-ui/components'
+
+// Types
+import * as shieldActions from '../../../types/actions/shieldsPanelActions'
+import { BlockJSOptions } from '../../../types/other/blockTypes'
+import { NoScriptInfo } from '../../../types/other/noScriptInfo'
+
+// Utils
+import { getMessage } from '../../../background/api/localeAPI'
+
+interface Props {
+  origin: string
+  noScriptInfo: NoScriptInfo
+  onClickDismiss: () => void
+  javascript: BlockJSOptions
+  blockJavaScript: shieldActions.BlockJavaScript
+  allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
+  changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+  changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
+}
+
+interface State {
+  showApplyOptions: boolean
+}
+
+export default class StaticList extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { showApplyOptions: false }
+  }
+
+  get blockedListSize () {
+    const { noScriptInfo } = this.props
+    return Object.keys(noScriptInfo)
+      .filter((origin: string) => noScriptInfo[origin].willBlock === true).length
+  }
+
+  get allowedListSize () {
+    const { noScriptInfo } = this.props
+    return Object.keys(noScriptInfo)
+      .filter((origin: string) => noScriptInfo[origin].willBlock === false).length
+  }
+
+  onClickOutsideBounds = () => {
+    this.setState({ showApplyOptions: false })
+  }
+
+  onClickToggleBlockOrAllowScript = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.props.changeNoScriptSettings(event.currentTarget.id)
+  }
+
+  onClickBlockAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    const { origin } = this.props
+    this.props.changeAllNoScriptSettings(origin, true)
+  }
+
+  onClickAllowAll = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    const { origin } = this.props
+    this.props.changeAllNoScriptSettings(origin, false)
+    this.setState({ showApplyOptions: false })
+  }
+
+  onClickApplyScriptsOnce = () => {
+    const { noScriptInfo } = this.props
+    const allOrigins = Object.keys(noScriptInfo)
+    this.props.allowScriptOriginsOnce(allOrigins.filter(key => noScriptInfo[key].willBlock === false))
+  }
+
+  renderEnabledList = (list: NoScriptInfo) => {
+    return Object.keys(list).map((origin: string, key: number) => {
+      if (list[origin].willBlock === false) {
+        return null
+      }
+      return (
+        <ResourcesListGrid hightlighted={true} key={key}>
+          {
+            list[origin].willBlock
+              ? <ResourcesListBlockedLink>{getMessage('blocked')}</ResourcesListBlockedLink>
+              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('allow')}</Link>
+          }
+          <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
+          {
+            list[origin].willBlock
+              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('undo')}</Link>
+              : null
+          }
+        </ResourcesListGrid>
+      )
+    })
+  }
+
+  renderDisabledList = (list: NoScriptInfo) => {
+    return Object.keys(list).map((origin: string, key: number) => {
+      if (list[origin].willBlock === true) {
+        return null
+      }
+      return (
+        <ResourcesListGrid hightlighted={list[origin].willBlock} key={key}>
+          {
+            list[origin].willBlock
+              ? <ResourcesListAllowedLink>{getMessage('allowed')}</ResourcesListAllowedLink>
+              : <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('block')}</Link>
+          }
+          <ResourcesListItem title={origin}>{origin}</ResourcesListItem>
+          {
+            list[origin].willBlock
+              ? <Link id={origin} onClick={this.onClickToggleBlockOrAllowScript}>{getMessage('undo')}</Link>
+            : null
+          }
+        </ResourcesListGrid>
+      )
+    })
+  }
+
+  render () {
+    const { showApplyOptions } = this.state
+    const { noScriptInfo, onClickDismiss } = this.props
+    return (
+      <>
+        <ResourcesListScroll>
+          {showApplyOptions ? <DismissOverlay onClick={this.onClickOutsideBounds} /> : null}
+          {/* blocked scripts */}
+          <ResourcesSubTitleGrid>
+            <BlockedScriptsIcon />
+            <ResourcesSubTitle accent='blocked'>
+              {getMessage('blockedScripts')} ({this.blockedListSize})
+            </ResourcesSubTitle>
+            <Link onClick={this.onClickAllowAll}>{getMessage('allowAll')}</Link>
+          </ResourcesSubTitleGrid>
+          {this.renderEnabledList(noScriptInfo)}
+
+          {/* allowed scripts */}
+          <ResourcesSubTitleGrid>
+            <AllowedScriptsIcon />
+            <ResourcesSubTitle accent='allowed'>
+              {getMessage('allowedScripts')} ({this.allowedListSize})
+            </ResourcesSubTitle>
+            <Link onClick={this.onClickBlockAll}>{getMessage('blockAll')}</Link>
+          </ResourcesSubTitleGrid>
+          {this.renderDisabledList(noScriptInfo)}
+
+        </ResourcesListScroll>
+        <ResourcesFooterGrid>
+          <ResourcesFooterGridColumnLeft>
+            <Link onClick={onClickDismiss}>{getMessage('cancel')}</Link>
+          </ResourcesFooterGridColumnLeft>
+          <ResourcesFooterGridColumnRight>
+            <Button
+              level='primary'
+              type='accent'
+              text={getMessage('applyOnce')}
+              onClick={this.onClickApplyScriptsOnce}
+            />
+          </ResourcesFooterGridColumnRight>
+        </ResourcesFooterGrid>
+      </>
+    )
+  }
+}
diff --git a/app/components/braveShields/blockedResources/staticList.tsx b/app/components/braveShields/blockedResources/staticList.tsx
new file mode 100644
index 0000000..0be3fba
--- /dev/null
+++ b/app/components/braveShields/blockedResources/staticList.tsx
@@ -0,0 +1,35 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import { ResourcesListText, ResourcesListScroll, ResourcesFooterFlex } from 'brave-ui/features/shields'
+
+// Shared components
+import { Button } from 'brave-ui/components'
+
+// Utils
+import { getMessage } from '../../../background/api/localeAPI'
+
+interface Props {
+  list: Array<string>
+  onClickDismiss: () => void
+}
+
+export default class StaticList extends React.PureComponent<Props, {}> {
+  render () {
+    const { list, onClickDismiss } = this.props
+    return (
+      <>
+        <ResourcesListScroll>
+          {list.map((item: string, index: number) => <ResourcesListText title={item} key={index}>{item}</ResourcesListText>)}
+        </ResourcesListScroll>
+        <ResourcesFooterFlex>
+          <Button level='primary' type='accent' text={getMessage('goBack')} onClick={onClickDismiss} />
+        </ResourcesFooterFlex>
+      </>
+    )
+  }
+}
diff --git a/app/components/braveShields/braveShields.tsx b/app/components/braveShields/braveShields.tsx
index 33b9204..7e9f7e8 100644
--- a/app/components/braveShields/braveShields.tsx
+++ b/app/components/braveShields/braveShields.tsx
@@ -3,78 +3,84 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import BraveShieldsHeader from './braveShieldsHeader'
-import BraveShieldsStats from './braveShieldsStats'
-import BraveShieldsControls from './braveShieldsControls'
-import BraveShieldsFooter from './braveShieldsFooter'
+
+// Components group
+import ShieldsHeader from './header'
+import ShieldsInterfaceControls from './interfaceControls'
+import ShieldsPrivacyControls from './privacyControls'
+import ShieldsFooter from './footer'
+
+// Utils
+import { ShieldsPanel } from 'brave-ui/features/shields'
 import * as shieldActions from '../../types/actions/shieldsPanelActions'
 import { Tab } from '../../types/state/shieldsPannelState'
 
-interface BraveShieldsProps {
+interface Props {
   actions: {
     shieldsToggled: shieldActions.ShieldsToggled
     blockAdsTrackers: shieldActions.BlockAdsTrackers
-    controlsToggled: shieldActions.ControlsToggled
     httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-    javascriptToggled: shieldActions.JavascriptToggled
+    blockJavaScript: shieldActions.BlockJavaScript
     blockFingerprinting: shieldActions.BlockFingerprinting
     blockCookies: shieldActions.BlockCookies
     allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
     changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+    changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
   }
   shieldsPanelTabData: Tab
 }
 
-export default class BraveShields extends React.Component<BraveShieldsProps, {}> {
+export default class BraveShields extends React.Component<Props, {}> {
   render () {
     const { shieldsPanelTabData, actions } = this.props
-
     if (!shieldsPanelTabData) {
       return null
     }
 
     return (
-      <div data-test-id='brave-shields-panel'>
-        <BraveShieldsHeader
-          braveShields={shieldsPanelTabData.braveShields}
+      <ShieldsPanel data-test-id='brave-shields-panel'>
+        <ShieldsHeader
+          tabData={shieldsPanelTabData}
           shieldsToggled={actions.shieldsToggled}
-          hostname={shieldsPanelTabData.hostname}
-          origin={shieldsPanelTabData.origin}
         />
-        <BraveShieldsStats
+        <ShieldsInterfaceControls
+          url={shieldsPanelTabData.url}
+          hostname={shieldsPanelTabData.hostname}
           braveShields={shieldsPanelTabData.braveShields}
+          ads={shieldsPanelTabData.ads}
           adsBlocked={shieldsPanelTabData.adsBlocked}
-          trackersBlocked={shieldsPanelTabData.trackersBlocked}
-          httpsRedirected={shieldsPanelTabData.httpsRedirected}
-          javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
-          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
           adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
-          trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
-          httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
-          javascriptBlockedResources={shieldsPanelTabData.javascriptBlockedResources}
-          fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
-        />
-        <BraveShieldsControls
-          braveShields={shieldsPanelTabData.braveShields}
           blockAdsTrackers={actions.blockAdsTrackers}
-          ads={shieldsPanelTabData.ads}
           trackers={shieldsPanelTabData.trackers}
+          trackersBlocked={shieldsPanelTabData.trackersBlocked}
+          trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
+          httpsRedirected={shieldsPanelTabData.httpsRedirected}
           httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
-          javascript={shieldsPanelTabData.javascript}
-          controlsToggled={actions.controlsToggled}
+          httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
           httpsEverywhereToggled={actions.httpsEverywhereToggled}
-          javascriptToggled={actions.javascriptToggled}
-          controlsOpen={shieldsPanelTabData.controlsOpen}
+        />
+        <ShieldsPrivacyControls
+          url={shieldsPanelTabData.url}
+          hostname={shieldsPanelTabData.hostname}
+          origin={shieldsPanelTabData.origin}
+          braveShields={shieldsPanelTabData.braveShields}
           fingerprinting={shieldsPanelTabData.fingerprinting}
+          fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
+          fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
           blockFingerprinting={actions.blockFingerprinting}
-          cookies={shieldsPanelTabData.cookies}
-          blockCookies={actions.blockCookies}
+          javascript={shieldsPanelTabData.javascript}
+          javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
+          javascriptBlockedResources={shieldsPanelTabData.javascriptBlockedResources}
           noScriptInfo={shieldsPanelTabData.noScriptInfo}
+          changeAllNoScriptSettings={actions.changeAllNoScriptSettings}
           allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
           changeNoScriptSettings={actions.changeNoScriptSettings}
+          blockJavaScript={actions.blockJavaScript}
+          blockCookies={actions.blockCookies}
+          cookies={shieldsPanelTabData.cookies}
         />
-        <BraveShieldsFooter tabId={shieldsPanelTabData.id} />
-      </div>
+        <ShieldsFooter />
+      </ShieldsPanel>
     )
   }
 }
diff --git a/app/components/braveShields/braveShieldsControls.tsx b/app/components/braveShields/braveShieldsControls.tsx
deleted file mode 100644
index 7306632..0000000
--- a/app/components/braveShields/braveShieldsControls.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/* 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 React from 'react'
-import { Grid, Column } from 'brave-ui/gridSystem'
-import SwitchButton from 'brave-ui/switchButton'
-import SelectOption from 'brave-ui/selectOption'
-import ContentToggleArrow from 'brave-ui/contentToggleArrow'
-import BoxedContent from 'brave-ui/boxedContent'
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../../types/other/blockTypes'
-import { getMessage } from '../../background/api/localeAPI'
-import { NoScriptInfo } from '../../types/other/noScriptInfo'
-import NoScript from '../noScript/noScript'
-import theme from '../../theme'
-
-export interface BraveShieldsControlsProps {
-  controlsOpen: boolean
-  braveShields: BlockOptions
-  httpUpgradableResources: BlockOptions
-  ads: BlockOptions
-  trackers: BlockOptions
-  javascript: BlockOptions
-  fingerprinting: BlockFPOptions
-  cookies: BlockCookiesOptions
-  blockAdsTrackers: shieldActions.BlockAdsTrackers
-  controlsToggled: shieldActions.ControlsToggled
-  httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
-  javascriptToggled: shieldActions.JavascriptToggled
-  blockFingerprinting: shieldActions.BlockFingerprinting
-  blockCookies: shieldActions.BlockCookies
-  noScriptInfo: NoScriptInfo
-  allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
-  changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
-}
-
-export default class BraveShieldsControls extends React.Component<BraveShieldsControlsProps, {}> {
-  constructor (props: BraveShieldsControlsProps) {
-    super(props)
-    this.onChangeAdControl = this.onChangeAdControl.bind(this)
-    this.onToggleControls = this.onToggleControls.bind(this)
-    this.onToggleHTTPSEverywhere = this.onToggleHTTPSEverywhere.bind(this)
-    this.onToggleJavaScript = this.onToggleJavaScript.bind(this)
-    this.onChangeFingerprintingProtection = this.onChangeFingerprintingProtection.bind(this)
-    this.onChangeCookiesProtection = this.onChangeCookiesProtection.bind(this)
-    this.onAllowScriptOriginsOnce = this.onAllowScriptOriginsOnce.bind(this)
-    this.onChangeNoScriptSettings = this.onChangeNoScriptSettings.bind(this)
-  }
-
-  onChangeAdControl (e: HTMLSelectElement) {
-    this.props.blockAdsTrackers(e.target.value)
-  }
-
-  onToggleControls () {
-    this.props.controlsToggled(!this.props.controlsOpen)
-  }
-
-  onToggleHTTPSEverywhere () {
-    this.props.httpsEverywhereToggled()
-  }
-
-  onToggleJavaScript () {
-    this.props.javascriptToggled()
-  }
-
-  onChangeFingerprintingProtection (e: HTMLSelectElement) {
-    this.props.blockFingerprinting(e.target.value)
-  }
-
-  onChangeCookiesProtection (e: HTMLSelectElement) {
-    this.props.blockCookies(e.target.value)
-  }
-
-  onAllowScriptOriginsOnce (origins: string[]) {
-    this.props.allowScriptOriginsOnce(origins)
-  }
-
-  onChangeNoScriptSettings (origin: string) {
-    this.props.changeNoScriptSettings(origin)
-  }
-
-  render () {
-    const { braveShields, ads, trackers, controlsOpen, httpUpgradableResources, javascript, fingerprinting, cookies, noScriptInfo } = this.props
-    return (
-      <Grid id='braveShieldsControls' theme={theme.braveShieldsControls}>
-        <Column>
-          <ContentToggleArrow
-            id='advancedControlsToggle'
-            withSeparator={true}
-            open={controlsOpen}
-            summary={getMessage('shieldsControlsAdvancedControls')}
-            onClick={this.onToggleControls}
-          >
-            <BoxedContent theme={theme.braveShieldsControlsContent}>
-              <SelectOption
-                id='shieldsControlsAdControl'
-                theme={theme.noUserSelect}
-                disabled={braveShields === 'block'}
-                titleName={getMessage('shieldsControlsAdControl')}
-                value={braveShields !== 'block' && ads !== 'allow' && trackers !== 'allow' ? 'allow' : 'block'}
-                onChange={this.onChangeAdControl}
-              >
-                {/* TODO needs "show brave ads" */}
-                <option value='allow'>{getMessage('shieldsControlsAdControlOptionBlockAds')}</option>
-                <option value='block'>{getMessage('shieldsControlsAdControlOptionAllowAdsTracking')}</option>
-              </SelectOption>
-
-              <SelectOption
-                id='shieldsControlsCookieControl'
-                theme={theme.noUserSelect}
-                disabled={braveShields === 'block'}
-                titleName={getMessage('shieldsControlsCookieControl')}
-                value={braveShields !== 'block' ? cookies : 'allow'}
-                onChange={this.onChangeCookiesProtection}
-              >
-                <option value='block_third_party'>{getMessage('shieldsControlsCookieOptionBlock3p')}</option>
-                <option value='block'>{getMessage('shieldsControlsCookieOptionBlockAll')}</option>
-                <option value='allow'>{getMessage('shieldsControlsCookieOptionAllowAll')}</option>
-              </SelectOption>
-
-              <SelectOption
-                id='shieldsControlsFingerprintingProtection'
-                theme={theme.noUserSelect}
-                disabled={braveShields === 'block'}
-                titleName={getMessage('shieldsControlsFingerprintingProtection')}
-                value={braveShields !== 'block' ? fingerprinting : 'allow'}
-                onChange={this.onChangeFingerprintingProtection}
-              >
-                <option value='block_third_party'>{getMessage('shieldsControlsFingerprintingOptionBlock3p')}</option>
-                <option value='block'>{getMessage('shieldsControlsFingerprintingOptionBlockAll')}</option>
-                <option value='allow'>{getMessage('shieldsControlsFingerprintingOptionAllowAll')}</option>
-              </SelectOption>
-
-              <Grid theme={theme.braveShieldsControlsSwitches}>
-                <Column>
-                  <SwitchButton
-                    id='httpsEverywhere'
-                    theme={theme.noUserSelect}
-                    disabled={braveShields === 'block'}
-                    rightText={getMessage('shieldsControlsHttpsEverywhereSwitch')}
-                    checked={braveShields !== 'block' && httpUpgradableResources !== 'allow'}
-                    onChange={this.onToggleHTTPSEverywhere}
-                  />
-                </Column>
-                <Column>
-                  <SwitchButton
-                    id='blockScripts'
-                    theme={theme.noUserSelect}
-                    disabled={braveShields === 'block'}
-                    rightText={getMessage('shieldsControlsBlockScriptsSwitch')}
-                    checked={braveShields !== 'block' && javascript !== 'allow'}
-                    onChange={this.onToggleJavaScript}
-                  />
-                </Column>
-              </Grid>
-              <NoScript
-                blocked={javascript !== 'allow'}
-                noScriptInfo={noScriptInfo}
-                onSubmit={this.onAllowScriptOriginsOnce}
-                onChangeNoScriptSettings={this.onChangeNoScriptSettings}
-              />
-            </BoxedContent>
-          </ContentToggleArrow>
-        </Column>
-      </Grid>
-    )
-  }
-}
diff --git a/app/components/braveShields/braveShieldsFooter.tsx b/app/components/braveShields/braveShieldsFooter.tsx
deleted file mode 100644
index fe96d25..0000000
--- a/app/components/braveShields/braveShieldsFooter.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/* 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 React from 'react'
-import { Grid, Column } from 'brave-ui/gridSystem'
-import UnstyledButton from 'brave-ui/unstyledButton'
-import { getMessage } from '../../background/api/localeAPI'
-import theme from '../../theme'
-import * as tabsAPI from '../../background/api/tabsAPI'
-
-export interface BraveShieldsStatsProps {
-  tabId: number
-}
-
-export default class BraveShieldsFooter extends React.PureComponent<BraveShieldsStatsProps, {}> {
-  constructor (props: BraveShieldsStatsProps) {
-    super(props)
-    this.openSettings = this.openSettings.bind(this)
-    this.reloadShields = this.reloadShields.bind(this)
-  }
-
-  openSettings () {
-    tabsAPI.createTab({ url: 'chrome://settings' })
-      .catch((err) => console.log(err))
-  }
-
-  reloadShields () {
-    tabsAPI.reloadTab(this.props.tabId, true)
-      .catch((err) => console.log(err))
-  }
-
-  render () {
-    return (
-      <Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
-        <Column size={9} theme={theme.columnStart}>
-          <UnstyledButton
-            theme={theme.noUserSelect}
-            onClick={this.openSettings}
-            text={getMessage('shieldsFooterEditDefault')}
-          />
-        </Column>
-        <Column size={3} theme={theme.columnEnd}>
-          <UnstyledButton
-            onClick={this.reloadShields}
-            theme={theme.noUserSelect}
-            text={getMessage('shieldsFooterReload')}
-          />
-        </Column>
-      </Grid>
-    )
-  }
-}
diff --git a/app/components/braveShields/braveShieldsHeader.tsx b/app/components/braveShields/braveShieldsHeader.tsx
deleted file mode 100644
index d002cfc..0000000
--- a/app/components/braveShields/braveShieldsHeader.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/* 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 React from 'react'
-import { Grid, Column } from 'brave-ui/gridSystem'
-import SwitchButton from 'brave-ui/switchButton'
-import UnstyledButton from 'brave-ui/unstyledButton'
-import TextLabel from 'brave-ui/textLabel'
-import * as shieldActions from '../../types/actions/shieldsPanelActions'
-import { BlockOptions } from '../../types/other/blockTypes'
-import { getMessage } from '../../background/api/localeAPI'
-import theme from '../../theme'
-import { isHttpOrHttps } from '../../helpers/urlUtils'
-
-export interface BraveShieldsHeaderProps {
-  shieldsToggled: shieldActions.ShieldsToggled
-  origin: string
-  hostname: string
-  braveShields: BlockOptions
-}
-
-export default class BraveShieldsHeader extends React.PureComponent<BraveShieldsHeaderProps, {}> {
-  constructor (props: BraveShieldsHeaderProps) {
-    super(props)
-    this.onToggleShields = this.onToggleShields.bind(this)
-    this.onClosePopup = this.onClosePopup.bind(this)
-  }
-
-  onToggleShields (e: HTMLSelectElement) {
-    const { origin } = this.props
-    if (!isHttpOrHttps(origin)) {
-      return
-    }
-    const shieldsOption: BlockOptions = e.target.checked ? 'allow' : 'block'
-    this.props.shieldsToggled(shieldsOption)
-  }
-
-  onClosePopup () {
-    window.close()
-  }
-
-  render () {
-    const { braveShields, hostname } = this.props
-    return (
-      <Grid id='braveShieldsHeader' theme={theme.braveShieldsHeader}>
-        <Column size={4} theme={theme.columnVerticalCenter}>
-          <TextLabel theme={theme.title} text={getMessage('shieldsHeaderShieldsToggle')} />
-        </Column>
-        <Column size={6} theme={theme.columnVerticalCenter}>
-          <SwitchButton
-            id='shieldsToggle'
-            leftText={getMessage('shieldsHeaderToggleLeftPosition')}
-            rightText={getMessage('shieldsHeaderToggleRightPosition')}
-            checked={braveShields !== 'block'}
-            onChange={this.onToggleShields}
-          />
-        </Column>
-        <Column size={2} theme={theme.columnVerticalCenterEnd}>
-          <UnstyledButton
-            theme={theme.closeButton}
-            text='&times;'
-            onClick={this.onClosePopup}
-          />
-        </Column>
-        <Column>
-          <hr style={theme.separator} />
-        </Column>
-        <Column theme={theme.hostnameContent}>
-          <TextLabel text={getMessage('shieldsHeaderForSite')} />
-          <TextLabel id='hostname' theme={theme.hostname} text={hostname} />
-        </Column>
-      </Grid>
-    )
-  }
-}
diff --git a/app/components/braveShields/braveShieldsStats.tsx b/app/components/braveShields/braveShieldsStats.tsx
deleted file mode 100644
index 222f634..0000000
--- a/app/components/braveShields/braveShieldsStats.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/* 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 React from 'react'
-import { Grid, Column } from 'brave-ui/gridSystem'
-import TextLabel from 'brave-ui/textLabel'
-import Paragraph from 'brave-ui/paragraph'
-
-import { BlockOptions } from '../../types/other/blockTypes'
-import { getMessage } from '../../background/api/localeAPI'
-import theme from '../../theme'
-
-export interface BraveShieldsStatsProps {
-  braveShields: BlockOptions
-  adsBlocked: number
-  trackersBlocked: number
-  httpsRedirected: number
-  javascriptBlocked: number
-  fingerprintingBlocked: number
-  adsBlockedResources: Array<string>
-  trackersBlockedResources: Array<string>
-  httpsRedirectedResources: Array<string>
-  javascriptBlockedResources: Array<string>
-  fingerprintingBlockedResources: Array<string>
-}
-
-export interface BraveShieldsStatsState {
-  adsTrackersBlockedDetailsOpen: boolean,
-  httpsRedirectedDetailsOpen: boolean,
-  javascriptBlockedDetailsOpen: boolean,
-  fingerprintingBlockedDetailsOpen: boolean
-}
-
-export default class BraveShieldsStats extends React.Component<BraveShieldsStatsProps, BraveShieldsStatsState> {
-  constructor (props: BraveShieldsStatsProps) {
-    super(props)
-    this.onToggleBlockedResourcesDetails = this.onToggleBlockedResourcesDetails.bind(this)
-
-    // creates a temporary state to switch the toggle of blocked resources details
-    this.state = {
-      adsTrackersBlockedDetailsOpen: false,
-      httpsRedirectedDetailsOpen: false,
-      javascriptBlockedDetailsOpen: false,
-      fingerprintingBlockedDetailsOpen: false
-    }
-  }
-
-  get totalAdsTrackersBlocked (): number {
-    const { adsBlocked, trackersBlocked } = this.props
-    return adsBlocked + trackersBlocked
-  }
-
-  get httpsRedirected (): number {
-    return this.props.httpsRedirected
-  }
-
-  get javascriptBlocked (): number {
-    return this.props.javascriptBlocked
-  }
-
-  get fingerprintingBlocked (): number {
-    return this.props.fingerprintingBlocked
-  }
-
-  get totalAdsTrackersBlockedResources (): Array<string> {
-    const { adsBlockedResources, trackersBlockedResources } = this.props
-    return [ ...adsBlockedResources, ...trackersBlockedResources ]
-  }
-
-  get httpsRedirectedResources (): Array<string> {
-    return this.props.httpsRedirectedResources
-  }
-
-  get javascriptBlockedResources (): Array<string> {
-    return this.props.javascriptBlockedResources
-  }
-
-  get fingerprintingBlockedResources (): Array<string> {
-    return this.props.fingerprintingBlockedResources
-  }
-
-  get blockedResourcesDetailsList () {
-    const {
-      adsTrackersBlockedDetailsOpen,
-      httpsRedirectedDetailsOpen,
-      javascriptBlockedDetailsOpen,
-      fingerprintingBlockedDetailsOpen
-    } = this.state
-
-    if (adsTrackersBlockedDetailsOpen && this.totalAdsTrackersBlocked > 0) {
-      return this.setResourceBlockedItemView(this.totalAdsTrackersBlockedResources)
-    } else if (httpsRedirectedDetailsOpen && this.httpsRedirected > 0) {
-      return this.setResourceBlockedItemView(this.httpsRedirectedResources)
-    } else if (javascriptBlockedDetailsOpen && this.javascriptBlocked > 0) {
-      return this.setResourceBlockedItemView(this.javascriptBlockedResources)
-    } else if (fingerprintingBlockedDetailsOpen && this.fingerprintingBlocked > 0) {
-      return this.setResourceBlockedItemView(this.fingerprintingBlockedResources)
-    } else {
-      return null
-    }
-  }
-
-  setResourceBlockedItemView (resource: Array<string>) {
-    return resource.map((src: string, key: number) =>
-      <Paragraph theme={theme.blockedResourcesStatsText} key={key} text={src} />)
-  }
-
-  onToggleBlockedResourcesDetails (e: any) {
-    const id = e.target.id || ''
-    const {
-      adsTrackersBlockedDetailsOpen,
-      httpsRedirectedDetailsOpen,
-      javascriptBlockedDetailsOpen,
-      fingerprintingBlockedDetailsOpen
-    } = this.state
-
-    this.setState({
-      adsTrackersBlockedDetailsOpen: id.startsWith('totalAdsTrackersBlocked') && !adsTrackersBlockedDetailsOpen,
-      httpsRedirectedDetailsOpen: id.startsWith('httpsRedirected') && !httpsRedirectedDetailsOpen,
-      javascriptBlockedDetailsOpen: id.startsWith('javascriptBlocked') && !javascriptBlockedDetailsOpen,
-      fingerprintingBlockedDetailsOpen: id.startsWith('fingerprintingBlocked') && !fingerprintingBlockedDetailsOpen
-    })
-  }
-
-  render () {
-    const { braveShields } = this.props
-    return (
-      <Grid
-        id='braveShieldsStats'
-        theme={theme.braveShieldsStats}
-        disabled={braveShields === 'block'}
-      >
-        <Column theme={theme.statsNumbers} size={1}>
-          <TextLabel
-            id='totalAdsTrackersBlockedStat'
-            theme={theme.totalAdsTrackersBlockedStat}
-            text={this.totalAdsTrackersBlocked}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='httpsRedirectedStat'
-            theme={theme.httpsRedirectedStat}
-            text={this.httpsRedirected}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='javascriptBlockedStat'
-            theme={theme.javascriptBlockedStat}
-            text={this.javascriptBlocked}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='fingerprintingBlockedStat'
-            theme={theme.fingerprintingBlockedStat}
-            text={this.fingerprintingBlocked}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-        </Column>
-        <Column theme={theme.statsNames} size={11}>
-          <TextLabel
-            id='totalAdsTrackersBlockedText'
-            theme={theme.totalAdsTrackersBlockedText}
-            text={getMessage('shieldsStatsAdsTrackersBlocked')}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='httpsRedirectedText'
-            theme={theme.httpsRedirectedText}
-            text={getMessage('shieldsStatsHttpsUpgrades')}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='javascriptBlockedText'
-            theme={theme.javascriptBlockedText}
-            text={getMessage('shieldsStatsScriptsBlocked')}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-          <TextLabel
-            id='fingerprintingBlockedText'
-            theme={theme.fingerprintingBlockedText}
-            text={getMessage('shieldsFingerPrintingBlocked')}
-            onClick={this.onToggleBlockedResourcesDetails}
-          />
-        </Column>
-        <Column id='blockedResourcesStats' theme={theme.blockedResourcesStats} size={12}>
-          {this.blockedResourcesDetailsList}
-        </Column>
-      </Grid>
-    )
-  }
-}
diff --git a/app/components/braveShields/footer.tsx b/app/components/braveShields/footer.tsx
new file mode 100644
index 0000000..a09dc08
--- /dev/null
+++ b/app/components/braveShields/footer.tsx
@@ -0,0 +1,28 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import { MainFooterLinkFlex, LinkIcon } from 'brave-ui/features/shields'
+
+// Utils
+import * as tabsAPI from '../../background/api/tabsAPI'
+import { getMessage } from '../../background/api/localeAPI'
+
+export default class ShieldsFooter extends React.PureComponent<{}, {}> {
+  openSettings = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    tabsAPI.createTab({ url: 'chrome://settings' })
+      .catch((err) => console.log(err))
+  }
+  render () {
+    return (
+      <MainFooterLinkFlex id='braveShieldsFooter' href='#' onClick={this.openSettings}>
+        <span>{getMessage('editDefaults')}</span>
+        <LinkIcon />
+      </MainFooterLinkFlex>
+    )
+  }
+}
diff --git a/app/components/braveShields/header.tsx b/app/components/braveShields/header.tsx
new file mode 100644
index 0000000..fbecb3a
--- /dev/null
+++ b/app/components/braveShields/header.tsx
@@ -0,0 +1,93 @@
+// /* 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 React from 'react'
+
+// Feature-specific components
+import {
+  Header,
+  MainToggleFlex,
+  Description,
+  SiteInfoCard,
+  DisabledTextGrid,
+  Label,
+  Highlight,
+  UnHighlight,
+  Toggle,
+  ShieldIcon,
+  MainSiteInfoGrid,
+  ShieldIconFlex
+} from 'brave-ui/features/shields'
+
+// Types
+import { Tab } from '../../types/state/shieldsPannelState'
+import { BlockOptions } from '../../types/other/blockTypes'
+
+// Utils
+import * as shieldActions from '../../types/actions/shieldsPanelActions'
+import { getMessage } from '../../background/api/localeAPI'
+import { isHttpOrHttps } from '../../helpers/urlUtils'
+import { getFavicon, getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
+
+export interface Props {
+  tabData: Tab
+  shieldsToggled: shieldActions.ShieldsToggled
+}
+
+export default class ShieldsHeader extends React.PureComponent<Props, {}> {
+  onToggleShields = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { origin } = this.props.tabData
+    if (!isHttpOrHttps(origin)) {
+      return
+    }
+    const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block'
+    this.props.shieldsToggled(shieldsOption)
+  }
+
+  renderEnabledContent = () => {
+    return (
+      <MainSiteInfoGrid>
+        <Highlight enabled={true} size='large'>{getTotalResourcesBlocked(this.props.tabData)}</Highlight>
+        <Label size='medium'>{getMessage('totalBlocked')}</Label>
+      </MainSiteInfoGrid>
+    )
+  }
+
+  renderDisabledContent = () => {
+    return (
+      <DisabledTextGrid>
+        <ShieldIconFlex>
+          <ShieldIcon />
+        </ShieldIconFlex>
+        <Description enabled={false}>{getMessage('disabledMessage')}</Description>
+      </DisabledTextGrid>
+    )
+  }
+
+  render () {
+    const { braveShields, hostname, url } = this.props.tabData
+    const enabled = braveShields !== 'block'
+
+    return (
+      <Header id='braveShieldsHeader' enabled={enabled}>
+        <MainToggleFlex enabled={enabled}>
+          <Label size='medium'>
+            {getMessage('shields')} <Highlight enabled={enabled}> {enabled ? getMessage('up') : getMessage('down')}
+            </Highlight>
+            <UnHighlight> {getMessage('forThisSite')}</UnHighlight>
+          </Label>
+          <Toggle id='mainToggle' checked={enabled} onChange={this.onToggleShields} size='large' />
+        </MainToggleFlex>
+        {enabled ? <Description enabled={true}>{getMessage('enabledMessage')}</Description> : null}
+        <SiteInfoCard>
+          <MainSiteInfoGrid>
+            <img src={getFavicon(url)} />
+            <Label id='hostname' size='large'>{hostname}</Label>
+          </MainSiteInfoGrid>
+          {enabled ? this.renderEnabledContent() : this.renderDisabledContent()}
+        </SiteInfoCard>
+      </Header>
+    )
+  }
+}
diff --git a/app/components/braveShields/interfaceControls.tsx b/app/components/braveShields/interfaceControls.tsx
new file mode 100644
index 0000000..ce717fd
--- /dev/null
+++ b/app/components/braveShields/interfaceControls.tsx
@@ -0,0 +1,165 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import {
+  ShowMoreIcon,
+  Toggle,
+  StatFlex,
+  ResourcesSwitchLabel,
+  EmptyButton,
+  ToggleFlex,
+  ToggleGrid
+} from 'brave-ui/features/shields'
+
+// Component groups
+import BlockedResources from './blockedResources/blockedResources'
+import StaticList from './blockedResources/staticList'
+
+// Types
+import { BlockOptions } from '../../types/other/blockTypes'
+
+// Utils
+import { getMessage } from '../../background/api/localeAPI'
+import * as shieldActions from '../../types/actions/shieldsPanelActions'
+import { totalAdsTrackersBlocked } from '../../helpers/shieldsUtils'
+
+export interface Props {
+  braveShields: BlockOptions
+  url: string
+  hostname: string
+  ads: BlockOptions
+  adsBlocked: number
+  adsBlockedResources: Array<string>
+  blockAdsTrackers: shieldActions.BlockAdsTrackers
+  trackers: BlockOptions
+  trackersBlocked: number
+  trackersBlockedResources: Array<string>
+  httpsRedirected: number
+  httpUpgradableResources: BlockOptions
+  httpsRedirectedResources: Array<string>
+  httpsEverywhereToggled: shieldActions.HttpsEverywhereToggled
+}
+
+interface State {
+  openTotalAdsTrackersBlockedList: boolean,
+  openConnectionsEncryptedList: boolean
+}
+
+export default class ShieldsInterfaceControls extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      openTotalAdsTrackersBlockedList: false,
+      openConnectionsEncryptedList: false
+    }
+  }
+
+  get totalAdsTrackersBlocked (): number {
+    const { adsBlocked, trackersBlocked } = this.props
+    return totalAdsTrackersBlocked(adsBlocked, trackersBlocked)
+  }
+
+  get totalAdsTrackersBlockedList (): Array<string> {
+    const { adsBlockedResources, trackersBlockedResources } = this.props
+    return Object.assign(adsBlockedResources, trackersBlockedResources)
+  }
+
+  onChangeBlockAds = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target) {
+      return
+    }
+    const shoudEnableAdsTracks = event.target.checked ? 'allow' : 'block'
+    this.props.blockAdsTrackers(shoudEnableAdsTracks)
+  }
+
+  onChangeConnectionsEncrypted = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target) {
+      return
+    }
+    const shouldEnableHttpsEverywhere = event.target.checked ? 'allow' : 'block'
+    this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
+  }
+
+  onToggleTotalAdsTrackersBlocked = () => {
+    this.setState({ openTotalAdsTrackersBlockedList: !this.state.openTotalAdsTrackersBlockedList })
+  }
+
+  onToggleConnectionsEncrypted = () => {
+    this.setState({ openConnectionsEncryptedList: !this.state.openConnectionsEncryptedList })
+  }
+
+  renderTotalAdsTrackersBlockedList = (url: string, hostname: string, onToggle: () => void) => {
+    return (
+      <BlockedResources
+        url={url}
+        hostname={hostname}
+        title={getMessage('blockAds')}
+        onToggle={onToggle}
+        stats={this.totalAdsTrackersBlocked}
+      >
+        <StaticList onClickDismiss={onToggle} list={this.totalAdsTrackersBlockedList} />
+      </BlockedResources>
+    )
+  }
+
+  renderConnectionsEncryptedList = (url: string, hostname: string, onToggle: () => void) => {
+    const { httpsRedirected, httpsRedirectedResources } = this.props
+    return (
+      <BlockedResources
+        url={url}
+        hostname={hostname}
+        title={getMessage('connectionsEncrypted')}
+        onToggle={onToggle}
+        stats={httpsRedirected}
+      >
+        <StaticList onClickDismiss={onToggle} list={httpsRedirectedResources} />
+      </BlockedResources>
+    )
+  }
+
+  render () {
+    const { braveShields, url, hostname, ads, trackers, httpsRedirected, httpUpgradableResources } = this.props
+    const { openTotalAdsTrackersBlockedList, openConnectionsEncryptedList } = this.state
+
+    const enabled = braveShields !== 'block'
+    const blockAdsOption = ads !== 'allow' && trackers !== 'allow'
+    const connectionsEncrypted = httpUpgradableResources !== 'allow'
+
+    if (!enabled) {
+      return null
+    }
+
+    return (
+      <div id='braveShieldsInterfaceControls'>
+        {/* ads toggle */}
+        <ToggleGrid>
+          <EmptyButton disabled={this.totalAdsTrackersBlocked === 0} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
+          <StatFlex id='blockAdsStat' onClick={this.onToggleTotalAdsTrackersBlocked}>{this.totalAdsTrackersBlocked}</StatFlex>
+          <ResourcesSwitchLabel onClick={this.onToggleTotalAdsTrackersBlocked}>{getMessage('blockAds')}</ResourcesSwitchLabel>
+          <ToggleFlex><Toggle id='blockAds' checked={blockAdsOption} onChange={this.onChangeBlockAds} /></ToggleFlex>
+        </ToggleGrid>
+        {
+          openTotalAdsTrackersBlockedList
+            ? this.renderTotalAdsTrackersBlockedList(url, hostname, this.onToggleTotalAdsTrackersBlocked)
+            : null
+        }
+        {/* connections encrypted toggle */}
+        <ToggleGrid>
+          <EmptyButton disabled={httpsRedirected === 0} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
+          <StatFlex id='connectionsEncryptedStat' onClick={this.onToggleConnectionsEncrypted}>{httpsRedirected}</StatFlex>
+          <ResourcesSwitchLabel onClick={this.onToggleConnectionsEncrypted}>{getMessage('connectionsEncrypted')}</ResourcesSwitchLabel>
+          <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
+        </ToggleGrid>
+        {
+          openConnectionsEncryptedList
+            ? this.renderConnectionsEncryptedList(url, hostname, this.onToggleConnectionsEncrypted)
+            : null
+        }
+      </div>
+    )
+  }
+}
diff --git a/app/components/braveShields/privacyControls.tsx b/app/components/braveShields/privacyControls.tsx
new file mode 100644
index 0000000..d43a771
--- /dev/null
+++ b/app/components/braveShields/privacyControls.tsx
@@ -0,0 +1,209 @@
+/* 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 React from 'react'
+
+// Feature-specific components
+import {
+  SelectBox,
+  StatFlex,
+  ClickableEmptySpace,
+  EmptyButton,
+  ShowMoreIcon,
+  SelectGrid
+} from 'brave-ui/features/shields'
+
+// Component groups
+import BlockedResources from './blockedResources/blockedResources'
+import StaticList from './blockedResources/staticList'
+import ScriptsList from './blockedResources/scriptsList'
+
+// Types
+import { BlockOptions, BlockCookiesOptions, BlockJSOptions, BlockFPOptions } from '../../types/other/blockTypes'
+import { NoScriptInfo } from '../../types/other/noScriptInfo'
+
+// Utils
+import * as shieldActions from '../../types/actions/shieldsPanelActions'
+import { getMessage } from '../../background/api/localeAPI'
+
+export interface Props {
+  url: string
+  hostname: string
+  origin: string
+  braveShields: BlockOptions
+  fingerprinting: BlockFPOptions
+  fingerprintingBlocked: number
+  blockFingerprinting: shieldActions.BlockFingerprinting
+  fingerprintingBlockedResources: Array<string>
+  javascript: BlockJSOptions
+  javascriptBlocked: number
+  blockJavaScript: shieldActions.BlockJavaScript
+  javascriptBlockedResources: Array<string>
+  noScriptInfo: NoScriptInfo
+  changeAllNoScriptSettings: shieldActions.ChangeAllNoScriptSettings
+  changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
+  allowScriptOriginsOnce: shieldActions.AllowScriptOriginsOnce
+  blockCookies: shieldActions.BlockCookies
+  cookies: BlockCookiesOptions
+}
+
+interface State {
+  openScriptsBlockedList: boolean
+  openDeviceRecognitionList: boolean
+}
+
+export default class PrivacyControls extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      openScriptsBlockedList: false,
+      openDeviceRecognitionList: false
+    }
+  }
+
+  onToggleScriptsBlocked = () => {
+    this.setState({ openScriptsBlockedList: !this.state.openScriptsBlockedList })
+  }
+
+  onToggleDeviceRecognition = () => {
+    this.setState({ openDeviceRecognitionList: !this.state.openDeviceRecognitionList })
+  }
+
+  onChangeBlockCookies = (event: React.ChangeEvent<any>) => {
+    if (!event.target) {
+      return
+    }
+    this.props.blockCookies(event.target.value)
+  }
+
+  onChangeBlockScripts = (event: React.ChangeEvent<any>) => {
+    if (!event.target) {
+      return
+    }
+    this.props.blockJavaScript(event.target.value)
+  }
+
+  onChangeBlockDeviceRecognition = (event: React.ChangeEvent<any>) => {
+    if (!event.target) {
+      return
+    }
+    this.props.blockFingerprinting(event.target.value)
+  }
+
+  renderScriptsBlockedList = () => {
+    const {
+      url,
+      hostname,
+      origin,
+      noScriptInfo,
+      javascript,
+      blockJavaScript,
+      changeNoScriptSettings,
+      allowScriptOriginsOnce,
+      changeAllNoScriptSettings
+    } = this.props
+    return (
+      <BlockedResources
+        dynamic={true}
+        url={url}
+        hostname={hostname}
+        title={getMessage('scriptsOnThisSite')}
+        onToggle={this.onToggleScriptsBlocked}
+        stats={undefined}
+      >
+        <ScriptsList
+          origin={origin}
+          onClickDismiss={this.onToggleScriptsBlocked}
+          changeNoScriptSettings={changeNoScriptSettings}
+          allowScriptOriginsOnce={allowScriptOriginsOnce}
+          noScriptInfo={noScriptInfo}
+          changeAllNoScriptSettings={changeAllNoScriptSettings}
+          javascript={javascript}
+          blockJavaScript={blockJavaScript}
+        />
+      </BlockedResources>
+    )
+  }
+
+  renderDeviceRecognitionList = () => {
+    const { url, hostname, fingerprintingBlocked, fingerprintingBlockedResources } = this.props
+    return (
+      <BlockedResources
+        url={url}
+        hostname={hostname}
+        title={getMessage('deviceRecognitionAttempts')}
+        onToggle={this.onToggleDeviceRecognition}
+        stats={fingerprintingBlocked}
+      >
+        <StaticList onClickDismiss={this.onToggleDeviceRecognition} list={fingerprintingBlockedResources} />
+      </BlockedResources>
+    )
+  }
+
+  render () {
+    const {
+      braveShields,
+      fingerprinting,
+      fingerprintingBlocked,
+      javascript,
+      javascriptBlocked,
+      cookies
+    } = this.props
+    const { openScriptsBlockedList, openDeviceRecognitionList } = this.state
+    const enabled = braveShields !== 'block'
+
+    if (!enabled) {
+      return null
+    }
+
+    return (
+      <div id='braveShieldsPrivacyControls'>
+        {/* cookies select */}
+        <SelectGrid hasUserInteraction={false}>
+          <EmptyButton />
+          <StatFlex />
+          <SelectBox id='blockCookies' value={cookies} onChange={this.onChangeBlockCookies}>
+            <option value='block_third_party'>{getMessage('block3partyCookies')}</option>
+            <option value='block'>{getMessage('blockAllCookies')}</option>
+            <option value='allow'>{getMessage('allowAllCookies')}</option>
+          </SelectBox>
+          <ClickableEmptySpace />
+        </SelectGrid>
+
+        {/* scripts select */}
+        <SelectGrid hasUserInteraction={true}>
+          <EmptyButton disabled={javascriptBlocked === 0} onClick={this.onToggleScriptsBlocked}><ShowMoreIcon /></EmptyButton>
+          <StatFlex id='blockScriptsStat' onClick={this.onToggleScriptsBlocked}>{javascriptBlocked}</StatFlex>
+          <SelectBox id='blockScripts' value={javascript} onChange={this.onChangeBlockScripts}>
+            <option value='block'>{getMessage('blockAllScriptsOrigins')}</option>
+            <option value='allow'>{getMessage('allowAllScripts')}</option>
+          </SelectBox>
+          <ClickableEmptySpace onClick={this.onToggleScriptsBlocked} />
+          {
+            openScriptsBlockedList
+              ? this.renderScriptsBlockedList()
+              : null
+          }
+        </SelectGrid>
+
+        {/* fingerprinting select */}
+        <SelectGrid hasUserInteraction={true}>
+          <EmptyButton disabled={fingerprintingBlocked === 0} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
+          <StatFlex id='blockFingerprintingStat' onClick={this.onToggleDeviceRecognition}>{fingerprintingBlocked}</StatFlex>
+          <SelectBox id='blockFingerprinting' value={fingerprinting} onChange={this.onChangeBlockDeviceRecognition}>
+            <option value='block_third_party'>{getMessage('block3partyFingerprinting')}</option>
+            <option value='block'>{getMessage('blockAllFingerprinting')}</option>
+            <option value='allow'>{getMessage('allowAllFingerprinting')}</option>
+          </SelectBox>
+          <ClickableEmptySpace onClick={this.onToggleDeviceRecognition} />
+          {
+            openDeviceRecognitionList
+              ? this.renderDeviceRecognitionList()
+              : null
+          }
+        </SelectGrid>
+      </div>
+    )
+  }
+}
diff --git a/app/components/noScript/noScript.tsx b/app/components/noScript/noScript.tsx
deleted file mode 100644
index 84de0ba..0000000
--- a/app/components/noScript/noScript.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* 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 React from 'react'
-import PushButton from 'brave-ui/pushButton'
-import TextLabel from 'brave-ui/textLabel'
-import { Column, Grid } from 'brave-ui/gridSystem'
-import SwitchButton from 'brave-ui/switchButton'
-import { getMessage } from '../../background/api/localeAPI'
-import { NoScriptInfo } from '../../types/other/noScriptInfo'
-import theme from '../../theme'
-
-export interface NoScriptProps {
-  blocked: boolean
-  noScriptInfo: NoScriptInfo
-  onSubmit: (origins: string[]) => void
-  onChangeNoScriptSettings: (origin: string) => void
-}
-
-export default class NoScript extends React.PureComponent<NoScriptProps, {}> {
-  constructor (props: NoScriptProps) {
-    super(props)
-    this.onChangeOriginSettings = this.onChangeOriginSettings.bind(this)
-    this.onClick = this.onClick.bind(this)
-  }
-
-  onChangeOriginSettings (e: any) {
-    this.props.onChangeNoScriptSettings(e.target.id)
-  }
-
-  onClick () {
-    const noScriptInfo = this.props.noScriptInfo
-    this.props.onSubmit(
-      Object.keys(noScriptInfo).filter(key => !noScriptInfo[key].willBlock))
-  }
-
-  render () {
-    const originSwitches = Object.keys(this.props.noScriptInfo).map((origin) => (
-      <Column key={origin}>
-        <SwitchButton
-          id={origin}
-          checked={this.props.noScriptInfo[origin].willBlock}
-          rightText={origin}
-          onChange={this.onChangeOriginSettings}
-        />
-      </Column>))
-
-    return (
-      this.props.blocked && Object.keys(this.props.noScriptInfo).length
-      ?
-      (
-        <div>
-          <hr style={theme.separator} />
-          <Grid id='noScript' theme={theme.noScript}>
-            <Column>
-              <TextLabel text={getMessage('noScriptSwitches')} />
-            </Column>
-            {originSwitches}
-            <Column theme={theme.columnEnd}>
-              <PushButton id='apply' onClick={this.onClick}>
-                {getMessage('noScriptApplyOnce')}
-              </PushButton>
-            </Column>
-          </Grid>
-        </div>
-      )
-      : null
-    )
-  }
-}
diff --git a/app/constants/shieldsPanelTypes.ts b/app/constants/shieldsPanelTypes.ts
index ef9747f..fcf1422 100644
--- a/app/constants/shieldsPanelTypes.ts
+++ b/app/constants/shieldsPanelTypes.ts
@@ -13,3 +13,4 @@ export const BLOCK_FINGERPRINTING = 'BLOCK_FINGERPRINTING'
 export const BLOCK_COOKIES = 'BLOCK_COOKIES'
 export const ALLOW_SCRIPT_ORIGINS_ONCE = 'ALLOW_SCRIPT_ORIGINS_ONCE'
 export const CHANGE_NO_SCRIPT_SETTINGS = 'CHANGE_NO_SCRIPT_SETTINGS'
+export const CHANGE_ALL_NO_SCRIPT_SETTINGS = 'CHANGE_ALL_NO_SCRIPT_SETTINGS'
diff --git a/app/helpers/shieldsUtils.ts b/app/helpers/shieldsUtils.ts
new file mode 100644
index 0000000..fbd7f4d
--- /dev/null
+++ b/app/helpers/shieldsUtils.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/. */
+
+import { Tab } from '../types/state/shieldsPannelState'
+
+export const getTotalResourcesBlocked = (tabData: Partial<Tab>) => {
+  if (!tabData) {
+    return 0
+  }
+  return (
+    tabData.adsBlocked! +
+    tabData.trackersBlocked! +
+    tabData.javascriptBlocked! +
+    tabData.fingerprintingBlocked! +
+    tabData.httpsRedirected!
+  )
+}
+
+export const totalAdsTrackersBlocked = (adsBlocked: number, trackersBlocked: number) => {
+  return adsBlocked + trackersBlocked
+}
+
+export const getFavicon = (url: string) => {
+  return `chrome://favicon/size/16@1x/${ url }`
+}
diff --git a/app/manifest.dev.json b/app/manifest.dev.json
index 5fa33e7..8ad4c3b 100644
--- a/app/manifest.dev.json
+++ b/app/manifest.dev.json
@@ -34,8 +34,8 @@
       "all_frames": true
     }
   ],
-  "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation", "contextMenus", "cookies", "*://*/*" ],
-  "content_security_policy": "default-src 'self'; script-src 'self' http://localhost:3000 https://localhost:3000 'unsafe-eval'; connect-src http://localhost:3000 https://localhost:3000; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:;",
+  "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation", "contextMenus", "cookies", "*://*/*", "chrome://favicon/*" ],
+  "content_security_policy": "default-src 'self'; font-src 'self' data: http://localhost:3000 https://localhost:3000; script-src 'self' http://localhost:3000 https://localhost:3000 chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/ 'unsafe-eval'; connect-src http://localhost:3000 https://localhost:3000; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data: http://localhost:3000 https://localhost:3000 chrome://favicon/;",
   "incognito": "split",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAupOLMy5Fd4dCSOtjcApsAQOnuBdTs+OvBVt/3P93noIrf068x0xXkvxbn+fpigcqfNamiJ5CjGyfx9zAIs7zcHwbxjOw0Uih4SllfgtK+svNTeE0r5atMWE0xR489BvsqNuPSxYJUmW28JqhaSZ4SabYrRx114KcU6ko7hkjyPkjQa3P+chStJjIKYgu5tWBiMJp5QVLelKoM+xkY6S7efvJ8AfajxCViLGyDQPDviGr2D0VvIBob0D1ZmAoTvYOWafcNCaqaejPDybFtuLFX3pZBqfyOCyyzGhucyCmfBXJALKbhjRAqN5glNsUmGhhPK87TuGATQfVuZtenMvXMQIDAQAB"
 }
diff --git a/app/manifest.prod.json b/app/manifest.prod.json
index 0f95270..ec8d265 100644
--- a/app/manifest.prod.json
+++ b/app/manifest.prod.json
@@ -34,8 +34,8 @@
       "all_frames": true
     }
   ],
-  "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation", "contextMenus", "cookies", "*://*/*" ],
-  "content_security_policy": "default-src 'self'; script-src 'self'; style-src 'unsafe-inline'; img-src 'self' data:;",
+  "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation", "contextMenus", "cookies", "*://*/*", "chrome://favicon/*" ],
+  "content_security_policy": "default-src 'self'; font-src 'self' data:; script-src 'self'; style-src 'unsafe-inline'; img-src 'self' data: chrome://favicon/;",
   "incognito": "split",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAupOLMy5Fd4dCSOtjcApsAQOnuBdTs+OvBVt/3P93noIrf068x0xXkvxbn+fpigcqfNamiJ5CjGyfx9zAIs7zcHwbxjOw0Uih4SllfgtK+svNTeE0r5atMWE0xR489BvsqNuPSxYJUmW28JqhaSZ4SabYrRx114KcU6ko7hkjyPkjQa3P+chStJjIKYgu5tWBiMJp5QVLelKoM+xkY6S7efvJ8AfajxCViLGyDQPDviGr2D0VvIBob0D1ZmAoTvYOWafcNCaqaejPDybFtuLFX3pZBqfyOCyyzGhucyCmfBXJALKbhjRAqN5glNsUmGhhPK87TuGATQfVuZtenMvXMQIDAQAB"
 }
diff --git a/app/state/shieldsPanelState.ts b/app/state/shieldsPanelState.ts
index 7eb2ba1..80daa86 100644
--- a/app/state/shieldsPanelState.ts
+++ b/app/state/shieldsPanelState.ts
@@ -118,6 +118,17 @@ export const resetNoScriptInfo: shieldState.ResetNoScriptInfo = (state, tabId, n
   return { ...state, tabs }
 }
 
+export const changeAllNoScriptSettings: shieldState.ChangeAllNoScriptSettings = (state, tabId, newOrigin, shouldBlock) => {
+  const tabs: shieldState.Tabs = { ...state.tabs }
+  if (newOrigin !== tabs[tabId].origin) { // navigate away
+    tabs[tabId].noScriptInfo = {}
+  }
+  Object.keys(tabs[tabId].noScriptInfo).map(key => {
+    tabs[tabId].noScriptInfo[key].willBlock = shouldBlock
+  })
+  return { ...state, tabs }
+}
+
 export const resetBlockingStats: shieldState.ResetBlockingStats = (state, tabId) => {
   const tabs: shieldState.Tabs = { ...state.tabs }
   tabs[tabId] = { ...tabs[tabId], ...{ adsBlocked: 0, trackersBlocked: 0, httpsRedirected: 0, javascriptBlocked: 0, fingerprintingBlocked: 0 } }
diff --git a/app/types/actions/shieldsPanelActions.ts b/app/types/actions/shieldsPanelActions.ts
index 3692fc5..7da6060 100644
--- a/app/types/actions/shieldsPanelActions.ts
+++ b/app/types/actions/shieldsPanelActions.ts
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as types from '../constants/shieldsPanelTypes'
-import { BlockTypes, BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../other/blockTypes'
+import { BlockTypes, BlockOptions, BlockFPOptions, BlockJSOptions, BlockCookiesOptions } from '../other/blockTypes'
 
 export interface ShieldDetails {
   id: number
@@ -87,19 +87,21 @@ export interface ControlsToggled {
 }
 
 interface HttpsEverywhereToggledReturn {
-  type: types.HTTPS_EVERYWHERE_TOGGLED
+  type: types.HTTPS_EVERYWHERE_TOGGLED,
+  setting: BlockOptions
 }
 
 export interface HttpsEverywhereToggled {
-  (): HttpsEverywhereToggledReturn
+  (setting: BlockOptions): HttpsEverywhereToggledReturn
 }
 
-interface JavascriptToggledReturn {
-  type: types.JAVASCRIPT_TOGGLED
+interface BlockJavaScriptReturn {
+  type: types.JAVASCRIPT_TOGGLED,
+  setting: BlockJSOptions
 }
 
-export interface JavascriptToggled {
-  (): JavascriptToggledReturn
+export interface BlockJavaScript {
+  (setting: BlockJSOptions): BlockJavaScriptReturn
 }
 
 interface AllowScriptOriginsOnceReturn {
@@ -120,6 +122,16 @@ export interface ChangeNoScriptSettings {
   (origin: string): ChangeNoScriptSettingsReturn
 }
 
+interface ChangeAllNoScriptSettingsReturn {
+  type: types.CHANGE_ALL_NO_SCRIPT_SETTINGS,
+  origin: string,
+  shouldBlock: boolean
+}
+
+export interface ChangeAllNoScriptSettings {
+  (origin: string, shouldBlock: boolean): ChangeAllNoScriptSettingsReturn
+}
+
 export type shieldPanelActions =
   ShieldsPanelDataUpdatedReturn |
   ShieldsToggledReturn |
@@ -127,8 +139,9 @@ export type shieldPanelActions =
   BlockAdsTrackersReturn |
   ControlsToggledReturn |
   HttpsEverywhereToggledReturn |
-  JavascriptToggledReturn |
+  BlockJavaScriptReturn |
   BlockFingerprintingReturn |
   BlockCookiesReturn |
   AllowScriptOriginsOnceReturn |
-  ChangeNoScriptSettingsReturn
+  ChangeNoScriptSettingsReturn |
+  ChangeAllNoScriptSettingsReturn
diff --git a/app/types/constants/shieldsPanelTypes.ts b/app/types/constants/shieldsPanelTypes.ts
index d532b30..a8571f6 100644
--- a/app/types/constants/shieldsPanelTypes.ts
+++ b/app/types/constants/shieldsPanelTypes.ts
@@ -15,3 +15,4 @@ export type BLOCK_FINGERPRINTING = typeof types.BLOCK_FINGERPRINTING
 export type BLOCK_COOKIES = typeof types.BLOCK_COOKIES
 export type ALLOW_SCRIPT_ORIGINS_ONCE = typeof types.ALLOW_SCRIPT_ORIGINS_ONCE
 export type CHANGE_NO_SCRIPT_SETTINGS = typeof types.CHANGE_NO_SCRIPT_SETTINGS
+export type CHANGE_ALL_NO_SCRIPT_SETTINGS = typeof types.CHANGE_ALL_NO_SCRIPT_SETTINGS
diff --git a/app/types/other/blockTypes.ts b/app/types/other/blockTypes.ts
index 3503d66..9ccd5c4 100644
--- a/app/types/other/blockTypes.ts
+++ b/app/types/other/blockTypes.ts
@@ -6,3 +6,4 @@ export type BlockTypes = 'ads' | 'trackers' | 'httpUpgradableResources' | 'javas
 export type BlockOptions = 'allow' | 'block'
 export type BlockFPOptions = 'allow' | 'block' | 'block_third_party'
 export type BlockCookiesOptions = 'allow' | 'block' | 'block_third_party'
+export type BlockJSOptions = 'allow' | 'block'
diff --git a/app/types/state/shieldsPannelState.ts b/app/types/state/shieldsPannelState.ts
index 1990e03..36accaa 100644
--- a/app/types/state/shieldsPannelState.ts
+++ b/app/types/state/shieldsPannelState.ts
@@ -88,3 +88,7 @@ export interface ChangeNoScriptSettings {
 export interface ResetNoScriptInfo {
   (state: State, tabId: number, newOrigin: string): State
 }
+
+export interface ChangeAllNoScriptSettings {
+  (state: State, tabId: number, newOrigin: string, shouldBlock: boolean): State
+}
diff --git a/app/views/braveShieldsPanel.pug b/app/views/braveShieldsPanel.pug
index b5aee0f..c5f2cbe 100644
--- a/app/views/braveShieldsPanel.pug
+++ b/app/views/braveShieldsPanel.pug
@@ -8,7 +8,7 @@ html
     link(rel='stylesheet', href=env == 'prod' ? '/bravelizer.css' : 'chrome-extension://mnojpmjdmbbfmejpflffifhffcmidifd/bravelizer.css')
     style.
       body {
-        width: 280px;
+        width: 330px;
       }
 
   body
diff --git a/package-lock.json b/package-lock.json
index d9f71a0..5c9309b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@sinonjs/formatio": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
       "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
       "dev": true,
       "requires": {
@@ -24,7 +24,7 @@
     },
     "@types/assert": {
       "version": "0.0.31",
-      "resolved": "http://registry.npmjs.org/@types/assert/-/assert-0.0.31.tgz",
+      "resolved": "https://registry.npmjs.org/@types/assert/-/assert-0.0.31.tgz",
       "integrity": "sha1-0fcFlactAlVbfs0o60xo8baRjW0=",
       "dev": true
     },
@@ -100,7 +100,7 @@
     },
     "@types/filewriter": {
       "version": "0.0.28",
-      "resolved": "http://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.28.tgz",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.28.tgz",
       "integrity": "sha1-wFTor02d11205jq8dviFFocU1LM=",
       "dev": true
     },
@@ -127,12 +127,19 @@
       "integrity": "sha512-SL6KhfM7PTqiFmbCW3eVNwVBZ+88Mrzbuvn9olPsfv43mbiWaFY+nRcz/TGGku0/lc2FepdMbImdMY1JrQ+zbw==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.6.tgz",
+      "integrity": "sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==",
+      "dev": true
+    },
     "@types/react": {
-      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
-      "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
+      "version": "16.4.16",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.16.tgz",
+      "integrity": "sha512-lxyoipLWweAnLnSsV4Ho2NAZTKKmxeYgkTQ6PaDiPDU9JJBUY2zJVVGiK1smzYv8+ZgbqEmcm5xM74GCpunSEA==",
       "dev": true,
       "requires": {
+        "@types/prop-types": "*",
         "csstype": "^2.2.0"
       }
     },
@@ -432,6 +439,12 @@
         "uri-js": "^4.2.2"
       }
     },
+    "ajv-errors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz",
+      "integrity": "sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk=",
+      "dev": true
+    },
     "ajv-keywords": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
@@ -811,7 +824,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -1094,7 +1107,7 @@
     },
     "babel-plugin-add-module-exports": {
       "version": "0.2.1",
-      "resolved": "http://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
       "integrity": "sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU=",
       "dev": true
     },
@@ -1118,79 +1131,79 @@
     },
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
       "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
       "dev": true
     },
     "babel-plugin-syntax-async-generators": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz",
       "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=",
       "dev": true
     },
     "babel-plugin-syntax-class-constructor-call": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz",
       "integrity": "sha1-nLnTn+Q8hgC+yBRkVt3L1OGnZBY=",
       "dev": true
     },
     "babel-plugin-syntax-class-properties": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
       "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
       "dev": true
     },
     "babel-plugin-syntax-decorators": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
       "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
       "dev": true
     },
     "babel-plugin-syntax-do-expressions": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz",
       "integrity": "sha1-V0d1YTmqJtOQ0JQQsDdEugfkeW0=",
       "dev": true
     },
     "babel-plugin-syntax-dynamic-import": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
       "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
       "dev": true
     },
     "babel-plugin-syntax-exponentiation-operator": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
       "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
       "dev": true
     },
     "babel-plugin-syntax-export-extensions": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz",
       "integrity": "sha1-cKFITw+QiaToStRLrDU8lbmxJyE=",
       "dev": true
     },
     "babel-plugin-syntax-flow": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
       "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=",
       "dev": true
     },
     "babel-plugin-syntax-function-bind": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz",
       "integrity": "sha1-SMSV8Xe98xqYHnMvVa3AvdJgH0Y=",
       "dev": true
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
       "dev": true
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
       "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
       "dev": true
     },
@@ -1983,7 +1996,7 @@
     },
     "bl": {
       "version": "1.2.2",
-      "resolved": "http://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
       "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
       "dev": true,
       "requires": {
@@ -2092,12 +2105,12 @@
       }
     },
     "brave-ui": {
-      "version": "0.10.13",
-      "resolved": "https://registry.npmjs.org/brave-ui/-/brave-ui-0.10.13.tgz",
-      "integrity": "sha512-Nz3dryTYYl/zsdgJnLzgmnMQr17zDtMTFsc9QVHqJqFmDY/lZEP4Cp/ILKgPKZHAkl3MloN/2L5q5ksR/dr7iQ==",
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/brave-ui/-/brave-ui-0.30.3.tgz",
+      "integrity": "sha512-gcuZaaXC3HKR7yAXnqvj2aZr5nk3NQThsjZ5gm02pm0dc/7KyxlC+ePVgkB6iSDXIgvaDvuxxLerWY34GbCXiQ==",
       "requires": {
         "emptykit.css": "^1.0.1",
-        "styled-components": "^3.2.6"
+        "styled-components": "^3.2.5"
       }
     },
     "brorand": {
@@ -2120,7 +2133,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -2157,7 +2170,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -2475,7 +2488,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -2589,7 +2602,7 @@
     },
     "color": {
       "version": "0.11.4",
-      "resolved": "http://registry.npmjs.org/color/-/color-0.11.4.tgz",
+      "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz",
       "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
       "dev": true,
       "requires": {
@@ -2805,7 +2818,7 @@
     },
     "core-js": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
       "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
     "core-util-is": {
@@ -2891,7 +2904,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -2904,7 +2917,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -2984,13 +2997,13 @@
     },
     "css-color-names": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
     "css-loader": {
       "version": "0.28.11",
-      "resolved": "http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
       "integrity": "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg==",
       "dev": true,
       "requires": {
@@ -3060,7 +3073,7 @@
     },
     "css-select": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
       "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
       "requires": {
         "boolbase": "~1.0.0",
@@ -3116,7 +3129,7 @@
     },
     "cssnano": {
       "version": "3.10.0",
-      "resolved": "http://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz",
       "integrity": "sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=",
       "dev": true,
       "requires": {
@@ -3397,7 +3410,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -3452,7 +3465,7 @@
       "dependencies": {
         "domelementtype": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
           "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
         }
       }
@@ -3827,7 +3840,7 @@
     },
     "events": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
@@ -4139,6 +4152,29 @@
         "pend": "~1.2.0"
       }
     },
+    "file-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+      "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -4164,7 +4200,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -4908,7 +4944,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -5004,7 +5040,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
@@ -5217,7 +5253,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "dev": true,
       "requires": {
@@ -5883,7 +5919,7 @@
     },
     "json5": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
@@ -5930,7 +5966,7 @@
         },
         "es6-promise": {
           "version": "3.0.2",
-          "resolved": "http://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
           "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y=",
           "dev": true
         },
@@ -5942,7 +5978,7 @@
         },
         "readable-stream": {
           "version": "2.0.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
           "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
           "dev": true,
           "requires": {
@@ -6251,7 +6287,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -6394,7 +6430,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -6438,7 +6474,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -6446,7 +6482,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
@@ -6668,7 +6704,7 @@
       "dependencies": {
         "buffer": {
           "version": "4.9.1",
-          "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
           "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
           "dev": true,
           "requires": {
@@ -6976,7 +7012,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -7041,7 +7077,7 @@
     },
     "parse-asn1": {
       "version": "5.1.1",
-      "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
       "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "dev": true,
       "requires": {
@@ -7230,7 +7266,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -7259,7 +7295,7 @@
     },
     "postcss-calc": {
       "version": "5.3.1",
-      "resolved": "http://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz",
       "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=",
       "dev": true,
       "requires": {
@@ -7291,7 +7327,7 @@
     },
     "postcss-discard-comments": {
       "version": "2.0.4",
-      "resolved": "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
       "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=",
       "dev": true,
       "requires": {
@@ -7309,7 +7345,7 @@
     },
     "postcss-discard-empty": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
       "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=",
       "dev": true,
       "requires": {
@@ -7318,7 +7354,7 @@
     },
     "postcss-discard-overridden": {
       "version": "0.1.1",
-      "resolved": "http://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz",
       "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=",
       "dev": true,
       "requires": {
@@ -7327,7 +7363,7 @@
     },
     "postcss-discard-unused": {
       "version": "2.2.3",
-      "resolved": "http://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz",
       "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=",
       "dev": true,
       "requires": {
@@ -7396,7 +7432,7 @@
     },
     "postcss-merge-idents": {
       "version": "2.1.7",
-      "resolved": "http://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz",
       "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=",
       "dev": true,
       "requires": {
@@ -7435,7 +7471,7 @@
     },
     "postcss-minify-font-values": {
       "version": "1.0.5",
-      "resolved": "http://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz",
       "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=",
       "dev": true,
       "requires": {
@@ -7446,7 +7482,7 @@
     },
     "postcss-minify-gradients": {
       "version": "1.0.5",
-      "resolved": "http://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
       "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=",
       "dev": true,
       "requires": {
@@ -7456,7 +7492,7 @@
     },
     "postcss-minify-params": {
       "version": "1.2.2",
-      "resolved": "http://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
       "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=",
       "dev": true,
       "requires": {
@@ -7468,7 +7504,7 @@
     },
     "postcss-minify-selectors": {
       "version": "2.1.1",
-      "resolved": "http://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
       "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=",
       "dev": true,
       "requires": {
@@ -7679,7 +7715,7 @@
     },
     "postcss-normalize-charset": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
       "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=",
       "dev": true,
       "requires": {
@@ -7688,7 +7724,7 @@
     },
     "postcss-normalize-url": {
       "version": "3.0.8",
-      "resolved": "http://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz",
       "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=",
       "dev": true,
       "requires": {
@@ -7710,7 +7746,7 @@
     },
     "postcss-reduce-idents": {
       "version": "2.4.0",
-      "resolved": "http://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz",
       "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=",
       "dev": true,
       "requires": {
@@ -7720,7 +7756,7 @@
     },
     "postcss-reduce-initial": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz",
       "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=",
       "dev": true,
       "requires": {
@@ -7729,7 +7765,7 @@
     },
     "postcss-reduce-transforms": {
       "version": "1.0.4",
-      "resolved": "http://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz",
       "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=",
       "dev": true,
       "requires": {
@@ -7751,7 +7787,7 @@
     },
     "postcss-svgo": {
       "version": "2.1.6",
-      "resolved": "http://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz",
       "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=",
       "dev": true,
       "requires": {
@@ -7763,7 +7799,7 @@
     },
     "postcss-unique-selectors": {
       "version": "2.0.2",
-      "resolved": "http://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz",
       "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=",
       "dev": true,
       "requires": {
@@ -7779,7 +7815,7 @@
     },
     "postcss-zindex": {
       "version": "2.2.0",
-      "resolved": "http://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz",
       "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=",
       "dev": true,
       "requires": {
@@ -7943,7 +7979,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -8277,7 +8313,7 @@
     },
     "react-redux": {
       "version": "5.0.7",
-      "resolved": "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
       "integrity": "sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==",
       "requires": {
         "hoist-non-react-statics": "^2.5.0",
@@ -8376,7 +8412,7 @@
     },
     "reduce-css-calc": {
       "version": "1.3.0",
-      "resolved": "http://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
       "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
       "dev": true,
       "requires": {
@@ -8825,7 +8861,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -8867,7 +8903,7 @@
     },
     "sinon": {
       "version": "4.5.0",
-      "resolved": "http://registry.npmjs.org/sinon/-/sinon-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-4.5.0.tgz",
       "integrity": "sha512-trdx+mB0VBBgoYucy6a9L7/jfQOmvGeaKZT4OOJ+lPAtI8623xyGr8wLiE4eojzBS8G9yXbhx42GHUOVLr4X2w==",
       "dev": true,
       "requires": {
@@ -9284,7 +9320,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
@@ -9415,7 +9451,7 @@
     },
     "text-encoding": {
       "version": "0.6.4",
-      "resolved": "http://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
       "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=",
       "dev": true
     },
@@ -9710,9 +9746,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
-      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.2.tgz",
+      "integrity": "sha512-gOoGJWbNnFAfP9FlrSV63LYD5DJqYJHG5ky1kOXSl3pCImn4rqWy/flyq1BRd4iChQsoCqjbQaqtmXO4yCVPCA==",
       "dev": true
     },
     "ua-parser-js": {
@@ -9908,6 +9944,36 @@
         }
       }
     },
+    "url-loader": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.1.tgz",
+      "integrity": "sha512-vugEeXjyYFBCUOpX+ZuaunbK3QXMKaQ3zUnRfIpRBlGkY7QizCnzyyn2ASfcxsvyU3ef+CJppVywnl3Kgf13Gg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "mime": "^2.0.3",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz",
+          "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -10326,7 +10392,7 @@
       "dependencies": {
         "acorn": {
           "version": "3.3.0",
-          "resolved": "http://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
           "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
           "dev": true
         },
@@ -10365,7 +10431,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -10427,7 +10493,7 @@
     },
     "xmlbuilder": {
       "version": "9.0.7",
-      "resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
       "dev": true
     },
@@ -10454,7 +10520,7 @@
     },
     "yargs": {
       "version": "3.10.0",
-      "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
       "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
       "dev": true,
       "requires": {
diff --git a/package.json b/package.json
index 1134f42..2ef15d6 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@types/jsdom": "11.0.4",
     "@types/mocha": "^5.2.0",
     "@types/node": "^8.0.54",
-    "@types/react": "16.4.2",
+    "@types/react": "^16.4.16",
     "@types/react-dom": "^16.0.3",
     "@types/react-redux": "^5.0.20",
     "@types/redux-logger": "^3.0.5",
@@ -67,6 +67,7 @@
     "css-loader": "^0.28.7",
     "css-modules-require-hook": "^4.2.2",
     "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^2.0.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^11.4.0",
     "minimist": "^1.2.0",
@@ -83,7 +84,8 @@
     "tslint": "^5.8.0",
     "tslint-config-standard": "^7.0.0",
     "tslint-react": "^3.2.0",
-    "typescript": "^2.8.1",
+    "typescript": "^3.1.2",
+    "url-loader": "^1.1.1",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.2",
     "webpack-hot-middleware": "^2.22.3",
@@ -92,7 +94,7 @@
   "dependencies": {
     "@types/selenium-webdriver": "^3.0.8",
     "bluebird": "^3.5.1",
-    "brave-ui": "^0.10.13",
+    "brave-ui": "^0.30.3",
     "classnames": "^2.2.5",
     "deep-freeze-node": "^1.1.3",
     "enzyme": "^3.3.0",
diff --git a/test/app/actions/shieldsPanelActionsTest.ts b/test/app/actions/shieldsPanelActionsTest.ts
index 716c66c..1e55686 100644
--- a/test/app/actions/shieldsPanelActionsTest.ts
+++ b/test/app/actions/shieldsPanelActionsTest.ts
@@ -8,7 +8,11 @@ import * as assert from 'assert'
 import * as types from '../../../app/constants/shieldsPanelTypes'
 import * as actions from '../../../app/actions/shieldsPanelActions'
 import { ShieldDetails, BlockDetails } from '../../../app/types/actions/shieldsPanelActions'
-import { BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../../../app/types/other/blockTypes'
+import {
+  BlockOptions,
+  BlockFPOptions,
+  BlockCookiesOptions
+} from '../../../app/types/other/blockTypes'
 
 describe('shieldsPanelActions', () => {
   it('shieldsPanelDataUpdated', () => {
@@ -38,14 +42,18 @@ describe('shieldsPanelActions', () => {
   })
 
   it('httpsEverywhereToggled action', () => {
-    assert.deepEqual(actions.httpsEverywhereToggled(), {
-      type: types.HTTPS_EVERYWHERE_TOGGLED
+    const setting: BlockOptions = 'allow'
+    assert.deepEqual(actions.httpsEverywhereToggled(setting), {
+      type: types.HTTPS_EVERYWHERE_TOGGLED,
+      setting
     })
   })
 
   it('javascriptToggled action', () => {
-    assert.deepEqual(actions.javascriptToggled(), {
-      type: types.JAVASCRIPT_TOGGLED
+    const setting: BlockOptions = 'allow'
+    assert.deepEqual(actions.blockJavaScript(setting), {
+      type: types.JAVASCRIPT_TOGGLED,
+      setting
     })
   })
 
diff --git a/test/app/background/reducers/shieldsPanelReducerTest.ts b/test/app/background/reducers/shieldsPanelReducerTest.ts
index be67e86..b35d79c 100644
--- a/test/app/background/reducers/shieldsPanelReducerTest.ts
+++ b/test/app/background/reducers/shieldsPanelReducerTest.ts
@@ -378,7 +378,8 @@ describe('braveShieldsPanelReducer', () => {
     it('should call setAllowHTTPUpgradableResources', function () {
       assert.deepEqual(
         shieldsPanelReducer(state, {
-          type: types.HTTPS_EVERYWHERE_TOGGLED
+          type: types.HTTPS_EVERYWHERE_TOGGLED,
+          setting: 'block'
         }), state)
       assert.equal(this.setAllowHTTPUpgradableResourcesSpy.withArgs(origin, 'allow').calledOnce, true)
     })
@@ -396,7 +397,8 @@ describe('braveShieldsPanelReducer', () => {
     it('should call setAllowJavaScript', function () {
       assert.deepEqual(
         shieldsPanelReducer(state, {
-          type: types.JAVASCRIPT_TOGGLED
+          type: types.JAVASCRIPT_TOGGLED,
+          setting: 'allow'
         }), state)
       assert.equal(this.setAllowJavaScriptSpy.withArgs(origin, 'allow').calledOnce, true)
     })
diff --git a/test/app/components/braveShields/braveShieldsControlsTest.tsx b/test/app/components/braveShields/braveShieldsControlsTest.tsx
deleted file mode 100644
index a49885f..0000000
--- a/test/app/components/braveShields/braveShieldsControlsTest.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/* global describe, it */
-/* 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 'mocha'
-import * as React from 'react'
-import * as assert from 'assert'
-import BraveShieldsControls, { BraveShieldsControlsProps } from '../../../../app/components/braveShields/braveShieldsControls'
-import { BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../../../../app/types/other/blockTypes'
-import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
-import { shallow } from 'enzyme'
-import * as sinon from 'sinon'
-
-const fakeProps: BraveShieldsControlsProps = {
-  controlsOpen: false,
-  braveShields: 'allow',
-  httpUpgradableResources: 'allow',
-  ads: 'allow',
-  trackers: 'allow',
-  javascript: 'block',
-  fingerprinting: 'block',
-  cookies: 'block',
-  noScriptInfo: {},
-  blockAdsTrackers: (setting: BlockOptions) => {
-    return {
-      type: actionTypes.BLOCK_ADS_TRACKERS,
-      setting
-    }
-  },
-  controlsToggled: (setting: boolean) => {
-    return {
-      type: actionTypes.CONTROLS_TOGGLED,
-      setting
-    }
-  },
-  httpsEverywhereToggled: () => {
-    return {
-      type: actionTypes.HTTPS_EVERYWHERE_TOGGLED
-    }
-  },
-  javascriptToggled: () => {
-    return {
-      type: actionTypes.JAVASCRIPT_TOGGLED
-    }
-  },
-  blockFingerprinting: (setting:BlockFPOptions) => {
-    return {
-      type: actionTypes.BLOCK_FINGERPRINTING,
-      setting 
-    }
-  },
-  blockCookies: (setting: BlockCookiesOptions) => {
-    return {
-      type: actionTypes.BLOCK_COOKIES,
-      setting
-    }
-  },
-  allowScriptOriginsOnce: (origins: string[]) => {
-    return {
-      type: actionTypes.ALLOW_SCRIPT_ORIGINS_ONCE,
-      origins
-    }
-  },
-  changeNoScriptSettings: (origin: string) => {
-    return {
-      type: actionTypes.CHANGE_NO_SCRIPT_SETTINGS,
-      origin
-    }
-  }
-}
-
-describe('BraveShieldsControls component', () => {
-  const baseComponent = (props: BraveShieldsControlsProps) =>
-    <BraveShieldsControls {...props} />
-
-  it('renders the component', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#braveShieldsControls').length === 1
-    assert.equal(assertion, true)
-  })
-
-  describe('advanced options content toggle', () => {
-    it('advanced options responds to the onClick event', () => {
-      const onClickAdvancedOptions = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        controlsToggled: onClickAdvancedOptions
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#advancedControlsToggle').simulate('click')
-      assert.equal(onClickAdvancedOptions.calledOnce, true)
-    })
-
-    it('can toggle on', () => {
-      const newProps = Object.assign(fakeProps, { controlsOpen: true })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#advancedControlsToggle').prop('open')
-      assert.equal(assertion, true)
-    })
-
-    it('can toggle off', () => {
-    // start with shields off
-    const newProps1 = Object.assign(fakeProps, { controlsOpen: true })
-    const wrapper = shallow(baseComponent(newProps1))
-    const assertion1 = wrapper.find('#advancedControlsToggle').prop('open')
-    assert.equal(assertion1, true)
-    // then turn it on
-    const newProps2 = Object.assign(fakeProps, { controlsOpen: true })
-    const wrapper2 = shallow(baseComponent(newProps2))
-    const assertion2 = wrapper2.find('#advancedControlsToggle').prop('open')
-    assert.equal(assertion2, true)
-    })
-  })
-
-  describe('ad control', () => {
-    it('responds to the onChange event', () => {
-      const value = {target: { value: true }}
-      const onChangeAdControlSelectOptions = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        blockAdsTrackers: onChangeAdControlSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#shieldsControlsAdControl').simulate('change', value)
-      assert.equal(onChangeAdControlSelectOptions.calledOnce, true)
-    })
-
-    it('becomes disabled if brave shields is set to `block`', () => {
-      const newProps = Object.assign(fakeProps, { braveShields: 'block' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#shieldsControlsAdControl').prop('disabled')
-      assert.equal(assertion, true)
-    })
-  })
-
-  describe('cookie control', () => {
-    it('responds to the onChange event', () => {
-      const value = {target: { value: true }}
-      const onChangeCookiesControlSelectOptions = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        blockCookies: onChangeCookiesControlSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#shieldsControlsCookieControl').simulate('change', value)
-      assert.equal(onChangeCookiesControlSelectOptions.calledOnce, true)
-    })
-
-    it('becomes disabled if brave shields is set to `block`', () => {
-      const newProps = Object.assign(fakeProps, { braveShields: 'block' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#shieldsControlsCookieControl').prop('disabled')
-      assert.equal(assertion, true)
-    })
-  })
-
-  describe('fingerprinting protection', () => {
-    it('responds to the onChange event', () => {
-      const value = {target: { value: true }}
-      const onChangeFingerprintingProtectionSelectOptions = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        blockFingerprinting: onChangeFingerprintingProtectionSelectOptions
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#shieldsControlsFingerprintingProtection').simulate('change', value)
-      assert.equal(onChangeFingerprintingProtectionSelectOptions.calledOnce, true)
-    })
-
-    it('becomes disabled if brave shields is set to `block`', () => {
-      const newProps = Object.assign(fakeProps, { braveShields: 'block' })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper
-        .find('#shieldsControlsFingerprintingProtection').prop('disabled')
-      assert.equal(assertion, true)
-    })
-  })
-
-  describe('https everywhere', () => {
-    it('responds to the onChange event', () => {
-      const value = {target: { value: true }}
-      const onChangeHttpsEverywhereToggle = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        httpsEverywhereToggled: onChangeHttpsEverywhereToggle
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#httpsEverywhere').simulate('change', value)
-      assert.equal(onChangeHttpsEverywhereToggle.calledOnce, true)
-    })
-  })
-
-  describe('block scripts', () => {
-    it('responds to the onChange event', () => {
-      const value = {target: { checked: true }}
-      const onToggleBlockScripts = sinon.spy()
-      const newProps = Object.assign(fakeProps, {
-        javascriptToggled: onToggleBlockScripts
-      })
-
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find('#blockScripts').simulate('change', value)
-      assert.equal(onToggleBlockScripts.calledOnce, true)
-    })
-  })
-
-  describe('block pishing/malware', () => {
-    // TBD
-  })
-})
diff --git a/test/app/components/braveShields/braveShieldsHeaderTest.tsx b/test/app/components/braveShields/braveShieldsHeaderTest.tsx
deleted file mode 100644
index dc64454..0000000
--- a/test/app/components/braveShields/braveShieldsHeaderTest.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/* global describe, it */
-/* 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 'mocha'
-import * as React from 'react'
-import * as assert from 'assert'
-import BraveShieldsHeader, { BraveShieldsHeaderProps } from '../../../../app/components/braveShields/braveShieldsHeader'
-import { BlockOptions } from '../../../../app/types/other/blockTypes'
-import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
-import { shallow } from 'enzyme'
-import * as sinon from 'sinon'
-
-const fakeProps: BraveShieldsHeaderProps = {
-  hostname: 'brave.com',
-  origin: 'https://brave.com',
-  shieldsToggled: (setting: BlockOptions) => {
-    return {
-      type: actionTypes.SHIELDS_TOGGLED,
-      setting
-    }
-  },
-  braveShields: 'allow'
-}
-
-describe('BraveShieldsHeader component', () => {
-  const baseComponent = (props: BraveShieldsHeaderProps) =>
-    <BraveShieldsHeader {...props} />
-
-  it('renders the component', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#braveShieldsHeader').length === 1
-    assert.equal(assertion, true)
-  })
-
-  it('shields toggle responds to the onChange event', () => {
-    const value = {target: { checked: true }}
-    const onToggleShields = sinon.spy()
-    const newProps = Object.assign(fakeProps, {
-      shieldsToggled: onToggleShields
-    })
-    const wrapper = shallow(baseComponent(newProps))
-    wrapper.find('#shieldsToggle').simulate('change', value)
-    assert.equal(onToggleShields.calledOnce, true)
-  })
-
-  it('can toggle shields off', () => {
-    const newProps = Object.assign(fakeProps, { braveShields: 'block' })
-    const wrapper = shallow(baseComponent(newProps))
-    const assertion = wrapper.find('#shieldsToggle').prop('checked')
-    assert.equal(assertion, false)
-  })
-
-  it('can toggle shields on', () => {
-    // start with shields off
-    const newProps1 = Object.assign(fakeProps, { braveShields: 'block' })
-    const wrapper = shallow(baseComponent(newProps1))
-    const assertion1 = wrapper.find('#shieldsToggle').prop('checked')
-    assert.equal(assertion1, false)
-    // then turn it on
-    const newProps2 = Object.assign(fakeProps, { braveShields: 'allow' })
-    const wrapper2 = shallow(baseComponent(newProps2))
-    const assertion2 = wrapper2.find('#shieldsToggle').prop('checked')
-    assert.equal(assertion2, true)
-  })
-
-  it('displays the hostname', () => {
-    const newProps = Object.assign(fakeProps, {
-      hostname: 'https://brian-bondy-canada-do-te-karate.com'
-    })
-    const wrapper = shallow(baseComponent(newProps))
-    const assertion = wrapper.find('#hostname').prop('text')
-    assert.equal(assertion, 'https://brian-bondy-canada-do-te-karate.com')
-  })
-})
\ No newline at end of file
diff --git a/test/app/components/braveShields/braveShieldsStatsTest.tsx b/test/app/components/braveShields/braveShieldsStatsTest.tsx
deleted file mode 100644
index 7f318a2..0000000
--- a/test/app/components/braveShields/braveShieldsStatsTest.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-/* global describe, it */
-/* 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 'mocha'
-import * as React from 'react'
-import * as assert from 'assert'
-import BraveShieldsStats from '../../../../app/components/braveShields/braveShieldsStats'
-import { BraveShieldsStatsProps } from '../../../../app/components/braveShields/braveShieldsStats'
-import { shallow } from 'enzyme'
-// import * as sinon from 'sinon'
-
-const fakeProps: BraveShieldsStatsProps = {
-  braveShields: 'allow',
-  adsBlocked: 1,
-  trackersBlocked: 2,
-  httpsRedirected: 3,
-  javascriptBlocked: 4,
-  fingerprintingBlocked: 5,
-  adsBlockedResources: [],
-  trackersBlockedResources: [],
-  httpsRedirectedResources: [],
-  javascriptBlockedResources: [],
-  fingerprintingBlockedResources: []
-}
-
-describe('BraveShieldsStats component', () => {
-  const baseComponent = (props: BraveShieldsStatsProps) =>
-    <BraveShieldsStats {...props} />
-
-  it('renders the component', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#braveShieldsStats').length === 1
-    assert.equal(assertion, true)
-  })
-
-  describe('stats for ads and trackers blocked', () => {
-    it('correctly displays stats info based on state of ads + trackers blocked', () => {
-      const newProps = Object.assign(fakeProps, { adsBlocked: 1007, trackersBlocked: 330 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#totalAdsTrackersBlockedStat').html().includes('1337')
-
-      assert.equal(assertion, true)
-    })
-
-    it('onClick event fires local state change for opening details', () => {
-      const componentId = 'totalAdsTrackersBlockedStat'
-      const target = { target: { id: componentId } }
-      const wrapper = shallow(baseComponent(fakeProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion = wrapper.state('adsTrackersBlockedDetailsOpen')
-
-      assert.equal(assertion, true)
-    })
-
-    it('onClick shows a list of blocked resources', () => {
-      const componentId = 'totalAdsTrackersBlockedStat'
-      const target = { target: { id: componentId } }
-      const newProps = Object.assign(fakeProps, {
-        adsBlockedResources: [
-          'https://anthony-beats-chuck-norris-in-everything.co.uk',
-          'https://in-fact-jocelyn-can-beat-anthony-very-easily.news'
-        ]
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion1 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://anthony-beats-chuck-norris-in-everything.co.uk')
-
-      // ONE CAN NOT BEAT ANTHONY. THIS TEST NEVER FAILS
-      assert.equal(assertion1, true)
-
-      // NEITHER THIS. WHAT A TEAM
-      const assertion2 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://in-fact-jocelyn-can-beat-anthony-very-easily.news')
-
-      assert.equal(assertion2, true)
-    })
-
-    it('properly merges ads + trackers in the same list', () => {
-      const componentId = 'totalAdsTrackersBlockedStat'
-      const target = { target: { id: componentId } }
-      const newProps = Object.assign(fakeProps, {
-        adsBlockedResources: ['https://george-clooney-was-born-same-day-as-cezar.biz'],
-        trackersBlockedResources: ['https://this-url-is-courtesy-of-too-much-nespresso.info']
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion1 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://george-clooney-was-born-same-day-as-cezar.biz')
-
-        assert.equal(assertion1, true)
-      const assertion2 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://this-url-is-courtesy-of-too-much-nespresso.info')
-
-      assert.equal(assertion2, true)
-    })
-  })
-
-  describe('stats for https redirected', () => {
-    it('correctly displays stats info based on state', () => {
-      const newProps = Object.assign(fakeProps, { httpsRedirected: 444 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#httpsRedirectedStat').html().includes('444')
-
-      assert.equal(assertion, true)
-    })
-
-    it('onClick event fires local state change for opening details', () => {
-      const componentId = 'httpsRedirectedStat'
-      const target = { target: { id: componentId } }
-      const wrapper = shallow(baseComponent(fakeProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion = wrapper.state('httpsRedirectedDetailsOpen')
-      assert.equal(assertion, true)
-    })
-
-    it('onClick shows a list of redirected resources', () => {
-      const componentId = 'httpsRedirectedStat'
-      const target = { target: { id: componentId } }
-      const newProps = Object.assign(fakeProps, {
-        httpsRedirectedResources: [
-          'https://serg-knows-a-few-pokemons.biz',
-          'https://serg-knows-charizard-and-all-dragon-pokemons.asia'
-        ]
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion1 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://serg-knows-a-few-pokemons.biz')
-
-      assert.equal(assertion1, true)
-
-      const assertion2 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://serg-knows-charizard-and-all-dragon-pokemons.asia')
-
-      assert.equal(assertion2, true)
-    })
-  })
-
-  describe('stats for javascript blocked', () => {
-    it('correctly displays stats info based on state', () => {
-      const newProps = Object.assign(fakeProps, { javascriptBlocked: 12123 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#javascriptBlockedStat').html().includes('12123')
-
-      assert.equal(assertion, true)
-    })
-
-    it('onClick event fires local state change for opening details', () => {
-      const componentId = 'javascriptBlockedStat'
-      const target = { target: { id: componentId } }
-      const wrapper = shallow(baseComponent(fakeProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion = wrapper.state('javascriptBlockedDetailsOpen')
-      assert.equal(assertion, true)
-    })
-
-    it('onClick shows a list of blocked resources', () => {
-      const componentId = 'javascriptBlockedStat'
-      const target = { target: { id: componentId } }
-      const newProps = Object.assign(fakeProps, {
-        javascriptBlockedResources: [
-          'https://brian-bondy-is-the-real-sub-zero-from-mortal-kombat.biz',
-          'https://brian-clifton-is-the-real-scorpion-from-mortal-kombat.biz'
-        ]
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion1 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://brian-bondy-is-the-real-sub-zero-from-mortal-kombat.biz')
-
-      assert.equal(assertion1, true)
-
-      const assertion2 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://brian-bondy-is-the-real-sub-zero-from-mortal-kombat.biz')
-
-      assert.equal(assertion2, true)
-    })
-  })
-
-  describe('stats for fingerprinting blocked', () => {
-    it('correctly displays stats info based on state', () => {
-      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 7777 })
-      const wrapper = shallow(baseComponent(newProps))
-      const assertion = wrapper.find('#fingerprintingBlockedStat').html().includes('7777')
-
-      assert.equal(assertion, true)
-    })
-
-    it('onClick event fires local state change for opening details', () => {
-      const componentId = 'fingerprintingBlockedStat'
-      const target = { target: { id: componentId } }
-      const wrapper = shallow(baseComponent(fakeProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-      const assertion = wrapper.state('fingerprintingBlockedDetailsOpen')
-      assert.equal(assertion, true)
-    })
-
-    it('onClick shows a list of blocked resources', () => {
-      const componentId = 'fingerprintingBlockedStat'
-      const target = { target: { id: componentId } }
-      const newProps = Object.assign(fakeProps, {
-        fingerprintingBlockedResources: [
-          'https://this-fingerprinting-is-blocked.email',
-          'https://this-fingerprinting-didnt.work'
-        ]
-      })
-      const wrapper = shallow(baseComponent(newProps))
-      wrapper.find(`#${componentId}`).simulate('click', target)
-
-      const assertion1 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://this-fingerprinting-is-blocked.email')
-
-      assert.equal(assertion1, true)
-
-      const assertion2 = wrapper.find('#blockedResourcesStats')
-        .html().includes('https://this-fingerprinting-didnt.work')
-
-      assert.equal(assertion2, true)
-    })
-  })
-})
diff --git a/test/app/components/braveShields/braveShieldsFooterTest.tsx b/test/app/components/braveShields/footerTest.tsx
similarity index 65%
rename from test/app/components/braveShields/braveShieldsFooterTest.tsx
rename to test/app/components/braveShields/footerTest.tsx
index a53f4a8..21d1f70 100644
--- a/test/app/components/braveShields/braveShieldsFooterTest.tsx
+++ b/test/app/components/braveShields/footerTest.tsx
@@ -7,13 +7,12 @@ import 'mocha'
 import * as React from 'react'
 import * as sinon from 'sinon'
 import * as assert from 'assert'
-import BraveShieldsFooter from '../../../../app/components/braveShields/braveShieldsFooter'
+import ShieldsFooter from '../../../../app/components/braveShields/footer'
 import * as tabsAPI from '../../../../app/background/api/tabsAPI'
 import { shallow } from 'enzyme'
 
-describe('BraveShieldsFooter component', () => {
-  const tabId = 123123
-  const baseComponent = () => <BraveShieldsFooter tabId={tabId} />
+describe('ShieldsFooter component', () => {
+  const baseComponent = () => <ShieldsFooter />
 
   it('renders the component', () => {
     const wrapper = shallow(baseComponent())
@@ -21,22 +20,6 @@ describe('BraveShieldsFooter component', () => {
     assert.equal(assertion, true)
   })
 
-  describe('when reload is clicked', () => {
-    before(function () {
-      this.spy = sinon.spy(chrome.tabs, 'reload')
-      tabsAPI.reloadTab(tabId, true)
-    })
-
-    after(function () {
-      this.spy.restore()
-    })
-
-    it('calls chrome.tab.reload', function () {
-      assert(this.spy.calledOnce)
-      assert.deepEqual(this.spy.getCall(0).args[0], tabId)
-    })
-  })
-
   describe('when edit default settings is clicked', () => {
     before(function () {
       this.spy = sinon.spy(chrome.tabs, 'create')
diff --git a/test/app/components/braveShields/headerTest.tsx b/test/app/components/braveShields/headerTest.tsx
new file mode 100644
index 0000000..d86f148
--- /dev/null
+++ b/test/app/components/braveShields/headerTest.tsx
@@ -0,0 +1,95 @@
+/* global describe, it */
+/* 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 'mocha'
+import * as React from 'react'
+import * as assert from 'assert'
+import ShieldsHeader, { Props } from '../../../../app/components/braveShields/header'
+import { BlockOptions } from '../../../../app/types/other/blockTypes'
+import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+import * as sinon from 'sinon'
+
+const fakeProps: Props = {
+  tabData: {
+    hostname: 'brave.com',
+    origin: 'https://brave.com',
+    url: 'https://brave.com',
+    braveShields: 'allow',
+    adsBlocked: 0,
+    ads: 'block',
+    adsBlockedResources: [],
+    httpsRedirected: 0,
+    httpUpgradableResources: 'block',
+    httpsRedirectedResources: [],
+    id: 0,
+    javascript: 'block',
+    javascriptBlocked: 0,
+    javascriptBlockedResources: [],
+    trackers: 'block',
+    trackersBlocked: 0,
+    trackersBlockedResources: [],
+    fingerprinting: 'block',
+    fingerprintingBlocked: 0,
+    fingerprintingBlockedResources: [],
+    cookies: 'block',
+    noScriptInfo: {},
+    controlsOpen: false
+  },
+  shieldsToggled: (setting: BlockOptions) => {
+    return { type: actionTypes.SHIELDS_TOGGLED, setting }
+  },
+}
+
+describe('ShieldsHeader component', () => {
+  const baseComponent = (props: Props) =>
+    <ShieldsHeader {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#braveShieldsHeader').length === 1
+    assert.equal(assertion, true)
+  })
+
+  it('shields toggle responds to the onChange event', () => {
+    const value = { target: { checked: true } }
+    const onToggleShields = sinon.spy()
+    const newProps = Object.assign(fakeProps, {
+      shieldsToggled: onToggleShields
+    })
+    const wrapper = shallow(baseComponent(newProps))
+    wrapper.find('#mainToggle').simulate('change', value)
+    assert.equal(onToggleShields.calledOnce, true)
+  })
+
+  it('can toggle shields off', () => {
+    const newProps = Object.assign(fakeProps, { tabData: { braveShields: 'block' } })
+    const wrapper = shallow(baseComponent(newProps))
+    const assertion = wrapper.find('#mainToggle').prop('checked')
+    assert.equal(assertion, false)
+  })
+
+  it('can toggle shields on', () => {
+    // start with shields off
+    const newProps1 = Object.assign(fakeProps, { tabData: { braveShields: 'block' } })
+    const wrapper = shallow(baseComponent(newProps1))
+    const assertion1 = wrapper.find('#mainToggle').prop('checked')
+    assert.equal(assertion1, false)
+    // then turn it on
+    const newProps2 = Object.assign(fakeProps, { tabData: { braveShields: 'allow' } })
+    const wrapper2 = shallow(baseComponent(newProps2))
+    const assertion2 = wrapper2.find('#mainToggle').prop('checked')
+    assert.equal(assertion2, true)
+  })
+
+  it('displays the hostname', () => {
+    const newProps = Object.assign(fakeProps, {
+      tabData: { hostname: 'https://brian-bondy-canada-do-te-karate.com' }
+    })
+    const wrapper = shallow(baseComponent(newProps))
+    const assertion = wrapper.find('#hostname').props().children
+    assert.equal(assertion, 'https://brian-bondy-canada-do-te-karate.com')
+  })
+})
diff --git a/test/app/components/braveShields/interfaceControlsTest.tsx b/test/app/components/braveShields/interfaceControlsTest.tsx
new file mode 100644
index 0000000..9e41025
--- /dev/null
+++ b/test/app/components/braveShields/interfaceControlsTest.tsx
@@ -0,0 +1,111 @@
+/* global describe, it */
+/* 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 'mocha'
+import * as React from 'react'
+import * as assert from 'assert'
+import ShieldsInterfaceControls, { Props } from '../../../../app/components/braveShields/interfaceControls'
+import { BlockOptions } from '../../../../app/types/other/blockTypes'
+import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+import * as sinon from 'sinon'
+
+const fakeProps: Props = {
+  url: 'https://brave.com',
+  hostname: 'brave.com',
+  braveShields: 'allow',
+  adsBlocked: 0,
+  adsBlockedResources: [],
+  ads: 'allow',
+  blockAdsTrackers: (setting: BlockOptions) => ({ type: actionTypes.BLOCK_ADS_TRACKERS, setting }),
+  trackers: 'allow',
+  trackersBlocked: 0,
+  trackersBlockedResources: [],
+  httpsRedirected: 0,
+  httpsRedirectedResources: [],
+  httpUpgradableResources: 'allow',
+  httpsEverywhereToggled: (setting: BlockOptions) => ({ type: actionTypes.HTTPS_EVERYWHERE_TOGGLED, setting })
+}
+
+describe('InterfaceControls component', () => {
+  const baseComponent = (props: Props) =>
+    <ShieldsInterfaceControls {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#braveShieldsInterfaceControls').length === 1
+    assert.equal(assertion, true)
+  })
+
+  describe('ad control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeAdControlSelectOptions = sinon.spy()
+      const newProps = Object.assign(fakeProps, {
+        blockAdsTrackers: onChangeAdControlSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockAds').simulate('change', value)
+      assert.equal(onChangeAdControlSelectOptions.calledOnce, true)
+    })
+
+    it('can toggle ad control on', () => {
+      const newProps = Object.assign(fakeProps, { ads: 'block', trackers: 'block' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAds').prop('checked')
+      assert.equal(assertion, true)
+    })
+
+    it('can toggle ad control off', () => {
+      const newProps = Object.assign(fakeProps, { ads: 'allow', trackers: 'allow' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAds').prop('checked')
+      assert.equal(assertion, false)
+    })
+
+    it('shows number of ads blocked', () => {
+      const newProps = Object.assign(fakeProps, { adsBlocked: 1337 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockAdsStat').props().children
+      assert.equal(assertion, 1337)
+    })
+  })
+
+  describe('https everywhere control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeConnectionsEncryptedSwitch = sinon.spy()
+      const newProps = Object.assign(fakeProps, {
+        httpsEverywhereToggled: onChangeConnectionsEncryptedSwitch
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#connectionsEncrypted').simulate('change', value)
+      assert.equal(onChangeConnectionsEncryptedSwitch.calledOnce, true)
+    })
+
+    it('can toggle ad control on', () => {
+      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'block' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
+      assert.equal(assertion, true)
+    })
+
+    it('can toggle ad control off', () => {
+      const newProps = Object.assign(fakeProps, { httpUpgradableResources: 'allow' })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncrypted').prop('checked')
+      assert.equal(assertion, false)
+    })
+
+    it('shows number of https redirected', () => {
+      const newProps = Object.assign(fakeProps, { httpsRedirected: 1337 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#connectionsEncryptedStat').props().children
+      assert.equal(assertion, 1337)
+    })
+  })
+})
diff --git a/test/app/components/braveShields/privacyControlsTest.tsx b/test/app/components/braveShields/privacyControlsTest.tsx
new file mode 100644
index 0000000..733a744
--- /dev/null
+++ b/test/app/components/braveShields/privacyControlsTest.tsx
@@ -0,0 +1,101 @@
+/* global describe, it */
+/* 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 'mocha'
+import * as React from 'react'
+import * as assert from 'assert'
+import ShieldsPrivacyControls, { Props } from '../../../../app/components/braveShields/privacyControls'
+import { BlockJSOptions, BlockCookiesOptions, BlockFPOptions } from '../../../../app/types/other/blockTypes'
+import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
+import { shallow } from 'enzyme'
+import * as sinon from 'sinon'
+
+const fakeProps: Props = {
+  url: 'https://brave.com/jobs',
+  hostname: 'brave.com',
+  origin: 'https://brave.com',
+  braveShields: 'allow',
+  javascript: 'block',
+  javascriptBlocked: 0,
+  blockJavaScript: (setting: BlockJSOptions) => ({ type: actionTypes.JAVASCRIPT_TOGGLED, setting }),
+  javascriptBlockedResources: [],
+  noScriptInfo: {},
+  allowScriptOriginsOnce: (origins: Array<string>) => ({ type: actionTypes.ALLOW_SCRIPT_ORIGINS_ONCE, origins }),
+  changeNoScriptSettings: (origin: string) => ({ type: actionTypes.CHANGE_NO_SCRIPT_SETTINGS, origin }),
+  changeAllNoScriptSettings: (origin: string, shouldBlock: boolean) => ({ type: actionTypes.CHANGE_ALL_NO_SCRIPT_SETTINGS, origin, shouldBlock }),
+  fingerprinting: 'block',
+  fingerprintingBlocked: 0,
+  blockFingerprinting: (setting: BlockFPOptions) => ({ type: actionTypes.BLOCK_FINGERPRINTING, setting }),
+  fingerprintingBlockedResources: [],
+  cookies: 'block',
+  blockCookies: (setting: BlockCookiesOptions) => ({ type: actionTypes.BLOCK_COOKIES, setting })
+}
+
+describe('PrivacyControls component', () => {
+  const baseComponent = (props: Props) =>
+    <ShieldsPrivacyControls {...props} />
+
+  it('renders the component', () => {
+    const wrapper = shallow(baseComponent(fakeProps))
+    const assertion = wrapper.find('#braveShieldsPrivacyControls').length === 1
+    assert.equal(assertion, true)
+  })
+
+  describe('cookie control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeCookiesControlSelectOptions = sinon.spy()
+      const newProps = Object.assign(fakeProps, {
+        blockCookies: onChangeCookiesControlSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockCookies').simulate('change', value)
+      assert.equal(onChangeCookiesControlSelectOptions.calledOnce, true)
+    })
+  })
+
+  describe('scripts control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeScriptControlSelectOptions = sinon.spy()
+      const newProps = Object.assign(fakeProps, {
+        blockJavaScript: onChangeScriptControlSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockScripts').simulate('change', value)
+      assert.equal(onChangeScriptControlSelectOptions.calledOnce, true)
+    })
+
+    it('shows number of scripts blocked', () => {
+      const newProps = Object.assign(fakeProps, { javascriptBlocked: 1337 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockScriptsStat').props().children
+      assert.equal(assertion, 1337)
+    })
+  })
+
+  describe('fingerprinting control', () => {
+    it('responds to the onChange event', () => {
+      const value = { target: { value: true } }
+      const onChangeFingerprintingProtectionSelectOptions = sinon.spy()
+      const newProps = Object.assign(fakeProps, {
+        blockFingerprinting: onChangeFingerprintingProtectionSelectOptions
+      })
+
+      const wrapper = shallow(baseComponent(newProps))
+      wrapper.find('#blockFingerprinting').simulate('change', value)
+      assert.equal(onChangeFingerprintingProtectionSelectOptions.calledOnce, true)
+    })
+
+    it('shows number of fingerprinting attempts blocked', () => {
+      const newProps = Object.assign(fakeProps, { fingerprintingBlocked: 1337 })
+      const wrapper = shallow(baseComponent(newProps))
+      const assertion = wrapper.find('#blockFingerprintingStat').props().children
+      assert.equal(assertion, 1337)
+    })
+  })
+})
diff --git a/test/app/components/noScript/noScriptTest.tsx b/test/app/components/noScript/noScriptTest.tsx
deleted file mode 100644
index 80a0c82..0000000
--- a/test/app/components/noScript/noScriptTest.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/* global describe, it */
-/* 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 'mocha'
-import * as React from 'react'
-import * as assert from 'assert'
-import NoScript, { NoScriptProps } from '../../../../app/components/noScript/noScript'
-import * as actionTypes from '../../../../app/constants/shieldsPanelTypes'
-import { shallow } from 'enzyme'
-
-const fakeProps: NoScriptProps = {
-  blocked: true,
-  noScriptInfo: {
-    0: {
-      actuallyBlocked: false,
-      willBlock: true
-    },
-    1: {
-      actuallyBlocked: true,
-      willBlock: false
-    }
-  },
-  onSubmit: (origins: string[]) => {
-    return {
-      type: actionTypes.ALLOW_SCRIPT_ORIGINS_ONCE,
-      origins
-    }
-  },
-  onChangeNoScriptSettings: (origin: string) => {
-    actionTypes.CHANGE_NO_SCRIPT_SETTINGS,
-    origin
-  }
-}
-
-describe('NoScript component', () => {
-  const baseComponent = (props: NoScriptProps) =>
-    <NoScript {...props} />
-
-  it('renders the component by default when `blocked` is true', () => {
-    const wrapper = shallow(baseComponent(fakeProps))
-    const assertion = wrapper.find('#noScript').length === 1
-    assert.equal(assertion, true)
-  })
-
-  it('does not render the component if `blocked` is set to false', () => {
-    const newProps = Object.assign(fakeProps, { blocked: false })
-    const wrapper = shallow(baseComponent(newProps))
-    const assertion = wrapper.find('#noScript').length === 1
-    assert.equal(assertion, false)
-  })
-})
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index b63bf6b..043d8e3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "outDir": "./build/",
+        "skipLibCheck": true,
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "commonjs",
diff --git a/tslint.json b/tslint.json
index 932c500..f2bb0dc 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,8 @@
 {
   "extends": ["tslint-react", "tslint-config-standard"],
+  "rules": {
+    "jsx-no-multiline-js": false
+  },
   "linterOptions": {
     "exclude": [
       "build/",
diff --git a/webpack/dev.config.js b/webpack/dev.config.js
index aeed4a5..676e471 100644
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@@ -68,6 +68,14 @@ const baseDevConfig = () => ({
           'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
           {loader: 'postcss-loader', options: postCSSConfig}
         ]
+      },
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader?limit=13000&minetype=application/font-woff'
+      },
+      {
+        test: /\.(ttf|eot|svg|ico|png|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader'
       }
     ]
   }
diff --git a/webpack/prod.config.js b/webpack/prod.config.js
index 03af0a5..6b0e1f1 100644
--- a/webpack/prod.config.js
+++ b/webpack/prod.config.js
@@ -61,6 +61,14 @@ module.exports = {
           'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
           { loader: 'postcss-loader', options: postCSSConfig }
         ]
+      },
+      {
+        test: /\.(woff(2)|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader?limit=13000&minetype=application/font-woff'
+      },
+      {
+        test: /\.(ttf|eot|ico|png|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader'
       }]
   }
 }