diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties
index b1ef50bb59f..d0e9427d0ba 100644
--- a/app/extensions/brave/locales/en-US/styles.properties
+++ b/app/extensions/brave/locales/en-US/styles.properties
@@ -5,6 +5,7 @@ adsShowBrave=Show Brave Ads
 browserButton=Browser Button
 buttons=Buttons
 extensionItem=Extension Item
+ok=OK
 forms=Forms
 h1=This is an h1
 h2=This is an h2
diff --git a/app/renderer/about/bookmarks/bookmarkTitleHeader.js b/app/renderer/about/bookmarks/bookmarkTitleHeader.js
index c840e309f93..40e670022fd 100644
--- a/app/renderer/about/bookmarks/bookmarkTitleHeader.js
+++ b/app/renderer/about/bookmarks/bookmarkTitleHeader.js
@@ -4,13 +4,18 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ImmutableComponent = require('../../components/immutableComponent')
+const BrowserButton = require('../../components/common/browserButton')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
 
+const globalStyles = require('../../components/styles/global')
+const addBookmark = require('../../../../img/toolbar/add_bookmark_btn.svg')
+
 class BookmarkTitleHeader extends ImmutableComponent {
   constructor () {
     super()
@@ -25,13 +30,25 @@ class BookmarkTitleHeader extends ImmutableComponent {
   render () {
     return <div>
       <span data-l10n-id={this.props.heading} />
-      <span className='addBookmark'
-        data-l10n-id='addBookmark'
-        data-test-id='addBookmark'
+      <BrowserButton
+        isMaskImage
+        custom={styles.header__addBookmark}
+        l10nId='addBookmark'
+        testId='addBookmark'
         onClick={this.addBookmark}
       />
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  header__addBookmark: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '20px',
+    height: '20px',
+    WebkitMaskImage: `url(${addBookmark})`,
+    WebkitMaskRepeat: 'no-repeat'
+  }
+})
+
 module.exports = BookmarkTitleHeader
diff --git a/app/renderer/about/bookmarks/bookmarks.js b/app/renderer/about/bookmarks/bookmarks.js
index 9331e3d90fc..6d8bc656510 100644
--- a/app/renderer/about/bookmarks/bookmarks.js
+++ b/app/renderer/about/bookmarks/bookmarks.js
@@ -12,6 +12,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const {AboutPageSectionTitle} = require('../../components/common/sectionTitle')
+const BrowserButton = require('../../components/common/browserButton')
 const BookmarkFolderList = require('./bookmarkFolderList')
 const BookmarksList = require('./bookmarksList')
 
@@ -27,6 +28,11 @@ const windowActions = require('../../../../js/actions/windowActions')
 require('../../../../less/about/bookmarks.less')
 require('../../../../node_modules/font-awesome/css/font-awesome.css')
 
+const globalStyles = require('../../components/styles/global')
+const addBookmarkFolder = require('../../../../img/toolbar/add_BM_folder_btn.svg')
+const importBrowserData = require('../../../../img/toolbar/bookmarks_import.svg')
+const exportBookmarks = require('../../../../img/toolbar/bookmarks_export.svg')
+
 class Bookmarks extends React.Component {
   constructor (props) {
     super(props)
@@ -142,14 +148,37 @@ class Bookmarks extends React.Component {
       })}>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
-          <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
-          <span data-l10n-id='exportBookmarks' className='exportBookmarks' onClick={this.exportBookmarks} />
-          <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
-          {
-            this.state.search
-              ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
+          <div className='searchWrapper'>
+            <BrowserButton
+              isMaskImage
+              custom={[
+                styles.headerActions__search__button,
+                styles.headerActions__search__button_importBrowserData
+              ]}
+              l10nId='importBrowserData'
+              onClick={this.importBrowserData}
+            />
+            <BrowserButton
+              isMaskImage
+              custom={[
+                styles.headerActions__search__button,
+                styles.headerActions__search__button_exportBookmarks
+              ]}
+              l10nId='exportBookmarks'
+              onClick={this.exportBookmarks}
+            />
+            <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
+            {
+              this.state.search
+              ? <BrowserButton
+                iconClass={globalStyles.appIcons.remove}
+                iconStyle={{ color: globalStyles.color.gray }}
+                custom={styles.headerActions__search__input__button_clear}
+                onClick={this.onClearSearchText}
+              />
               : <span className='fa fa-search searchInputPlaceholder' />
-          }
+            }
+          </div>
         </div>
       </div>
 
@@ -157,9 +186,11 @@ class Bookmarks extends React.Component {
         <div className='folderView'>
           <div className='columnHeader'>
             <span data-l10n-id='folders' />
-            <span className='addBookmarkFolder'
-              data-l10n-id='addBookmarkFolder'
-              data-test-id='addBookmarkFolder'
+            <BrowserButton
+              isMaskImage
+              custom={styles.columnHeader__addBookmarkFolder}
+              l10nId='addBookmarkFolder'
+              testId='addBookmarkFolder'
               onClick={this.addBookmarkFolder}
             />
           </div>
@@ -198,6 +229,40 @@ const styles = StyleSheet.create({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center'
+  },
+
+  headerActions__search__button: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '43px',
+    height: '22px',
+    marginRight: '.5rem',
+    WebkitMaskRepeat: 'no-repeat'
+  },
+
+  headerActions__search__button_importBrowserData: {
+    WebkitMaskImage: `url(${importBrowserData})`
+  },
+
+  headerActions__search__button_exportBookmarks: {
+    WebkitMaskImage: `url(${exportBookmarks})`
+  },
+
+  headerActions__search__input__button_clear: {
+    // See siteDetails.less
+    margin: 0,
+    padding: 0,
+    width: 0,
+    position: 'relative',
+    left: '-25px',
+    fontSize: '16px'
+  },
+
+  columnHeader__addBookmarkFolder: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '20px',
+    height: '20px',
+    WebkitMaskImage: `url(${addBookmarkFolder})`,
+    WebkitMaskRepeat: 'no-repeat'
   }
 })
 
diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index 1e4d7422bd6..3a6b91d570a 100644
--- a/app/renderer/components/autofill/autofillAddressPanel.js
+++ b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -9,7 +9,7 @@ const {css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const {
   CommonForm,
   CommonFormSection,
@@ -272,12 +272,12 @@ class AutofillAddressPanel extends React.Component {
           </div>
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelAddressButton'
             onClick={this.onHide}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             disabled={this.props.disableSaveButton}
             l10nId='save'
             testId='saveAddressButton'
diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
index 390055ae68c..63f454328f8 100644
--- a/app/renderer/components/autofill/autofillCreditCardPanel.js
+++ b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Component
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const {
   CommonForm,
   CommonFormSection,
@@ -201,12 +201,12 @@ class AutofillCreditCardPanel extends React.Component {
           </div>
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelCreditCardButton'
             onClick={this.onHide}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             disabled={this.props.disableSaveButton}
             l10nId='save'
             testId='saveCreditCardButton'
diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index 739911fc1c8..25e2a4c5eec 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -18,11 +18,14 @@ class BrowserButton extends ImmutableComponent {
       this.props.actionItem &&
         [styles.browserButton_default, styles.browserButton_subtleItem, styles.browserButton_actionItem],
       this.props.extensionItem && styles.browserButton_extensionItem,
-      this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem,
       this.props.panelItem && styles.browserButton_panelItem,
-      this.props.iconOnly && styles.browserButton_iconOnly,
       this.props.fitContent && styles.browserButton_fitContent,
+      this.props.groupedItem && styles.browserButton_groupedItem,
+      this.props.smallItem && styles.browserButton_smallItem,
+      this.props.iconOnly && styles.browserButton_iconOnly,
+      this.props.isMaskImage && styles.browserButton_isMaskImage,
+
       // TODO: These are other button styles app-wise
       // that needs to be refactored and included in this file
       // .............................................
@@ -65,8 +68,10 @@ class BrowserButton extends ImmutableComponent {
       data-l10n-id={this.props.l10nId}
       data-test-id={this.props.testId}
       data-test2-id={this.props.test2Id}
+      data-test-pinned={this.props.testPinned}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.buttonStyle}
+      title={this.props.title}
       data-button-value={this.props.dataButtonValue}
       onClick={this.props.onClick}
       className={css(this.classNames, this.props.custom)}>
@@ -89,7 +94,6 @@ const styles = StyleSheet.create({
     width: buttonSize,
     whiteSpace: 'nowrap',
     outline: 'none',
-    cursor: 'default',
     display: 'inline-block',
     borderRadius: '2px',
     textAlign: 'center',
@@ -102,6 +106,9 @@ const styles = StyleSheet.create({
     backgroundColor: globalStyles.button.default.backgroundColor,
     border: 'none',
 
+    // See #11114
+    cursor: 'pointer',
+
     // TODO: #9223
     fontSize: '13px',
     lineHeight: buttonSize,
@@ -120,6 +127,16 @@ const styles = StyleSheet.create({
     // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L49
     color: globalStyles.button.color,
 
+    // #9223
+    // Set the common default font-family with common.less and window.less
+    // See:
+    //  - https://github.com/brave/browser-laptop/blob/e1b67c219b64b829cae284717de6ecccb0da8154/less/about/common.less#L11
+    //  - https://github.com/brave/browser-laptop/blob/321281bc2de68f46fed89c87a97dd8c4e35f35c5/less/window.less#L10
+    fontFamily: globalStyles.defaultFontFamily,
+    // Currently -webkit-font-smoothing works only on macOS. See: https://caniuse.com/#search=font-smooth
+    // Set initial to cancel the inherited value
+    WebkitFontSmoothing: 'initial',
+
     // See #11111
     WebkitAppRegion: 'no-drag',
 
@@ -132,11 +149,11 @@ const styles = StyleSheet.create({
   browserButton_default: {
     position: 'relative',
     boxShadow: globalStyles.button.default.boxShadow,
-    cursor: 'pointer',
 
-    // TODO: #9223
+    // #9223
     height: '32px', // 32px == 1rem * 2
     fontSize: globalStyles.spacing.defaultFontSize,
+    fontWeight: 400,
     lineHeight: 1.25,
 
     // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L92
@@ -172,10 +189,9 @@ const styles = StyleSheet.create({
     borderRight: '2px solid transparent',
     borderTop: `2px solid ${globalStyles.button.primary.gradientColor1}`,
     borderBottom: `2px solid ${globalStyles.button.primary.gradientColor2}`,
-    cursor: 'pointer',
 
-    // https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L115
-    fontWeight: 500,
+    // #9223
+    fontWeight: 300,
 
     ':hover': {
       border: `2px solid ${globalStyles.button.primary.borderHoverColor}`,
@@ -187,8 +203,6 @@ const styles = StyleSheet.create({
     background: globalStyles.button.secondary.background,
     border: '1px solid white',
     color: globalStyles.button.secondary.color,
-    cursor: 'pointer',
-    fontWeight: 500,
 
     ':hover': {
       border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,
@@ -224,6 +238,14 @@ const styles = StyleSheet.create({
     }
   },
 
+  browserButton_smallItem: {
+    fontSize: '12px',
+    minWidth: 'fit-content',
+    height: 'auto',
+    paddingTop: '3px',
+    paddingBottom: '3px'
+  },
+
   browserButton_notificationItem: {
     textTransform: 'capitalize',
     height: '28px'
@@ -265,6 +287,14 @@ const styles = StyleSheet.create({
     fontSize: '24px'
   },
 
+  // -webkit-mask-image requires background-color instead of color specified above
+  // See bookmarkTitleHeader.js for an example
+  browserButton_isMaskImage: {
+    ':hover': {
+      backgroundColor: globalStyles.button.default.hoverColor
+    }
+  },
+
   browserButton_disabled: {
     pointerEvents: 'none',
     animation: 'none',
diff --git a/app/renderer/components/common/button.js b/app/renderer/components/common/button.js
deleted file mode 100644
index 8bb60281e65..00000000000
--- a/app/renderer/components/common/button.js
+++ /dev/null
@@ -1,51 +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/. */
-
-const React = require('react')
-const ImmutableComponent = require('../immutableComponent')
-const cx = require('../../../../js/lib/classSet')
-
-/**
- * ************************************************************
- * THIS FILE WILL BE DEPRECATED IN FAVOR OF
- * /app/renderer/components/common/browserButton
- * PLEASE USE THE FORMER FOR NEWLY INTRODUCED CODE
- * ************************************************************
- * THIS FILE WILL BE REMOVED ONCE ALL BUTTONS WERE REFACTORED
- * ************************************************************
- */
-class Button extends ImmutableComponent {
-  render () {
-    if (this.props.iconClass) {
-      return <button disabled={this.props.disabled}
-        data-l10n-id={this.props.l10nId}
-        data-test-id={this.props.testId}
-        data-test2-id={this.props.test2Id}
-        data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
-        style={this.props.inlineStyles}
-        data-button-value={this.props.dataButtonValue}
-        className={cx({
-          browserButton: true,
-          fa: true,
-          [this.props.iconClass]: !!this.props.iconClass,
-          [this.props.className]: !!this.props.className
-        })}
-        onClick={this.props.onClick} />
-    }
-    return <button disabled={this.props.disabled}
-      data-l10n-id={this.props.l10nId}
-      data-test-id={this.props.testId}
-      data-test2-id={this.props.test2Id}
-      data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
-      style={this.props.inlineStyles}
-      className={cx({
-        browserButton: true,
-        [this.props.className]: !!this.props.className
-      })} onClick={this.props.onClick}>
-      {this.props.label}
-    </button>
-  }
-}
-
-module.exports = Button
diff --git a/app/renderer/components/common/clipboardButton.js b/app/renderer/components/common/clipboardButton.js
index baa2796d291..69a765cd7f2 100644
--- a/app/renderer/components/common/clipboardButton.js
+++ b/app/renderer/components/common/clipboardButton.js
@@ -42,14 +42,13 @@ class ClipboardButton extends React.Component {
         this.state.visibleLabel && styles.clipboardButton__label_visible,
         (this.props.bottomTooltip || this.props.topTooltip) && styles.clipboardButton__label_vertical,
         (this.props.bottomTooltip && !this.props.topTooltip) && styles.clipboardButton__label_bottom,
-
-        // Applied on add funds panel
-        (!this.props.bottomTooltip && this.props.topTooltip) && styles.clipboardButton__label_top
+        (!this.props.bottomTooltip && this.props.topTooltip) && styles.clipboardButton__label_top // Applied on add funds panel
       )}
         onAnimationEnd={this.onAnimationEnd}
         data-l10n-id='copied'
       />
       <BrowserButton
+        iconOnly
         iconClass={globalStyles.appIcons.clipboard}
         custom={styles.clipboardButton__browserButton}
         l10nId={this.props.dataL10nId ? this.props.dataL10nId : 'copyToClipboard'}
diff --git a/app/renderer/components/common/modalOverlay.js b/app/renderer/components/common/modalOverlay.js
index 07c4d6b625b..a1107712a2d 100644
--- a/app/renderer/components/common/modalOverlay.js
+++ b/app/renderer/components/common/modalOverlay.js
@@ -5,7 +5,7 @@
 const React = require('react')
 const ImmutableComponent = require('../immutableComponent')
 const cx = require('../../../../js/lib/classSet')
-const Button = require('./button')
+const BrowserButton = require('./browserButton')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
@@ -62,7 +62,7 @@ class ModalOverlay extends ImmutableComponent {
 
     if (!this.props.emptyDialog) {
       close = (this.props.onHide
-        ? <Button className={css(styles.dialog__header__close)}
+        ? <BrowserButton custom={styles.dialog__header__close}
           testId='modalCloseButton'
           onClick={this.props.onHide}
         /> : null)
@@ -174,18 +174,13 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   dialog__header__close: {
-    display: 'inline-block',
     position: 'absolute',
     right: buttonSize,
     top: buttonSize,
     height: buttonSize,
     width: buttonSize,
-    cursor: 'pointer',
-
-    // TODO: refactor button to remove !important
-    padding: '0 !important',
-    background: `url(${closeButton}) center no-repeat !important`,
-    backgroundSize: `${buttonSize} ${buttonSize} !important`,
+    background: `url(${closeButton}) center no-repeat`,
+    backgroundSize: `${buttonSize} ${buttonSize}`,
 
     ':focus': {
       outline: 'none'
diff --git a/app/renderer/components/download/downloadItem.js b/app/renderer/components/download/downloadItem.js
index 6c863b6736f..b0ba76e278a 100644
--- a/app/renderer/components/download/downloadItem.js
+++ b/app/renderer/components/download/downloadItem.js
@@ -4,10 +4,13 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+const globalStyles = require('../styles/global')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 
 // Constants
 const downloadStates = require('../../../../js/constants/downloadStates')
@@ -143,7 +146,7 @@ class DownloadItem extends React.Component {
       l10nStateArgs.downloadPercent = this.props.percentageComplete
     }
 
-    return <span
+    return <section
       onContextMenu={contextMenus.onDownloadsToolbarContextMenu.bind(null, this.props.downloadId, this.props.download)}
       onDoubleClick={this.onOpenDownload}
       onMouseLeave={this.onHideDeleteConfirmation}
@@ -156,96 +159,117 @@ class DownloadItem extends React.Component {
       })}>
       {
         this.props.deleteConfirmationVisible
-        ? <div className='deleteConfirmation'>
-          <span data-l10n-id='downloadDeleteConfirmation' /><Button testId='confirmDeleteButton' l10nId='ok' className='primaryButton confirmDeleteButton' onClick={this.onDeleteDownload} />
+        ? <div className={cx({
+          deleteConfirmation: true,
+          [css(styles.downloadItems__deleteConfirmation)]: true
+        })}>
+          <span data-l10n-id='downloadDeleteConfirmation' />
+          <BrowserButton primaryColor smallItem
+            testId='confirmDeleteButton'
+            l10nId='ok'
+            onClick={this.onDeleteDownload}
+          />
         </div>
         : null
       }
-      <div className='downloadActions'>
-        {
-          this.props.allowPause
-          ? <Button
-            testId='pauseButton'
-            className='pauseButton'
-            l10nId='downloadPause'
-            iconClass='fa-pause'
-            onClick={this.onPauseDownload}
-          />
-          : null
-        }
-        {
-          this.props.allowResume
-          ? <Button
-            testId='resumeButton'
-            className='resumeButton'
-            l10nId='downloadResume'
-            iconClass='fa-play'
-            onClick={this.onResumeDownload}
-          />
-          : null
-        }
-        {
-          this.props.allowCancel
-          ? <Button
-            testId='cancelButton'
-            className='cancelButton'
-            l10nId='downloadCancel'
-            iconClass='fa-times'
-            onClick={this.onCancelDownload}
-          />
-          : null
-        }
-        {
-          this.props.allowRedownload
-          ? <Button
-            testId='redownloadButton'
-            className='redownloadButton'
-            l10nId='downloadRedownload'
-            iconClass='fa-repeat'
-            onClick={this.onReDownload}
-          />
-          : null
-        }
-        {
-          this.props.allowCopyLink
-          ? <Button
-            testId='copyLinkButton'
-            className='copyLinkButton'
-            l10nId='downloadCopyLinkLocation'
-            iconClass='fa-link'
-            onClick={this.onCopyLinkToClipboard}
-          />
-          : null
-        }
-        {
-          this.props.allowOpenDownloadLocation
-          ? <Button
-            testId='revealButton'
-            className='revealButton'
-            l10nId='downloadOpenPath'
-            iconClass='fa-folder-open-o'
-            onClick={this.onRevealDownload}
-          />
-          : null
-        }
-        {
-          this.props.allowDelete
-          ? <Button
-            testId='deleteButton'
-            className='deleteButton'
-            l10nId='downloadDelete'
-            iconClass='fa-trash-o'
-            onClick={this.onShowDeleteConfirmation}
-          />
-          : null
-        }
+      <div className={cx({
+        downloadActions: true,
+        [css(styles.downloadItems__item__actions)]: true
+      })}>
+        <div className={css(styles.downloadItems__item__actions__left)}>
+          {
+            this.props.allowPause
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.pause}
+              size='15px'
+              testId='pauseButton'
+              l10nId='downloadPause'
+              onClick={this.onPauseDownload}
+            />
+            : null
+          }
+          {
+            this.props.allowResume
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.resume}
+              size='15px'
+              testId='resumeButton'
+              l10nId='downloadResume'
+              onClick={this.onResumeDownload}
+            />
+            : null
+          }
+          {
+            this.props.allowCancel
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.remove}
+              size='15px'
+              testId='cancelButton'
+              l10nId='downloadCancel'
+              onClick={this.onCancelDownload}
+            />
+            : null
+          }
+          {
+            this.props.allowRedownload
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.retry}
+              size='15px'
+              testId='redownloadButton'
+              l10nId='downloadRedownload'
+              onClick={this.onReDownload}
+            />
+            : null
+          }
+          {
+            this.props.allowCopyLink
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.link}
+              size='15px'
+              testId='copyLinkButton'
+              l10nId='downloadCopyLinkLocation'
+              onClick={this.onCopyLinkToClipboard}
+            />
+            : null
+          }
+          {
+            this.props.allowOpenDownloadLocation
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.openLocation}
+              size='15px'
+              testId='revealButton'
+              l10nId='downloadOpenPath'
+              onClick={this.onRevealDownload}
+            />
+            : null
+          }
+          {
+            this.props.allowDelete
+            ? <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.trashO}
+              size='15px'
+              testId='deleteButton'
+              l10nId='downloadDelete'
+              onClick={this.onShowDeleteConfirmation}
+            />
+            : null
+          }
+        </div>
         {
           this.props.allowRemoveFromList
-          ? <Button
+          ? <BrowserButton
+            iconOnly
+            iconClass={globalStyles.appIcons.remove}
+            size='15px'
             testId='downloadRemoveFromList'
             l10nId='downloadRemoveFromList'
-            iconClass='fa-times'
-            className='removeDownloadFromList'
             onClick={this.onClearDownload}
           />
           : null
@@ -256,8 +280,11 @@ class DownloadItem extends React.Component {
         ? <div data-test-id='downloadProgress' className='downloadProgress' style={progressStyle} />
         : null
       }
-      <div className='downloadInfo'>
-        <span>
+      <div className={cx({
+        downloadInfo: true,
+        [css(styles.downloadItems__item__info)]: true
+      })}>
+        <div>
           <div data-test-id='downloadFilename' className='downloadFilename' title={this.props.fileName + '\n' + locale.translation(this.props.statel10n)}>
             {this.props.fileName}
           </div>
@@ -280,11 +307,43 @@ class DownloadItem extends React.Component {
             ? <div className='downloadState' data-l10n-id={this.props.statel10n} data-l10n-args={JSON.stringify(l10nStateArgs)} />
             : null
           }
-        </span>
+        </div>
         <span className='downloadArrow fa-caret-down fa' />
       </div>
-    </span>
+    </section>
   }
 }
 
+const styles = StyleSheet.create({
+  downloadItems__deleteConfirmation: {
+    fontSize: '12px',
+    marginTop: globalStyles.downloadBar.item.info.margin,
+    paddingBottom: globalStyles.downloadBar.item.info.margin
+  },
+
+  downloadItems__item__actions: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: globalStyles.downloadBar.item.info.margin
+  },
+
+  downloadItems__item__actions__left: {
+    display: 'flex',
+    justifyContent: 'space-between',
+
+    // magic number
+    width: '90px'
+  },
+
+  downloadItems__item__info: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: globalStyles.downloadBar.item.info.margin,
+    marginBottom: globalStyles.downloadBar.item.info.margin
+  }
+})
+
 module.exports = ReduxComponent.connect(DownloadItem)
diff --git a/app/renderer/components/download/downloadsBar.js b/app/renderer/components/download/downloadsBar.js
index 080b89d0581..ce4cf5e86bd 100644
--- a/app/renderer/components/download/downloadsBar.js
+++ b/app/renderer/components/download/downloadsBar.js
@@ -8,7 +8,6 @@ const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const Button = require('../common/button')
 const BrowserButton = require('../common/browserButton')
 const DownloadItem = require('./downloadItem')
 
@@ -22,6 +21,9 @@ const contextMenus = require('../../../../js/contextMenus')
 const downloadUtil = require('../../../../js/state/downloadUtil')
 const cx = require('../../../../js/lib/classSet')
 
+const closeDownloadButton = require('../../../../img/toolbar/close_download_btn.svg')
+const closeDownloadButtonHover = require('../../../../img/toolbar/close_download_btn_hover.svg')
+
 class DownloadsBar extends React.Component {
   constructor (props) {
     super(props)
@@ -65,15 +67,16 @@ class DownloadsBar extends React.Component {
         downloadBarButtons: true,
         [css(styles.downloadsBar__downloadBarButtons)]: true
       })}>
-        <BrowserButton
-          secondaryColor
+        <BrowserButton secondaryColor
+          custom={styles.downloadsBar__downloadBarButtons__viewAllButton}
           l10nId='downloadViewAll'
           testId='downloadViewAll'
-          custom={styles.downloadsBar__downloadBarButtons__viewAllButton}
           onClick={this.onShowDownloads}
         />
-        <Button
-          className='downloadButton hideDownloadsToolbar'
+        <BrowserButton
+          iconOnly
+          size='14px'
+          custom={styles.downloadsBar__downloadBarButtons__hideButton}
           testId='hideDownloadsToolbar'
           onClick={this.onHideDownloadsToolbar}
         />
@@ -82,8 +85,6 @@ class DownloadsBar extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(DownloadsBar)
-
 const styles = StyleSheet.create({
   downloadsBar__downloadBarButtons: {
     display: 'flex',
@@ -93,5 +94,15 @@ const styles = StyleSheet.create({
 
   downloadsBar__downloadBarButtons__viewAllButton: {
     marginRight: '20px'
+  },
+
+  downloadsBar__downloadBarButtons__hideButton: {
+    background: `url(${closeDownloadButton}) center no-repeat !important`,
+
+    ':hover': {
+      background: `url(${closeDownloadButtonHover}) center no-repeat !important`
+    }
   }
 })
+
+module.exports = ReduxComponent.connect(DownloadsBar)
diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
index 553851afc93..0b6474d0a0c 100644
--- a/app/renderer/components/main/braveryPanel.js
+++ b/app/renderer/components/main/braveryPanel.js
@@ -153,7 +153,8 @@ class BraveryPanel extends React.Component {
             rightl10nId='shieldsUp'
             checkedOn={this.props.shieldsUp}
           />
-          <BrowserButton custom={styles.braveryPanel_compact__header__top__right__close}
+          <BrowserButton
+            custom={styles.braveryPanel_compact__header__top__right__close}
             testId='braveryCloseButton'
             onClick={this.onHide}
           />
@@ -581,9 +582,11 @@ class BraveryPanel extends React.Component {
                   styles.braveryPanel__body__advanced__control__forms__title
                 )}>
                   <span data-l10n-id='fingerprintingProtection' />
-                  <span className={globalStyles.appIcons.question}
-                    title={config.fingerprintingInfoUrl}
+                  <BrowserButton
+                    iconClass={globalStyles.appIcons.question}
+                    custom={styles.braveryPanel__body__iconButton}
                     onClick={this.onInfoClick}
+                    title={config.fingerprintingInfoUrl}
                   />
                 </div>
 
@@ -643,9 +646,13 @@ class BraveryPanel extends React.Component {
               styles.braveryPanel__body__footer__reload,
               styles.braveryPanel__body__footer__reload_clickable
             )}
-              onClick={this.onReload}>
+              onClick={this.onReload}
+            >
               <span className={css(styles.braveryPanel__body__footer__reload__text)} data-l10n-id='reload' />
-              <span className='fa fa-repeat' />
+              <BrowserButton
+                iconClass={globalStyles.appIcons.retry}
+                custom={styles.braveryPanel__body__iconButton}
+              />
             </div>
           </div>
         </section>
@@ -654,8 +661,6 @@ class BraveryPanel extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(BraveryPanel)
-
 const displayHost = {
   fontSize: '20px',
   fontWeight: 'normal',
@@ -806,19 +811,13 @@ const styles = StyleSheet.create({
   },
   braveryPanel_compact__header__top__right__close: {
     // ref: https://github.com/brave/browser-laptop/blob/master/app/renderer/components/common/modalOverlay.js#L160
-    display: 'inline-block',
-    color: globalStyles.braveryPanel.header.color,
-    height: buttonSize,
-    width: buttonSize,
-    cursor: 'pointer',
     position: 'absolute',
-    top: '15px',
     right: '10px',
-
-    // TODO: refactor button to remove !important
-    padding: '0 !important',
-    background: `url(${closeButton}) center no-repeat !important`,
-    backgroundSize: `${buttonSize} ${buttonSize} !important`,
+    top: '15px',
+    height: buttonSize,
+    width: buttonSize,
+    background: `url(${closeButton}) center no-repeat`,
+    backgroundSize: `${buttonSize} ${buttonSize}`,
 
     ':focus': {
       outline: 'none'
@@ -945,6 +944,12 @@ const styles = StyleSheet.create({
     height: '1px',
     margin: '1rem 0'
   },
+  braveryPanel__body__iconButton: {
+    fontSize: '.9rem',
+    lineHeight: '.9rem',
+    height: '.9rem',
+    width: '.9rem'
+  },
   braveryPanel__body__footer: {
     display: 'flex',
     flexFlow: 'row wrap',
@@ -958,14 +963,12 @@ const styles = StyleSheet.create({
   },
   braveryPanel__body__footer__reload: {
     display: 'flex',
-    alignItems: 'baseline'
+    alignItems: 'baseline',
+    cursor: 'pointer'
   },
   braveryPanel__body__footer__reload__text: {
     marginRight: '.3rem'
   },
-  braveryPanel__body__footer__reload_clickable: {
-    cursor: 'pointer'
-  },
 
   // braveryPanelBody - Compact Panel
   braveryPanel_compact__body: {
@@ -1038,12 +1041,6 @@ const styles = StyleSheet.create({
   braveryPanel__body__advanced__control__switchControl_noScript: {
     marginTop: '2.5px'
   },
-  braveryPanel__body__advanced__control__switchControl__infoButton: {
-    display: 'inline',
-    cursor: 'pointer',
-    paddingLeft: '2px',
-    fontSize: '15px'
-  },
 
   // controlWrapper - Normal Panel
   braveryPanel__body__advanced__control__forms__dropdown: {
@@ -1060,3 +1057,5 @@ const styles = StyleSheet.create({
     padding: '0 4px'
   }
 })
+
+module.exports = ReduxComponent.connect(BraveryPanel)
diff --git a/app/renderer/components/main/clearBrowsingDataPanel.js b/app/renderer/components/main/clearBrowsingDataPanel.js
index 6c8d544a6ed..c96e4708b91 100644
--- a/app/renderer/components/main/clearBrowsingDataPanel.js
+++ b/app/renderer/components/main/clearBrowsingDataPanel.js
@@ -9,7 +9,7 @@ const ipc = require('electron').ipcRenderer
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {
   CommonForm,
@@ -125,12 +125,12 @@ class ClearBrowsingDataPanel extends React.Component {
             onClick={this.onToggleSavedSiteSettings} />
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelButton'
             onClick={this.onCancel}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             l10nId='clear'
             testId='clearDataButton'
             onClick={this.onClear}
diff --git a/app/renderer/components/main/importBrowserDataPanel.js b/app/renderer/components/main/importBrowserDataPanel.js
index d81ffec9f46..a4939228280 100644
--- a/app/renderer/components/main/importBrowserDataPanel.js
+++ b/app/renderer/components/main/importBrowserDataPanel.js
@@ -9,7 +9,7 @@ const Immutable = require('immutable')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {
   CommonForm,
@@ -139,14 +139,19 @@ class ImportBrowserDataPanel extends React.Component {
             onClick={this.onTogglePasswords}
             disabled={!this.props.isSupportingPasswords}
           />
-
         </CommonFormSection>
         <CommonFormSection>
           <div data-l10n-id='importDataCloseBrowserWarning' />
         </CommonFormSection>
         <CommonFormSection buttons testId='importBrowserDataButtons'>
-          <Button l10nId='cancel' className='whiteButton' onClick={this.onHide} />
-          <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
+          <BrowserButton groupedItem secondaryColor
+            l10nId='cancel'
+            onClick={this.onHide}
+          />
+          <BrowserButton groupedItem primaryColor
+            l10nId='import'
+            onClick={this.onImport}
+          />
         </CommonFormSection>
         <CommonFormSection bottom testId='importBrowserDataWarning'>
           <div data-l10n-id='importDataWarning' />
diff --git a/app/renderer/components/main/loginRequired.js b/app/renderer/components/main/loginRequired.js
index 213e5022cbc..8e3cb62ec93 100644
--- a/app/renderer/components/main/loginRequired.js
+++ b/app/renderer/components/main/loginRequired.js
@@ -7,7 +7,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const {
   CommonForm,
   CommonFormSection,
@@ -137,8 +137,14 @@ class LoginRequired extends React.Component {
           </div>
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
-          <Button l10nId='ok' className='primaryButton' onClick={this.onSave} />
+          <BrowserButton groupedItem secondaryColor
+            l10nId='cancel'
+            onClick={this.onClose}
+          />
+          <BrowserButton groupedItem primaryColor
+            l10nId='ok'
+            onClick={this.onSave}
+          />
         </CommonFormSection>
       </CommonForm>
     </Dialog>
diff --git a/app/renderer/components/main/siteInfo.js b/app/renderer/components/main/siteInfo.js
index 425f1458394..8cc29d12877 100644
--- a/app/renderer/components/main/siteInfo.js
+++ b/app/renderer/components/main/siteInfo.js
@@ -10,7 +10,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const FlyoutDialog = require('../common/flyoutDialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -132,9 +132,8 @@ class SiteInfo extends React.Component {
     // TODO(Anthony): Hide it until muon support linux
     if (!isLinux) {
       return <div className={css(styles.connectionInfo__viewCertificateButton)}>
-        <Button
+        <BrowserButton primaryColor
           l10nId='viewCertificate'
-          className='primaryButton'
           testId='viewCertificate'
           onClick={this.onViewCertificate}
         />
@@ -157,15 +156,13 @@ class SiteInfo extends React.Component {
       return <div className={css(styles.connectionInfo)}>
         <div data-test-id='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' />
         <div className={css(styles.connectionInfo__viewCertificateButton)}>
-          <Button
+          <BrowserButton groupedItem secondaryColor
             l10nId='allowRunInsecureContent'
-            className='whiteButton'
             testId='allowRunInsecureContentButton'
             onClick={this.onAllowRunInsecureContent}
           />
-          <Button
+          <BrowserButton groupedItem primaryColor
             l10nId='dismissAllowRunInsecureContent'
-            className='primaryButton'
             testId='dismissAllowRunInsecureContentButton'
             onClick={this.onHide}
           />
@@ -176,15 +173,13 @@ class SiteInfo extends React.Component {
       return <div className={css(styles.connectionInfo)}>
         <div data-test-id='denyRunInsecureContentWarning' data-l10n-id='denyRunInsecureContentWarning' />
         <div className={css(styles.connectionInfo__viewCertificateButton)}>
-          <Button
+          <BrowserButton groupedItem secondaryColor
             l10nId='dismissDenyRunInsecureContent'
-            className='whiteButton'
             testId='dismissDenyRunInsecureContentButton'
             onClick={this.onHide}
           />
-          <Button
+          <BrowserButton groupedItem primaryColor
             l10nId='denyRunInsecureContent'
-            className='primaryButton'
             testId='denyRunInsecureContentButton'
             onClick={this.onDenyRunInsecureContent}
           />
diff --git a/app/renderer/components/main/widevineInfo.js b/app/renderer/components/main/widevineInfo.js
index e2738b91aeb..dbae49254dd 100644
--- a/app/renderer/components/main/widevineInfo.js
+++ b/app/renderer/components/main/widevineInfo.js
@@ -11,11 +11,12 @@
 const React = require('react')
 const ImmutableComponent = require('../immutableComponent')
 const appConfig = require('../../../../js/constants/appConfig')
-const cx = require('../../../../js/lib/classSet')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 
+const BrowserButton = require('../common/browserButton')
+
 class WidevineInfo extends ImmutableComponent {
   constructor () {
     super()
@@ -36,24 +37,22 @@ class WidevineInfo extends ImmutableComponent {
     return <section data-test-id='widevineInfo'>
       <div className={css(styles.widevineInfo__div)}>
         <span data-l10n-id='enableWidevineSubtext' />
-        <span className={cx({
-          fa: true,
-          'fa-info-circle': true,
-          [css(styles.cursor)]: true
-        })}
-          data-test-id='onMoreInfo'
+        <BrowserButton
+          iconClass={globalStyles.appIcons.moreInfo}
+          iconStyle={{ fontSize: '1rem' }}
+          custom={styles.widevineInfo__div__moreInfo}
+          testId='onMoreInfo'
           onClick={this.onMoreInfo}
           title={appConfig.widevine.moreInfoUrl}
         />
       </div>
       <div className={css(styles.widevineInfo__div)}>
         <span data-l10n-id='enableWidevineSubtext2' />
-        <span className={cx({
-          fa: true,
-          'fa-info-circle': true,
-          [css(styles.cursor)]: true
-        })}
-          data-test-id='onViewLicense'
+        <BrowserButton
+          iconClass={globalStyles.appIcons.moreInfo}
+          iconStyle={{ fontSize: '1rem' }}
+          custom={styles.widevineInfo__div__moreInfo}
+          testId='onViewLicense'
           onClick={this.onViewLicense}
           title={appConfig.widevine.licenseUrl}
         />
@@ -66,8 +65,11 @@ const styles = StyleSheet.create({
   widevineInfo__div: {
     marginBottom: globalStyles.spacing.dialogInsideMargin
   },
-  cursor: {
-    cursor: 'pointer'
+
+  widevineInfo__div__moreInfo: {
+    height: 'initial',
+    lineHeight: 'initial',
+    width: 'initial'
   }
 })
 
diff --git a/app/renderer/components/main/widevinePanel.js b/app/renderer/components/main/widevinePanel.js
index e4357d29028..dc95294711e 100644
--- a/app/renderer/components/main/widevinePanel.js
+++ b/app/renderer/components/main/widevinePanel.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const WidevineInfo = require('./widevineInfo')
 const SwitchControl = require('../common/switchControl')
 const {
@@ -82,25 +82,27 @@ class WidevinePanel extends React.Component {
           <WidevineInfo createTabRequestedAction={appActions.createTabRequested} />
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelButton'
             onClick={this.onHide}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             l10nId='installAndAllow'
             testId='installAndAllowButton'
-            onClick={this.onInstallAndAllow} />
+            onClick={this.onInstallAndAllow}
+          />
         </CommonFormSection>
         <CommonFormSection bottom>
           <div className={css(styles.flexJustifyCenter)}>
-            {/* TODO: refactor switchControl.js to remove commonStyles.noPadding */}
+            {/* TODO (Suguru): refactor switchControl.js to remove commonStyles.noPadding */}
             <SwitchControl
               className={css(commonStyles.noPadding)}
               rightl10nId='rememberThisDecision'
               rightl10nArgs={JSON.stringify({origin: this.props.origin})}
               onClick={this.onClickRememberForNetflix}
-              checkedOn={this.props.alsoAddRememberSiteSetting} />
+              checkedOn={this.props.alsoAddRememberSiteSetting}
+            />
           </div>
         </CommonFormSection>
       </CommonForm>
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index cef0ab9e966..e7fb5850180 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -31,6 +31,7 @@ const cx = require('../../../../../js/lib/classSet')
 
 // Actions
 const appActions = require('../../../../../js/actions/appActions')
+const aboutActions = require('../../../../../js/about/aboutActions')
 
 // TODO: report when funds are too low
 // TODO: support non-USD currency
@@ -51,8 +52,9 @@ class EnabledContent extends ImmutableComponent {
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (ledgerData.get('creating') ? () => {} : this.createWallet())
 
-    return <div>
+    return <div className={css(styles.buttons_wallet)}>
       <BrowserButton
+        groupedItem
         primaryColor
         panelItem
         testId={buttonText}
@@ -61,12 +63,15 @@ class EnabledContent extends ImmutableComponent {
         onClick={onButtonClick.bind(this)}
         disabled={!ledgerData.get('created')}
       />
-      <a className={cx({
-        [globalStyles.appIcons.question]: true,
-        [css(styles.iconLink)]: true
-      })}
-        href='https://brave.com/faq-payments/#brave-payments'
-        target='_blank' rel='noopener'
+      <BrowserButton
+        groupedItem
+        iconOnly
+        iconClass={globalStyles.appIcons.question}
+        size='.95rem'
+        l10nId='paymentsFAQLink'
+        onClick={aboutActions.createTabRequested.bind(null, {
+          url: 'https://brave.com/faq-payments/#brave-payments'
+        })}
       />
     </div>
   }
@@ -84,11 +89,9 @@ class EnabledContent extends ImmutableComponent {
     }
 
     return <BrowserButton
-      custom={[
-        styles.claimButton
-      ]}
       secondaryColor
       panelItem
+      custom={styles.claimButton}
       testId={'claimButton'}
       onClick={this.onClaimClick}
       disabled={!ledgerData.get('created')}
@@ -415,15 +418,9 @@ const gridStyles = StyleSheet.create({
 })
 
 const styles = StyleSheet.create({
-  iconLink: {
-    color: globalStyles.color.mediumGray,
-    fontSize: globalStyles.payments.fontSize.regular,
-    marginLeft: '10px',
-    textDecoration: 'none',
-
-    ':hover': {
-      textDecoration: 'none !important'
-    }
+  buttons_wallet: {
+    display: 'flex',
+    alignItems: 'center'
   },
 
   enabledContent__walletBar: {
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index d33654ca1bc..22d160a6d58 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -220,18 +220,22 @@ class LedgerTable extends ImmutableComponent {
       },
       {
         html: <div className={css(styles.actionIcons)}>
-          <span className={css(
-            styles.actionIcons__icon,
-            styles.actionIcons__icon_pin,
-            pinned && styles.actionIcons__icon_pin_isPinned
-          )}
+          <BrowserButton
+            isMaskImage
+            custom={[
+              styles.actionIcons__icon,
+              styles.actionIcons__icon_pin,
+              pinned && styles.actionIcons__icon_pin_isPinned
+            ]}
             onClick={this.togglePinSite.bind(this, this.getHostPattern(synopsis), !pinned, percentage)}
-            data-test-pinned={pinned}
+            testPinned={pinned}
           />
-          <span className={css(
-            styles.actionIcons__icon,
-            styles.actionIcons__icon_remove
-          )}
+          <BrowserButton
+            isMaskImage
+            custom={[
+              styles.actionIcons__icon,
+              styles.actionIcons__icon_remove
+            ]}
             onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}
           />
         </div>,
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index af8f1549714..5ff49e66713 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -7,10 +7,10 @@ const Immutable = require('immutable')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
-const cx = require('../../../../js/lib/classSet')
 const ImmutableComponent = require('../immutableComponent')
 const ModalOverlay = require('../common/modalOverlay')
 
+const BrowserButton = require('../common/browserButton')
 const {SettingCheckbox} = require('../common/settings')
 const {
   sectionTitleStyles,
@@ -42,6 +42,7 @@ const batIcon = require('../../../extensions/brave/img/ledger/cryptoIcons/BAT_ic
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 const {formatCurrentBalance, batToCurrencyString} = require('../../../common/lib/ledgerUtil')
+const aboutActions = require('../../../../js/about/aboutActions')
 
 class PaymentsTab extends ImmutableComponent {
   constructor () {
@@ -232,14 +233,15 @@ class PaymentsTab extends ImmutableComponent {
                 styles.switch__label_right
               )}
             />
-            <a className={cx({
-              fa: true,
-              'fa-question-circle': true,
-              [css(styles.payments__title__switch__moreInfo)]: true
-            })}
-              href='https://brave.com/Payments_FAQ.html'
-              data-l10n-id='paymentsFAQLink'
-              rel='noopener' target='_blank'
+            <BrowserButton
+              iconOnly
+              iconClass={globalStyles.appIcons.question}
+              size='.95rem'
+              custom={styles.payments__title__switch__moreInfo}
+              l10nId='paymentsFAQLink'
+              onClick={aboutActions.createTabRequested.bind(null, {
+                url: 'https://brave.com/faq-payments/#brave-payments'
+              })}
             />
           </div>
 
@@ -259,22 +261,28 @@ class PaymentsTab extends ImmutableComponent {
                   )}
                 />
                 <div className={css(styles.payments__title__actions__icons)}>
-                  <a className={css(
-                    styles.payments__title__actions__icons__icon,
-                    styles.payments__title__actions__icons__icon_history,
-                    !this.hasWalletTransaction && styles.payments__title__actions__icons__icon_disabled
-                  )}
-                    data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
-                    data-l10n-id='paymentHistoryIcon'
+                  <BrowserButton
+                    iconOnly
+                    size='25px'
+                    custom={[
+                      styles.payments__title__actions__icons__icon,
+                      styles.payments__title__actions__icons__icon_history,
+                      !this.hasWalletTransaction && styles.payments__title__actions__icons__icon_disabled
+                    ]}
+                    testId={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
+                    l10nId='paymentHistoryIcon'
                     onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
                   />
-                  <a className={css(
-                    styles.payments__title__actions__icons__icon,
-                    styles.payments__title__actions__icons__icon_settings,
-                    !enableSettings && styles.payments__title__actions__icons__icon_disabled
-                  )}
-                    data-test-id={!enableSettings ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
-                    data-l10n-id='advancedSettingsIcon'
+                  <BrowserButton
+                    iconOnly
+                    size='25px'
+                    custom={[
+                      styles.payments__title__actions__icons__icon,
+                      styles.payments__title__actions__icons__icon_settings,
+                      !enableSettings && styles.payments__title__actions__icons__icon_disabled
+                    ]}
+                    testId={!enableSettings ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
+                    l10nId='advancedSettingsIcon'
                     onClick={enableSettings ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
                   />
                 </div>
@@ -397,18 +405,14 @@ const styles = StyleSheet.create({
   },
 
   payments__title__actions__icons: {
+    display: 'flex',
     position: 'relative',
     top: '3.5px',
-
-    // See: #11580
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap' // See: #11580
   },
 
   payments__title__actions__icons__icon: {
     backgroundColor: globalStyles.color.braveOrange,
-    width: '25px',
-    height: '26px',
-    display: 'inline-block',
     position: 'relative',
 
     ':hover': {
diff --git a/app/renderer/components/preferences/pluginsTab.js b/app/renderer/components/preferences/pluginsTab.js
index 2a5f94a9024..9498af2116b 100644
--- a/app/renderer/components/preferences/pluginsTab.js
+++ b/app/renderer/components/preferences/pluginsTab.js
@@ -5,6 +5,7 @@
 const React = require('react')
 const ImmutableComponent = require('../immutableComponent')
 const aboutActions = require('../../../../js/about/aboutActions')
+const cx = require('../../../../js/lib/classSet')
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 const appConfig = require('../../../../js/constants/appConfig')
@@ -17,11 +18,13 @@ const WidevineInfo = require('../main/widevineInfo')
 const flash = appConfig.resourceNames.FLASH
 const widevine = appConfig.resourceNames.WIDEVINE
 
-const {css} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
 const commonStyles = require('../styles/commonStyles')
 
 const {SettingsList, SettingCheckbox} = require('../common/settings')
 const {DefaultSectionTitle} = require('../common/sectionTitle')
+const BrowserButton = require('../common/browserButton')
 
 class PluginsTab extends ImmutableComponent {
   get flashInstalled () {
@@ -46,10 +49,15 @@ class PluginsTab extends ImmutableComponent {
   }
 
   infoCircle (url) {
-    return <span className='fa fa-info-circle flashInfoIcon'
+    return <BrowserButton
+      iconClass={globalStyles.appIcons.moreInfo}
+      iconOnly
+      size='1rem'
+      custom={styles.flashText__moreInfo__icon}
       onClick={aboutActions.createTabRequested.bind(null, {
         url
-      })} />
+      })}
+    />
   }
 
   render () {
@@ -59,22 +67,25 @@ class PluginsTab extends ImmutableComponent {
       <DefaultSectionTitle data-l10n-id='pluginSettings' />
       <SettingsList>
         <SettingCheckbox checked={this.flashInstalled ? this.props.braveryDefaults.get('flash') : false} dataL10nId='enableFlash' onChange={this.onToggleFlash} disabled={!this.flashInstalled} />
-        <div className='subtext flashText'>
+        <div className={css(styles.flashText)}>
           {
             isDarwin || isWindows
-            ? <div>
+            ? <div className={css(styles.flashText__moreInfo)}>
               {this.infoCircle(appConfig.flash.installUrl)}
               <span data-l10n-id='enableFlashSubtext' />&nbsp;
               <span className={css(commonStyles.linkText)} onClick={aboutActions.createTabRequested.bind(null, {
                 url: appConfig.flash.installUrl
               })} title={appConfig.flash.installUrl}>{'Adobe'}</span>.
             </div>
-            : <div>
-              <span className='fa fa-info-circle flashInfoIcon' />
+            : <div className={css(styles.flashText__moreInfo)}>
+              <span className={cx({
+                [globalStyles.appIcons.moreInfo]: true,
+                [css(styles.flashText__moreInfo__icon)]: true
+              })} />
               <span data-l10n-id='enableFlashSubtextLinux' />
             </div>
           }
-          <div>
+          <div className={css(styles.flashText__moreInfo)}>
             {this.infoCircle(flashInfoLink)}
             <span data-l10n-id='flashTroubleshooting' />&nbsp;
             <span className={css(commonStyles.linkText)}
@@ -101,4 +112,20 @@ class PluginsTab extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  flashText: {
+    margin: '0 0 0 5px'
+  },
+
+  flashText__moreInfo: {
+    display: 'flex',
+    fontSize: '.95rem',
+    marginTop: '5px'
+  },
+
+  flashText__moreInfo__icon: {
+    marginRight: '.25rem'
+  }
+})
+
 module.exports = PluginsTab
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index 5cc6c275511..5ed55c40609 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -486,13 +486,20 @@ class SyncTab extends ImmutableComponent {
         </SectionTitleLabelWrapper>
 
         <div className={css(styles.settingsListContainerMargin__bottom)}>
-          <span className='settingsListTitle' data-l10n-id='syncTitleMessage' />
-          <a href='https://github.com/brave/sync/wiki/Design' rel='noopener' target='_blank'>
-            <span className={cx({
-              fa: true,
-              'fa-question-circle': true
-            })} />
-          </a>
+          <div className={cx({
+            settingsListTitle: true,
+            [css(styles.settingsListContainerMargin__bottom__subText)]: true
+          })}>
+            <span data-l10n-id='syncTitleMessage' />
+            <BrowserButton
+              iconClass={globalStyles.appIcons.question}
+              iconOnly
+              size='1rem'
+              onClick={aboutActions.createTabRequested.bind(null, {
+                url: 'https://github.com/brave/sync/wiki/Design'
+              })}
+            />
+          </div>
           <div className={cx({
             settingsListTitle: true,
             [css(styles.subText)]: true
@@ -549,6 +556,11 @@ const styles = StyleSheet.create({
   settingsListContainerMargin__bottom: {
     marginBottom: globalStyles.spacing.settingsListContainerMargin
   },
+
+  settingsListContainerMargin__bottom__subText: {
+    display: 'flex'
+  },
+
   passphrase: {
     // See: https://github.com/Khan/aphrodite#object-key-ordering
     fontSize: '18px',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 68ea04f0dfc..d37406e48d4 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -147,7 +147,7 @@ const globalStyles = {
     navbarMenubarMargin: '7px',
     navbarButtonSpacing: '4px',
     navbarButtonWidth: '20px',
-    navbarBraveButtonWidth: '23px',
+    navbarBraveButtonWidth: '24px',
     navbarBraveButtonMarginLeft: '80px',
     navbarLeftMarginDarwin: '76px',
     sideBarWidth: '190px',
@@ -239,6 +239,7 @@ const globalStyles = {
     exclude: 'fa fa-ban',
     findNext: 'fa fa-caret-down',
     findPrev: 'fa fa-caret-up',
+    link: 'fa fa-link',
     loading: 'fa fa-spinner fa-spin',
     lock: 'fa fa-lock',
     moreInfo: 'fa fa-info-circle',
@@ -254,6 +255,7 @@ const globalStyles = {
     retry: 'fa fa-repeat',
     search: 'fa fa-search',
     trash: 'fa fa-trash',
+    trashO: 'fa fa-trash-o',
     unlock: 'fa fa-unlock',
     user: 'fa fa-user',
     volumeOff: 'fa fa-volume-off',
@@ -345,13 +347,6 @@ const globalStyles = {
     }
   },
 
-  // TODO (Suguru): move them to payment.js after style refactoring is done
-  payments: {
-    fontSize: {
-      regular: '14.5px'
-    }
-  },
-
   sortableTable: {
     cell: {
       normal: {
@@ -362,6 +357,21 @@ const globalStyles = {
         padding: '.5rem'
       }
     }
+  },
+
+  // TODO (Suguru): move them to payment.js after style refactoring is done
+  payments: {
+    fontSize: {
+      regular: '14.5px'
+    }
+  },
+
+  downloadBar: {
+    item: {
+      info: {
+        margin: '6px'
+      }
+    }
   }
 }
 
diff --git a/docs/style.md b/docs/style.md
index 57a968abb8e..42dc03048a2 100644
--- a/docs/style.md
+++ b/docs/style.md
@@ -730,18 +730,18 @@ Once we have our own set of icons we can remove that, but for now you'll need to
 
 ## Testing styled-components
 
-As styles are converted from LESS to Aphrodite, we will lose the ability to control the generated class names. This means for our webdriver tests will no longer be able to use class names as selectors. Instead we will be adding the attribute `data-test-id` to elements. This approach gives us the added benefit of differentiating between code meant for presentation and code meant for testing.
+As styles are converted from LESS to Aphrodite, we will lose the ability to control the generated class names. This means for our webdriver tests will no longer be able to use class names as selectors. Instead we will be adding the attribute `data-test-id` or `testId` to elements. This approach gives us the added benefit of differentiating between code meant for presentation and code meant for testing.
 
 An example would be moving:
 
 ```jsx
-<Button className='paymentHistoryButton' l10nId={buttonText} onClick={onButtonClick.bind(this)} />
+<Dialog className='autofillCreditCardPanel' l10nId={buttonText} onClick={onButtonClick.bind(this)} />
 ```
 
 to:
 
 ```jsx
-<Button className={css(paymentButton)} data-test-id='paymentHistoryButton' l10nId={buttonText} onClick={onButtonClick.bind(this)} />
+<Dialog testId='autofillCreditCardPanel' l10nId={buttonText} onClick={onButtonClick.bind(this)} />
 ```
 
 ## All set, where do I start?
diff --git a/js/about/autofill.js b/js/about/autofill.js
index 591ebc60c3a..335a0c6a02c 100644
--- a/js/about/autofill.js
+++ b/js/about/autofill.js
@@ -8,7 +8,7 @@ const Immutable = require('immutable')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const cx = require('../lib/classSet')
 const aboutActions = require('./aboutActions')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 const locale = require('../../js/l10n')
 
 const ipc = window.chrome.ipcRenderer
@@ -218,7 +218,7 @@ class AboutAutofill extends React.Component {
         <h2 data-l10n-id='addresses' />
         <div className='autofillPageContent'>
           {savedAddresssPage}
-          <Button className='primaryButton'
+          <BrowserButton primaryColor
             l10nId='addAddress'
             testId='addAddressButton'
             onClick={this.onAddAddress}
@@ -228,7 +228,7 @@ class AboutAutofill extends React.Component {
         <h2 data-l10n-id='creditCards' />
         <div className='autofillPageContent'>
           {savedCreditCardsPage}
-          <Button className='primaryButton'
+          <BrowserButton primaryColor
             l10nId='addCreditCard'
             testId='addCreditCardButton'
             onClick={this.onAddCreditCard}
diff --git a/js/about/history.js b/js/about/history.js
index b45ca565057..6b0e7c9bd8a 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -222,7 +222,12 @@ class AboutHistory extends React.Component {
           <input type='text' className='searchInput' ref='historySearch' id='historySearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
           {
             this.state.search
-            ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
+            ? <BrowserButton
+              iconClass={globalStyles.appIcons.remove}
+              iconStyle={{ color: globalStyles.color.gray }}
+              custom={styles.headerActions__search__input__button_clear}
+              onClick={this.onClearSearchText}
+            />
             : <span className='fa fa-search searchInputPlaceholder' />
           }
         </div>
@@ -253,6 +258,16 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
 
+  headerActions__search__input__button_clear: {
+    // See siteDetails.less
+    margin: 0,
+    padding: 0,
+    width: 0,
+    position: 'relative',
+    left: '-25px',
+    fontSize: '16px'
+  },
+
   subTitleMargin: {
     marginLeft: globalStyles.spacing.aboutPageSectionPadding
   }
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 3c5f4fcbe62..841658a9dec 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -168,7 +168,7 @@ class GeneralTab extends ImmutableComponent {
             iconOnly
             iconClass={globalStyles.appIcons.moreInfo}
             size='.95rem'
-            custom={styles.appIcons_moreInfo}
+            custom={[styles.appIcons, styles.appIcons_moreInfo]}
             onClick={aboutActions.createTabRequested.bind(null, {
               url: 'https://community.brave.com/t/how-to-set-up-multiple-home-pages/'
             })}
@@ -978,6 +978,10 @@ class AboutPreferences extends React.Component {
 }
 
 const styles = StyleSheet.create({
+  appIcons: {
+    color: globalStyles.color.mediumGray
+  },
+
   appIcons_moreInfo: {
     marginLeft: '5px'
   },
diff --git a/js/about/styles.js b/js/about/styles.js
index 736392fd288..35492f1f8db 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -311,6 +311,11 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton secondaryColor l10nId='secondaryColor' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
+        <BrowserButton primaryColor smallItem l10nId='ok' onClick={this.props.close} />
+        <Pre><Code>
+          &lt;BrowserButton primaryColor smallItem l10nId='ok' onClick={'{this.props.close}'} />
+        </Code></Pre>
+
         <BrowserButton actionItem l10nId='actionButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
           &lt;BrowserButton actionItem l10nId='done' onClick={'{this.onRemoveBookmark}'} />
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 9502e9badfe..083192ec707 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -5,7 +5,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const commonStyles = require('../../../app/renderer/components/styles/commonStyles')
 
 // Components
-const Button = require('../../../app/renderer/components/common/button')
+const BrowserButton = require('../../../app/renderer/components/common/browserButton')
 const TorrentFileList = require('./torrentFileList')
 const TorrentStatus = require('./torrentStatus')
 
@@ -41,7 +41,7 @@ class TorrentViewer extends React.Component {
         )
       }
       mainButton = (
-        <Button className='primaryButton mainButton'
+        <BrowserButton primaryColor
           l10nId='stopDownload'
           testId='stopDownload'
           onClick={() => dispatch('stop')}
@@ -67,7 +67,7 @@ class TorrentViewer extends React.Component {
         />
       )
       mainButton = (
-        <Button className='primaryButton mainButton'
+        <BrowserButton groupedItem primaryColor
           l10nId='startDownload'
           testId='startDownload'
           onClick={() => dispatch('start')}
@@ -81,7 +81,7 @@ class TorrentViewer extends React.Component {
 
     if (torrentIdProtocol === 'magnet:') {
       saveButton = (
-        <Button className='whiteButton copyMagnetLink'
+        <BrowserButton groupedItem secondaryColor
           l10nId='copyMagnetLink'
           testId='copyMagnetLink'
           onClick={() => dispatch('copyMagnetLink')}
@@ -89,7 +89,7 @@ class TorrentViewer extends React.Component {
       )
     } else {
       saveButton = (
-        <Button className='whiteButton saveTorrentFile'
+        <BrowserButton groupedItem secondaryColor
           l10nId='saveTorrentFile'
           testId='saveTorrentFile'
           onClick={() => dispatch('saveTorrentFile')}
diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
index d4b3181fa1f..61970d428ae 100644
--- a/less/about/bookmarks.less
+++ b/less/about/bookmarks.less
@@ -29,6 +29,10 @@
       flex-grow: 1;
 
       .columnHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
         background: linear-gradient(to bottom, @lightGray, @veryLightGray);
         border-top: 1px solid @gray;
         text-align: left;
@@ -80,8 +84,14 @@
 
       .sortableTable {
         user-select: none;
+
         // Custom title column (has add bookmark icon)
-        th:first-of-type > div { display: block; }
+        th:first-of-type > div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
         // Bookmark last visited column
         th:nth-of-type(2), td.date { width: 250px; }
         td {
@@ -142,55 +152,6 @@
   padding-left: 12px;
 }
 
-.addBookmarkFolder,
-.addBookmark {
-  background-color: @buttonColor;
-  -webkit-mask-repeat: no-repeat;
-  width: 24px;
-  height: 26px;
-  float: right;
-  margin-right: 7px;
-}
-
-.addBookmarkFolder {
-  -webkit-mask-image: url('../../img/toolbar/add_BM_folder_btn.svg');
-}
-
-.addBookmark {
-  -webkit-mask-image: url('../../img/toolbar/add_bookmark_btn.svg');
-  width: 20px;
-  height: 20px;
-}
-
-.addBookmark,
-.addBookmarkFolder,
-.importBrowserData,
-.exportBookmarks {
-  &:hover {
-    background-color: #000;
-  }
-}
-
-.exportBookmarks,
-.importBrowserData {
-  background-color: @buttonColor;
-  -webkit-mask-repeat: no-repeat;
-  width: 43px;
-  height: 22px;
-  display: inline-block;
-  vertical-align: top;
-  margin: 7px 0 5px 10px;
-}
-
-
-.importBrowserData {
-  -webkit-mask-image: url('../../img/toolbar/bookmarks_import.svg');
-}
-
-.exportBookmarks {
-  -webkit-mask-image: url('../../img/toolbar/bookmarks_export.svg');
-}
-
 // Reset styles for small breakpoints
 @media (max-width: @breakpointForBookmarksPage) {
   .siteDetailsPage.bookmarksManager {
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 750332ba4d4..dea2c1d17bd 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -82,17 +82,6 @@ a {
   margin: 1.2em 2px 7px;
 }
 
-.settingsList .subtext {
-  &.flashText {
-    margin-top: 0;
-
-    .flashInfoIcon {
-      cursor: pointer;
-      padding: 5px;
-    }
-  }
-}
-
 .settingsListCopy {
   color: @braveOrange;
   cursor: pointer;
@@ -197,12 +186,3 @@ table.sortableTable {
   height: 16px;
   color: @braveOrange;
 }
-
-.widevineInfo {
-  line-height: 1.3em;
-
-  .fa-info-circle {
-    margin-left: 5px;
-    cursor: pointer;
-  }
-}
diff --git a/less/about/siteDetails.less b/less/about/siteDetails.less
index d594785e986..a9cd36f13e7 100644
--- a/less/about/siteDetails.less
+++ b/less/about/siteDetails.less
@@ -21,6 +21,11 @@ body {
       display: flex;
       align-items: center;
 
+      .searchWrapper {
+        display: flex;
+        align-items: center;
+      }
+
       /*overridden from siteDetails.less*/
       input.searchInput {
         padding: 5px;
@@ -38,14 +43,6 @@ body {
         position: relative;
         width: 0;
       }
-
-      .searchInputClear {
-        margin: 0;
-        padding: 0;
-        width: 0;
-        position: relative;
-        left: -25px;
-      }
     }
   }
 
diff --git a/less/downloadBar.less b/less/downloadBar.less
index d62a3d87724..f5113017854 100644
--- a/less/downloadBar.less
+++ b/less/downloadBar.less
@@ -100,9 +100,9 @@
       }
 
       .downloadInfo {
-        display: flex;
-        margin: auto 0;
-        .downloadFilename, .downloadState, .downloadOrigin {
+        .downloadFilename,
+        .downloadState,
+        .downloadOrigin {
           margin: auto 0;
           white-space: nowrap;
           overflow: hidden;
@@ -127,63 +127,19 @@
       }
 
       .downloadActions {
-        margin: 8px 0 0;
-
-        .browserButton {
-          font-size: 14px;
-          height: auto;
-          line-height: inherit;
-          margin: auto 15px auto auto;
-          width: auto;
-
-          &.removeDownloadFromList {
-            float: right;
-            margin-right: 0;
-          }
-
-          &:hover {
-            color: @highlightBlue;
-          }
-        }
+        margin: 6px 0 0;
       }
 
       .deleteConfirmation {
-        line-height: 2;
-        border-bottom: 1px solid #CCC;
-        padding: 5px 0;
-        margin-bottom: auto 0 10px 0;
-        font-size: 12px;
-
-        .confirmDeleteButton {
-          font-weight: normal;
-          padding: 1px;
-          min-width: 50px;
-          float: right;
-          margin-right: -5px;
-        }
+        border-bottom: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
       }
     }
   }
 
   .downloadBarButtons {
     margin: auto 0;
-
-    .downloadButton {
-      background: url('../img/toolbar/close_download_btn.svg') center no-repeat;
-      background-size: 14px 14px;
-      height: 18px;
-      width: 18px;
-
-      &:hover {
-        background: url('../img/toolbar/close_download_btn_hover.svg') center no-repeat;
-        background-size: 14px 14px;
-        height: 18px;
-        width: 18px;
-      }
-
-      &.hideButton:not([disabled]):hover {
-        background: @chromeControlsWarningBackground;
-      }
-    }
   }
 }
diff --git a/test/unit/app/renderer/components/download/downloadBarTest.js b/test/unit/app/renderer/components/download/downloadBarTest.js
index 675e0bd4fb9..e2ab3593a8f 100644
--- a/test/unit/app/renderer/components/download/downloadBarTest.js
+++ b/test/unit/app/renderer/components/download/downloadBarTest.js
@@ -64,6 +64,9 @@ describe('downloadsBar component', function () {
     mockery.registerMock('../../../../js/l10n', {
       translation: () => 'wow such title very translated'
     })
+    mockery.registerMock('../../../../img/toolbar/close_download_btn.svg')
+    mockery.registerMock('../../../../img/toolbar/close_download_btn_hover.svg')
+
     DownloadItem = require('../../../../../../app/renderer/components/download/downloadItem')
     DownloadsBar = require('../../../../../../app/renderer/components/download/downloadsBar')
     appStore = require('../../../../../../js/stores/appStoreRenderer')