diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 1b05461f8304..fb455646a5ba 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -50,28 +50,23 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "fd85070af5114d6ac462c466e78448e4.svg", IDR_BRAVE_NEW_TAB_IMG1 },
         { "314e7529efec41c8867019815f4d8dad.svg", IDR_BRAVE_NEW_TAB_IMG4 },
         { "6c337c63662ee0ba4e57f6f8156d69ce.svg", IDR_BRAVE_NEW_TAB_IMG2 },
-        { "50cc52a4f1743ea74a21da996fe44272.jpg", IDR_BRAVE_NEW_TAB_IMG14 },
         // New tab Backgrounds
-        { "dksfoto1.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
-        { "dksfoto2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
-        { "dksfoto3.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
-        { "dksfoto4.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
-        { "dksfoto5.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
-        { "dksfoto6.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
-        { "dksfoto7.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
-        { "dksfoto8.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
-        { "dksfoto9.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
-        { "dksfoto10.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
-        { "dksfoto11.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
-        { "Phoyoserge_Corsica.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
-        { "Phoyoserge_Corsica2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
-        { "Phoyoserge_DowntownGriffith.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
-        { "Phoyoserge_ElmatadorBeach.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
-        { "Phoyoserge_ParisConciergeri.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND16 },
-        { "Phoyoserge_Theroofparis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND17 },
-        { "Phoyoserge_TheSeantParis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND18 },
-        { "Phoyoserge_VeniseSunset.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND19 },
-        { "Phoyoserge_Yosemite.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND20 },
+        { "ntp-1.webp", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
+        { "ntp-2.webp", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
+        { "ntp-3.webp", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
+        { "ntp-4.webp", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
+        { "ntp-5.webp", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
+        { "ntp-6.webp", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
+        { "ntp-7.webp", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
+        { "ntp-8.webp", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
+        { "ntp-9.webp", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
+        { "ntp-10.webp", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
+        { "ntp-11.webp", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
+        { "ntp-12.webp", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
+        { "ntp-13.webp", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
+        { "ntp-14.webp", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
+        { "ntp-15.webp", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
+        { "ntp-16.webp", IDR_BRAVE_NEW_TAB_BACKGROUND16 },
 
         // private tab
         { "c168145d6bf1abf2c0322636366f7dbe.svg", IDR_BRAVE_PRIVATE_TAB_TOR_IMG },
diff --git a/components/brave_new_tab_ui/components/app.tsx b/components/brave_new_tab_ui/components/app.tsx
index e202fc3e9f84..ab86790607b9 100644
--- a/components/brave_new_tab_ui/components/app.tsx
+++ b/components/brave_new_tab_ui/components/app.tsx
@@ -7,7 +7,6 @@ import { DragDropContext } from 'react-dnd'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import HTML5Backend from 'react-dnd-html5-backend'
-import { Grid, Column } from 'brave-ui/components'
 import { Clock } from 'brave-ui/old'
 
 // Components
@@ -25,7 +24,6 @@ import * as newTabActions from '../actions/new_tab_actions'
 
 // Assets
 require('../../styles/newtab.less')
-require('font-awesome/css/font-awesome.css')
 require('../../fonts/poppins.css')
 require('../../fonts/muli.css')
 
@@ -149,15 +147,13 @@ class NewTabPage extends React.Component<Props, {}> {
         <div data-test-id={this.showImages ? 'bgGradient' : 'gradient'} className={gradientClassName} />
         <div className='content'>
           <main style={theme.newTab}>
-            <div style={theme.newTabStats}>
-              <Grid columns={3}>
-                <Column size={2}>
-                  <Stats stats={newTabData.stats}/>
-                </Column>
-                <Column size={1} customStyle={theme.clockContainer}>
-                  <Clock customStyle={theme.clock} />
-                </Column>
-              </Grid>
+            <div className='newTabStats'>
+              <div className='statsContainer'>
+                <Stats stats={newTabData.stats}/>
+              </div>
+              <div className='clockContainer'>
+                <Clock customStyle={theme.clock} />
+              </div>
             </div>
             <div className='topSitesContainer'>
               <nav className='topSitesGrid'>
diff --git a/components/brave_new_tab_ui/components/block.tsx b/components/brave_new_tab_ui/components/block.tsx
index bc9b7ea77852..510162d62105 100644
--- a/components/brave_new_tab_ui/components/block.tsx
+++ b/components/brave_new_tab_ui/components/block.tsx
@@ -4,12 +4,16 @@
 
 import * as React from 'react'
 import {
-  DragSource, DragSourceCollector,
+  DragSource,
+  DragSourceCollector,
   DragSourceConnector,
-  DragSourceMonitor, DragSourceSpec,
-  DropTarget, DropTargetCollector,
+  DragSourceMonitor,
+  DragSourceSpec,
+  DropTarget,
+  DropTargetCollector,
   DropTargetConnector,
-  DropTargetMonitor, DropTargetSpec
+  DropTargetMonitor,
+  DropTargetSpec
 } from 'react-dnd'
 
 // Utils
@@ -48,7 +52,9 @@ const blockTarget: DropTargetSpec<Props> = {
     const item: Props = monitor.getItem() as Props
     const draggedId = item.id
     if (draggedId !== props.id) {
-      const dragRight = monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x > 0
+      const dragRight =
+        monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x >
+        0
       props.onDraggedSite(draggedId, props.id, dragRight)
     }
   }
@@ -63,7 +69,10 @@ const blockTarget: DropTargetSpec<Props> = {
  * @see http://gaearon.github.io/react-dnd/docs-drop-target.html#the-collecting-function
  */
 
-const sourceCollect: DragSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => {
+const sourceCollect: DragSourceCollector = (
+  connect: DragSourceConnector,
+  monitor: DragSourceMonitor
+) => {
   return {
     connectDragSource: connect.dragSource(),
     isDragging: monitor.isDragging()
@@ -111,51 +120,57 @@ class Block extends React.Component<Props, {}> {
       style,
       favicon
     } = this.props
-    const starIcon = isBookmarked ? 'fa-star' : 'fa-star-o'
-    const pinIcon = isPinned ? 'fa-minus' : 'fa-thumb-tack'
+    const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o'
+    const pinIcon = isPinned ? 'pin' : 'pin-o'
 
-    return connectDragSource(connectDropTarget(
-      <div className='topSiteSquareSpace'>
-        <div
-          className='topSitesElement'
-        >
-          <div className='topSitesActionContainer'>
-            <button
-              className={cx({
-                topSitesActionBtn: true,
-                fa: true,
-                [pinIcon]: true
-              })}
-              onClick={onPinnedTopSite}
-              data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
-            />
-            <button
-              className={cx({
-                topSitesActionBtn: true,
-                fa: true,
-                [starIcon]: true
-              })}
-              onClick={onToggleBookmark}
-              data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            />
-            <button
-              className='topSitesActionBtn fa fa-close'
-              onClick={onIgnoredTopSite}
-              data-l10n-id='removeTopSiteButton'
-            />
+    return connectDragSource(
+      connectDropTarget(
+        <div className='topSiteSquareSpace'>
+          <div className='topSitesElement'>
+            <div className='topSitesActionContainer'>
+              <button
+                className={cx({
+                  topSitesActionBtn: true,
+                  [pinIcon]: true
+                })}
+                onClick={onPinnedTopSite}
+                data-l10n-id={
+                  isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'
+                }
+              />
+              <button
+                className={cx({
+                  topSitesActionBtn: true,
+                  [starIcon]: true
+                })}
+                onClick={onToggleBookmark}
+                data-l10n-id={
+                  isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
+                }
+              />
+              <button
+                className='topSitesActionBtn close'
+                onClick={onIgnoredTopSite}
+                data-l10n-id='removeTopSiteButton'
+              />
+            </div>
+            <a
+              className='topSitesElementFavicon'
+              title={title}
+              href={href}
+              style={style}
+            >
+              {isPinned ? (
+                <div className='pinnedTopSite'>
+                  <span className='icon-container pin' />
+                </div>
+              ) : null}
+              <img src={favicon} />
+            </a>
           </div>
-          <a
-            className='topSitesElementFavicon'
-            title={title}
-            href={href}
-            style={style}
-          >
-            {isPinned ? <div className='pinnedTopSite'><span className='pin fa fa-thumb-tack' /></div> : null}
-            <img src={favicon} />
-          </a>
         </div>
-      </div>
-    ))
+      )
+    )
   }
 }
 
@@ -166,7 +181,9 @@ class Block extends React.Component<Props, {}> {
  *
  * @see http://gaearon.github.io/react-dnd/docs-drag-source.html
  */
-const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
+const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(
+  Block
+)
 
 // Notice that we're exporting the DropTarget and not Block Class.
 /**
@@ -175,4 +192,6 @@ const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
  *
  * @see http://gaearon.github.io/react-dnd/docs-drop-target.html
  */
-export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(source)
+export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(
+  source
+)
diff --git a/components/brave_new_tab_ui/components/footerInfo.tsx b/components/brave_new_tab_ui/components/footerInfo.tsx
index 3402520efd66..9d68591ecfc9 100644
--- a/components/brave_new_tab_ui/components/footerInfo.tsx
+++ b/components/brave_new_tab_ui/components/footerInfo.tsx
@@ -16,24 +16,42 @@ export default class FooterInfo extends React.Component<Props, {}> {
     return (
       <footer className='footerContainer'>
         <div className='copyrightNotice'>
-          {
-            bgImage && bgImage.name
-            ? <div>
+          {bgImage && bgImage.name ? (
+            <div>
               <div className='copyrightCredits'>
                 <span className='photoBy'>{getLocale('photoBy')} </span>
-                <a className='copyrightOwner' href={bgImage.link} rel='noopener' target='_blank'>
+                <a
+                  className='copyrightOwner'
+                  href={bgImage.link}
+                  rel='noopener'
+                  target='_blank'
+                >
+                  {' '}
                   {bgImage.author}
                 </a>
               </div>
-              <span className='photoName'>{bgImage.name}</span>
             </div>
-            : null
-          }
+          ) : null}
         </div>
         <nav className='shortcutsContainer'>
-          <a href='chrome://settings'><span className='shortcutIcon settingsIcon' title={getLocale('preferencesPageTitle')} /></a>
-          <a href='chrome://bookmarks'><span className='shortcutIcon bookmarksIcon' title={getLocale('bookmarksPageTitle')} /></a>
-          <a href='chrome://history'><span className='shortcutIcon historyIcon' title={getLocale('historyPageTitle')} /></a>
+          <a href='chrome://settings'>
+            <span
+              className='shortcutIcon settingsIcon'
+              title={getLocale('preferencesPageTitle')}
+            />
+          </a>
+          <a href='chrome://bookmarks'>
+            <span
+              className='shortcutIcon bookmarksIcon'
+              title={getLocale('bookmarksPageTitle')}
+            />
+          </a>
+          <a href='chrome://history'>
+            <span
+              className='shortcutIcon historyIcon'
+              title={getLocale('historyPageTitle')}
+            />
+          </a>
         </nav>
       </footer>
     )
diff --git a/components/brave_new_tab_ui/components/siteRemovalNotification.tsx b/components/brave_new_tab_ui/components/siteRemovalNotification.tsx
index 2dbbd711aac0..6aaf457c9e71 100644
--- a/components/brave_new_tab_ui/components/siteRemovalNotification.tsx
+++ b/components/brave_new_tab_ui/components/siteRemovalNotification.tsx
@@ -25,7 +25,7 @@ export default class SiteRemovalNotification extends React.Component<Props, {}>
         <span className='notification' i18n-content='thumbRemoved' />
         <span className='siteRemovalAction' onClick={onUndoIgnoredTopSite} i18n-content='undoRemoved' />
         <span className='siteRemovalAction' onClick={onRestoreAll} i18n-content='restoreAll' />
-        <button className='fa fa-close' onClick={onCloseNotification} i18n-content='close' />
+        <button className='icon-container close' onClick={onCloseNotification} i18n-content='close' />
       </div>
     )
   }
diff --git a/components/brave_new_tab_ui/constants/backgrounds.ts b/components/brave_new_tab_ui/constants/backgrounds.ts
index 6a51806255df..0152eb0c32a5 100644
--- a/components/brave_new_tab_ui/constants/backgrounds.ts
+++ b/components/brave_new_tab_ui/constants/backgrounds.ts
@@ -4,123 +4,99 @@
 
 export const images: NewTab.Image[] = [
   {
-    'name': 'Tuolumne Meadows',
-    'source': 'dksfoto1.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '1',
+    'source': 'ntp-1.webp',
+    'author': 'Pok Rie',
+    'link': 'https://www.pexels.com/@pok-rie-33563'
   },
   {
-    'name': 'South Tufa, Mono Lake',
-    'source': 'dksfoto2.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '2',
+    'source': 'ntp-2.webp',
+    'author': 'Jack Millard',
+    'link': 'https://unsplash.com/@millarjb'
   },
   {
-    'name': 'Little Lakes Valley',
-    'source': 'dksfoto3.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '3',
+    'source': 'ntp-3.webp',
+    'author': 'Buzz Andersen',
+    'link': 'https://unsplash.com/@ldandersen'
   },
   {
-    'name': 'Bay Bridge',
-    'source': 'dksfoto4.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '4',
+    'source': 'ntp-4.webp',
+    'author': 'Frank McKenna',
+    'link': 'https://unsplash.com/@frankiefoto'
   },
   {
-    'name': 'Yosemite',
-    'source': 'dksfoto5.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '5',
+    'source': 'ntp-5.webp',
+    'author': 'SpaceX',
+    'link': 'https://www.flickr.com/photos/spacex/'
   },
   {
-    'name': 'Beach Ice',
-    'source': 'dksfoto6.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '6',
+    'source': 'ntp-6.webp',
+    'author': 'SpaceX',
+    'link': 'https://www.flickr.com/photos/spacex/'
   },
   {
-    'name': 'Color and White Trunks',
-    'source': 'dksfoto7.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '7',
+    'source': 'ntp-7.webp',
+    'author': 'SpaceX',
+    'link': 'https://www.flickr.com/photos/spacex/'
   },
   {
-    'name': 'Golden Gate Bridge',
-    'source': 'dksfoto8.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '8',
+    'source': 'ntp-8.webp',
+    'author': 'Will Christiansen',
+    'link': 'https://www.theskyfolk.com'
   },
   {
-    'name': 'Long Lake',
-    'source': 'dksfoto9.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '9',
+    'source': 'ntp-9.webp',
+    'author': 'Will Christiansen',
+    'link': 'https://www.theskyfolk.com'
   },
   {
-    'name': 'San Francisco Skyline',
-    'source': 'dksfoto10.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '10',
+    'source': 'ntp-10.webp',
+    'author': 'Will Christiansen',
+    'link': 'https://www.theskyfolk.com'
   },
   {
-    'name': 'Across Mono Basin',
-    'source': 'dksfoto11.jpg',
-    'author': 'Darrell Sano',
-    'link': 'https://dksfoto.smugmug.com'
+    'name': '11',
+    'source': 'ntp-11.webp',
+    'author': 'Will Christiansen',
+    'link': 'http://www.noutgons.nl/'
   },
   {
-    'name': 'Corsica',
-    'source': 'Phoyoserge_Corsica.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
+    'name': '12',
+    'source': 'ntp-12.webp',
+    'author': 'Artem Bali',
+    'link': 'https://www.pexels.com/@belart84'
   },
   {
-    'name': 'Corsica',
-    'source': 'Phoyoserge_Corsica2.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
+    'name': '13',
+    'source': 'ntp-13.webp',
+    'author': 'Hristo Fidanov',
+    'link': 'https://www.pexels.com/@hristo-fidanov-520662'
   },
   {
-    'name': 'Griffith Park Observatory (Downtown Los Angeles)',
-    'source': 'Phoyoserge_DowntownGriffith.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
+    'name': '14',
+    'source': 'ntp-14.webp',
+    'author': 'Life of Pix',
+    'link': 'https://www.pexels.com/@life-of-pix'
   },
   {
-    'name': 'Elmatador Beach',
-    'source': 'Phoyoserge_ElmatadorBeach.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
+    'name': '15',
+    'source': 'ntp-15.webp',
+    'author': 'Cassie Boca',
+    'link': 'https://unsplash.com/@cassieboca'
   },
   {
-    'name': 'Paris: Conciergerie',
-    'source': 'Phoyoserge_ParisConciergeri.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
-  },
-  {
-    'name': 'Paris: The Roof',
-    'source': 'Phoyoserge_Theroofparis.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
-  },
-  {
-    'name': 'Paris: The Senate',
-    'source': 'Phoyoserge_TheSeantParis.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
-  },
-  {
-    'name': 'Venise Sunset',
-    'source': 'Phoyoserge_VeniseSunset.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
-  },
-  {
-    'name': 'Yosemite',
-    'source': 'Phoyoserge_Yosemite.jpg',
-    'author': 'Serge Ramelli',
-    'link': 'https://www.photoserge.com/'
+    'name': '16',
+    'source': 'ntp-16.webp',
+    'author': 'Braden Jarvis',
+    'link': 'https://unsplash.com/@jarvisphoto'
   }
 ]
diff --git a/components/brave_new_tab_ui/constants/theme.ts b/components/brave_new_tab_ui/constants/theme.ts
index 84e89df0d93c..38f8077c015e 100644
--- a/components/brave_new_tab_ui/constants/theme.ts
+++ b/components/brave_new_tab_ui/constants/theme.ts
@@ -4,34 +4,16 @@
 
 export const theme = {
   newTab: {
-    fontFamily: '"Poppins", sans-serif'
-  },
-  newTabStats: {
-    padding: '40px 0'
+    fontFamily: 'Poppins, sans-serif'
   },
   newPrivateTab: {
-    fontFamily: '"Poppins", sans-serif',
+    fontFamily: 'Poppins, sans-serif',
     padding: '80px 60px 40px',
     background: 'linear-gradient(#4b3c6e, #000)'
   },
-  trackersBlocked: {
-    counterColor: '#f39030',
-    descriptionColor: '#fff'
-  },
-  adsBlocked: {
-    counterColor: '#fe521d',
-    descriptionColor: '#fff'
-  },
-  httpsUpgrades: {
-    counterColor: '#0796fa',
-    descriptionColor: '#fff'
-  },
-  estimatedTime: {
-    counterColor: '#999999',
-    descriptionColor: '#fff'
-  },
   clock: {
-    color: '#fff'
+    color: '#fff',
+    fontSize: '90px'
   },
   clockContainer: {
     justifyContent: 'flex-end'
@@ -40,14 +22,14 @@ export const theme = {
     maxWidth: '650px',
     margin: '60px auto 0',
     color: 'rgba(255,255,255,0.8)',
-    fontFamily: '"Muli", sans-serif'
+    fontFamily: 'Muli, sans-serif'
   },
   media: {
     width: '80px',
     margin: '0 0 0 25px'
   },
   title: {
-    fontFamily: '"Poppins", sans-serif',
+    fontFamily: 'Poppins, sans-serif',
     fontWeight: '400',
     color: '#fff'
   },
diff --git a/components/img/newtab/Phoyoserge_Corsica.jpg b/components/img/newtab/Phoyoserge_Corsica.jpg
deleted file mode 100644
index dc4a6043e32e..000000000000
Binary files a/components/img/newtab/Phoyoserge_Corsica.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_Corsica2.jpg b/components/img/newtab/Phoyoserge_Corsica2.jpg
deleted file mode 100644
index d62deabe8163..000000000000
Binary files a/components/img/newtab/Phoyoserge_Corsica2.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_DowntownGriffith.jpg b/components/img/newtab/Phoyoserge_DowntownGriffith.jpg
deleted file mode 100644
index e947d19a8a10..000000000000
Binary files a/components/img/newtab/Phoyoserge_DowntownGriffith.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_ElmatadorBeach.jpg b/components/img/newtab/Phoyoserge_ElmatadorBeach.jpg
deleted file mode 100644
index ccec4401fefa..000000000000
Binary files a/components/img/newtab/Phoyoserge_ElmatadorBeach.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_ParisConciergeri.jpg b/components/img/newtab/Phoyoserge_ParisConciergeri.jpg
deleted file mode 100644
index 8cf5c25b9fde..000000000000
Binary files a/components/img/newtab/Phoyoserge_ParisConciergeri.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_TheSeantParis.jpg b/components/img/newtab/Phoyoserge_TheSeantParis.jpg
deleted file mode 100644
index 5d6cdeeefd57..000000000000
Binary files a/components/img/newtab/Phoyoserge_TheSeantParis.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_Theroofparis.jpg b/components/img/newtab/Phoyoserge_Theroofparis.jpg
deleted file mode 100644
index 56a7ae304a2e..000000000000
Binary files a/components/img/newtab/Phoyoserge_Theroofparis.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_VeniseSunset.jpg b/components/img/newtab/Phoyoserge_VeniseSunset.jpg
deleted file mode 100644
index 2437ad576917..000000000000
Binary files a/components/img/newtab/Phoyoserge_VeniseSunset.jpg and /dev/null differ
diff --git a/components/img/newtab/Phoyoserge_Yosemite.jpg b/components/img/newtab/Phoyoserge_Yosemite.jpg
deleted file mode 100644
index 938559ef467f..000000000000
Binary files a/components/img/newtab/Phoyoserge_Yosemite.jpg and /dev/null differ
diff --git a/components/img/newtab/bookmarks_btn.svg b/components/img/newtab/bookmarks_btn.svg
index 1f5268a23031..f97aee43d7dc 100644
--- a/components/img/newtab/bookmarks_btn.svg
+++ b/components/img/newtab/bookmarks_btn.svg
@@ -1,47 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<g id="X1vBn6.tif_36_">
-		<g>
-			<path class="st0" d="M10.8,42.9c3.8-2,7.6-4,11.4-6"/>
-			<path class="st0" d="M22.7,0.2c1,0,1.5,0.8,1.9,1.7c1.8,3.7,3.6,7.3,5.4,11c0.2,0.3,0.3,0.4,0.7,0.5c4.3,0.6,8.6,1.2,12.9,1.8
-				c1.4,0.2,2.1,1.8,1.2,2.9c-0.1,0.2-0.3,0.3-0.4,0.5c-3,3-6.1,5.9-9.1,8.9c-0.2,0.2-0.3,0.4-0.2,0.7c0.7,4.3,1.5,8.5,2.2,12.8
-				c0.1,0.8,0,1.5-0.7,1.9c-0.6,0.5-1.3,0.4-2,0.1c-0.7-0.3-1.3-0.7-2-1.1c-3.2-1.7-6.3-3.3-9.5-5c-0.3-0.2-0.5-0.2-0.9,0
-				c-3.8,2-7.6,4-11.4,6c-1,0.5-1.9,0.4-2.5-0.4C8,42,7.9,41.5,8,41c0.7-4.3,1.5-8.6,2.2-12.9c0.1-0.3,0-0.5-0.2-0.7
-				c-3-2.9-6-5.9-9-8.8c-0.5-0.5-1-1-1-1.7c0,0,0-0.1,0-0.1c0-0.1,0-0.1,0.1-0.2c0.1-0.8,0.6-1.3,1.3-1.5C1.8,15.1,2.2,15,2.6,15
-				c4-0.6,7.9-1.2,11.9-1.7c0.4-0.1,0.6-0.2,0.7-0.5c1.8-3.7,3.6-7.2,5.4-10.8C21,1,21.5,0.2,22.7,0.2C22.7,0.2,22.7,0.2,22.7,0.2z
-				 M33,38.1c0-0.1,0-0.2,0-0.3c-0.6-3.3-1.1-6.6-1.7-9.9c-0.2-0.9,0-1.7,0.7-2.3c2.4-2.3,4.7-4.6,7.1-6.9c0.1-0.1,0.2-0.3,0.4-0.4
-				c-3.5-0.5-7-1-10.4-1.5c-0.9-0.1-1.4-0.6-1.8-1.3c-1.5-3-2.9-5.9-4.4-8.9c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1,0.2-0.2,0.4-0.3,0.5
-				c-1.5,3-2.9,5.9-4.4,8.9c-0.3,0.7-0.9,1.2-1.7,1.3c-2.8,0.4-5.7,0.8-8.5,1.2c-0.7,0.1-1.3,0.2-2,0.3c0,0,0,0.1-0.1,0.1
-				c0.1,0.1,0.3,0.2,0.4,0.3c2.4,2.3,4.7,4.6,7.1,6.9c0.7,0.6,0.9,1.3,0.7,2.2c-0.5,2.8-1,5.6-1.4,8.4c-0.1,0.6-0.2,1.3-0.3,2
-				c0.2-0.1,0.4-0.2,0.5-0.2c2.9-1.5,5.8-3,8.6-4.6c0.9-0.5,1.8-0.5,2.7,0c2.9,1.5,5.7,3,8.6,4.5C32.7,37.9,32.9,38,33,38.1z"/>
-		</g>
-	</g>
-	<path class="st0" d="M68.4,76.1H33.1c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7h35.3c1.5,0,2.7,1.2,2.7,2.7S69.9,76.1,68.4,76.1z"/>
-	<path class="st0" d="M68.4,56.8H33.1c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7h35.3c1.5,0,2.7,1.2,2.7,2.7S69.9,56.8,68.4,56.8z"/>
-	<g>
-		<line class="st0" x1="22.4" y1="73.4" x2="22.4" y2="73.4"/>
-		<path class="st0" d="M22.4,76.1c-0.2,0-0.4,0-0.5,0c-0.2,0-0.3-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3
-			c-0.1-0.1-0.2-0.3-0.3-0.4c-0.1-0.1-0.2-0.3-0.2-0.5c-0.1-0.2-0.1-0.3-0.2-0.5c0-0.2,0-0.4,0-0.5c0-0.2,0-0.3,0-0.5
-			c0-0.2,0.1-0.3,0.2-0.5c0.1-0.2,0.1-0.3,0.2-0.5c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.3-0.2,0.5-0.2
-			c0.2-0.1,0.3-0.1,0.5-0.2c0.3-0.1,0.7-0.1,1,0c0.2,0,0.3,0.1,0.5,0.2c0.2,0.1,0.3,0.1,0.5,0.2c0.1,0.1,0.3,0.2,0.4,0.3
-			c0.1,0.1,0.2,0.3,0.3,0.4c0.1,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.1,0.3,0.1,0.5c0,0.2,0,0.3,0,0.5c0,0.2,0,0.4,0,0.5
-			c0,0.2-0.1,0.3-0.1,0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.1-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.3,0.2-0.5,0.2
-			C23.3,75.9,23.1,76,23,76C22.8,76,22.6,76.1,22.4,76.1z"/>
-	</g>
-	<g>
-		<line class="st0" x1="22.4" y1="54.2" x2="22.4" y2="54.2"/>
-		<path class="st0" d="M22.4,56.8c-0.7,0-1.4-0.3-1.9-0.8c-0.1-0.1-0.2-0.3-0.3-0.4c-0.1-0.1-0.2-0.3-0.2-0.5
-			c-0.1-0.2-0.1-0.3-0.2-0.5c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3,0.1-0.5c0-0.2,0.1-0.3,0.2-0.5c0.1-0.2,0.1-0.3,0.2-0.5
-			c0.1-0.2,0.2-0.3,0.3-0.4c0.6-0.6,1.5-0.9,2.4-0.7c0.2,0,0.3,0.1,0.5,0.1c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0.1,0.3,0.2,0.4,0.3
-			c0.1,0.1,0.2,0.3,0.3,0.4c0.1,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.1,0.3,0.1,0.5c0,0.2,0,0.3,0,0.5c0,0.2,0,0.4,0,0.5
-			c0,0.2-0.1,0.3-0.1,0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.3-0.3,0.4C23.8,56.5,23.2,56.8,22.4,56.8z"/>
-	</g>
-	<path class="st0" d="M67.3,37.6H47c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7h20.3c1.5,0,2.7,1.2,2.7,2.7S68.8,37.6,67.3,37.6z"/>
-</g>
-</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.61 17.472a7.471 7.471 0 0 0 .042 2.778h.598a.75.75 0 1 1 0 1.5H6.042c-1.678 0-3.042-1.339-3.042-3V4.615C3 3.294 4.132 2.25 5.5 2.25h13.382c.752 0 1.368.6 1.368 1.352V15.75a.75.75 0 1 1 0 1.5h-.21a.748.748 0 0 1-.43.222zm-1.484-.222H6.042c-.856 0-1.542.674-1.542 1.5s.686 1.5 1.542 1.5h12.084a8.965 8.965 0 0 1 0-3zM4.5 16.163c.452-.263.98-.413 1.542-.413H18.75v-12h-3v6.75a.75.75 0 0 1-1.226.58L12 9.009l-2.524 2.07A.75.75 0 0 1 8.25 10.5V3.75H5.5c-.566 0-1 .4-1 .864v11.549zM9.75 3.75v5.165l1.774-1.456a.75.75 0 0 1 .952 0l1.774 1.456V3.75h-4.5z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/components/img/newtab/dksfoto1.jpg b/components/img/newtab/dksfoto1.jpg
deleted file mode 100644
index 163b07ac3718..000000000000
Binary files a/components/img/newtab/dksfoto1.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto10.jpg b/components/img/newtab/dksfoto10.jpg
deleted file mode 100644
index 2f73ac0510e4..000000000000
Binary files a/components/img/newtab/dksfoto10.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto11.jpg b/components/img/newtab/dksfoto11.jpg
deleted file mode 100644
index 6b8c821d7cb8..000000000000
Binary files a/components/img/newtab/dksfoto11.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto2.jpg b/components/img/newtab/dksfoto2.jpg
deleted file mode 100644
index 711755f0f352..000000000000
Binary files a/components/img/newtab/dksfoto2.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto3.jpg b/components/img/newtab/dksfoto3.jpg
deleted file mode 100644
index 0ea68261d505..000000000000
Binary files a/components/img/newtab/dksfoto3.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto4.jpg b/components/img/newtab/dksfoto4.jpg
deleted file mode 100644
index 957ddb0fe72c..000000000000
Binary files a/components/img/newtab/dksfoto4.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto5.jpg b/components/img/newtab/dksfoto5.jpg
deleted file mode 100644
index a7a8bf6b4f6f..000000000000
Binary files a/components/img/newtab/dksfoto5.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto6.jpg b/components/img/newtab/dksfoto6.jpg
deleted file mode 100644
index 0942fd9dc205..000000000000
Binary files a/components/img/newtab/dksfoto6.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto7.jpg b/components/img/newtab/dksfoto7.jpg
deleted file mode 100644
index 88f3dceab7ba..000000000000
Binary files a/components/img/newtab/dksfoto7.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto8.jpg b/components/img/newtab/dksfoto8.jpg
deleted file mode 100644
index bd876eb6e086..000000000000
Binary files a/components/img/newtab/dksfoto8.jpg and /dev/null differ
diff --git a/components/img/newtab/dksfoto9.jpg b/components/img/newtab/dksfoto9.jpg
deleted file mode 100644
index d86183681afa..000000000000
Binary files a/components/img/newtab/dksfoto9.jpg and /dev/null differ
diff --git a/components/img/newtab/history_btn.svg b/components/img/newtab/history_btn.svg
index 850dc6fadf9e..05192821e9a2 100644
--- a/components/img/newtab/history_btn.svg
+++ b/components/img/newtab/history_btn.svg
@@ -1,13 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M45.3,4.1C25.3,4.1,8.9,20,8.1,40H0.4L11,50.6L21.6,40H14C14.7,23,28.5,9.9,45.3,9.9c17.3,0,31.4,14,31.4,31.3
-	S62.6,72.5,45.3,72.5c-8.3,0-16.2-3.3-22.1-9.1c-1.1-1.1-3-1.1-4.1,0c-1.1,1.1-1.1,3,0,4.1c7,7,16.3,10.8,26.2,10.8
-	c20.5,0,37.2-16.6,37.2-37.1C82.5,20.7,65.8,4.1,45.3,4.1z"/>
-<path class="st0" d="M59.9,54.5c-0.5,0-1-0.1-1.5-0.4L40.9,43.4V23c0-1.6,1.3-2.9,2.9-2.9s2.9,1.3,2.9,2.9v17.2l14.7,9
-	c1.4,0.8,1.8,2.6,1,4C61.8,54,60.9,54.5,59.9,54.5z"/>
-</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.4a.75.75 0 0 0-.75.75v5.209A1.494 1.494 0 0 0 12 14.15a1.5 1.5 0 0 0 1.234-.65H15.9a.75.75 0 0 0 0-1.5h-2.555a1.5 1.5 0 0 0-.595-.641V6.15A.75.75 0 0 0 12 5.4M22.5 12c0 5.79-4.71 10.5-10.5 10.5S1.5 17.79 1.5 12A.75.75 0 0 1 3 12c0 4.963 4.037 9 9 9s9-4.037 9-9-4.037-9-9-9C8.705 3 6.164 4.564 4.609 7.5H6.8a.75.75 0 0 1 0 1.5H2.9a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 1 1 1.5 0v2.385C5.495 3.14 8.418 1.5 12 1.5c5.79 0 10.5 4.71 10.5 10.5" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/components/img/newtab/newtab_stock_image.jpg b/components/img/newtab/newtab_stock_image.jpg
deleted file mode 100644
index e49b22e7ce65..000000000000
Binary files a/components/img/newtab/newtab_stock_image.jpg and /dev/null differ
diff --git a/components/img/newtab/ntp-1.webp b/components/img/newtab/ntp-1.webp
new file mode 100644
index 000000000000..dcd6bcce7bd4
Binary files /dev/null and b/components/img/newtab/ntp-1.webp differ
diff --git a/components/img/newtab/ntp-10.webp b/components/img/newtab/ntp-10.webp
new file mode 100644
index 000000000000..bcb60a9c41bf
Binary files /dev/null and b/components/img/newtab/ntp-10.webp differ
diff --git a/components/img/newtab/ntp-11.webp b/components/img/newtab/ntp-11.webp
new file mode 100644
index 000000000000..8a8fa5051121
Binary files /dev/null and b/components/img/newtab/ntp-11.webp differ
diff --git a/components/img/newtab/ntp-12.webp b/components/img/newtab/ntp-12.webp
new file mode 100644
index 000000000000..7c4f1ce428db
Binary files /dev/null and b/components/img/newtab/ntp-12.webp differ
diff --git a/components/img/newtab/ntp-13.webp b/components/img/newtab/ntp-13.webp
new file mode 100644
index 000000000000..c9678e6bf475
Binary files /dev/null and b/components/img/newtab/ntp-13.webp differ
diff --git a/components/img/newtab/ntp-14.webp b/components/img/newtab/ntp-14.webp
new file mode 100644
index 000000000000..14e329adc876
Binary files /dev/null and b/components/img/newtab/ntp-14.webp differ
diff --git a/components/img/newtab/ntp-15.webp b/components/img/newtab/ntp-15.webp
new file mode 100644
index 000000000000..703217333f9c
Binary files /dev/null and b/components/img/newtab/ntp-15.webp differ
diff --git a/components/img/newtab/ntp-16.webp b/components/img/newtab/ntp-16.webp
new file mode 100644
index 000000000000..7b0f90cbd92b
Binary files /dev/null and b/components/img/newtab/ntp-16.webp differ
diff --git a/components/img/newtab/ntp-2.webp b/components/img/newtab/ntp-2.webp
new file mode 100644
index 000000000000..4ba44f14964a
Binary files /dev/null and b/components/img/newtab/ntp-2.webp differ
diff --git a/components/img/newtab/ntp-3.webp b/components/img/newtab/ntp-3.webp
new file mode 100644
index 000000000000..036213b78aee
Binary files /dev/null and b/components/img/newtab/ntp-3.webp differ
diff --git a/components/img/newtab/ntp-4.webp b/components/img/newtab/ntp-4.webp
new file mode 100644
index 000000000000..5a584893f322
Binary files /dev/null and b/components/img/newtab/ntp-4.webp differ
diff --git a/components/img/newtab/ntp-5.webp b/components/img/newtab/ntp-5.webp
new file mode 100644
index 000000000000..686853b91eba
Binary files /dev/null and b/components/img/newtab/ntp-5.webp differ
diff --git a/components/img/newtab/ntp-6.webp b/components/img/newtab/ntp-6.webp
new file mode 100644
index 000000000000..0bbf59a581f5
Binary files /dev/null and b/components/img/newtab/ntp-6.webp differ
diff --git a/components/img/newtab/ntp-7.webp b/components/img/newtab/ntp-7.webp
new file mode 100644
index 000000000000..c401a76cf431
Binary files /dev/null and b/components/img/newtab/ntp-7.webp differ
diff --git a/components/img/newtab/ntp-8.webp b/components/img/newtab/ntp-8.webp
new file mode 100644
index 000000000000..9bc46e9da50d
Binary files /dev/null and b/components/img/newtab/ntp-8.webp differ
diff --git a/components/img/newtab/ntp-9.webp b/components/img/newtab/ntp-9.webp
new file mode 100644
index 000000000000..a8304ad095b0
Binary files /dev/null and b/components/img/newtab/ntp-9.webp differ
diff --git a/components/img/newtab/settings_prefs_btn.svg b/components/img/newtab/settings_prefs_btn.svg
index fcc74d5820c3..5bd0b2274e78 100644
--- a/components/img/newtab/settings_prefs_btn.svg
+++ b/components/img/newtab/settings_prefs_btn.svg
@@ -1,14 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M63.6,40.9c0.1-1.2,0.3-2.4,0.3-3.6s-0.1-2.4-0.3-3.6l7.8-6.1c0.7-0.6,0.9-1.6,0.4-2.4l-7.4-12.8
-	c-0.5-0.8-1.4-1.1-2.3-0.8L53,15.3c-1.9-1.5-4-2.7-6.3-3.6l-1.4-9.8c-0.2-0.9-0.9-1.6-1.8-1.6H28.7c-0.9,0-1.7,0.7-1.8,1.6l-1.4,9.8
-	c-2.3,0.9-4.3,2.2-6.3,3.6L10,11.6c-0.8-0.3-1.8,0-2.3,0.8L0.3,25.2C-0.1,26,0.1,27,0.8,27.6l7.8,6.1c-0.1,1.2-0.3,2.4-0.3,3.6
-	s0.1,2.4,0.3,3.6l-7.8,6.1c-0.7,0.6-0.9,1.6-0.4,2.4l7.4,12.8C8.2,63,9.2,63.4,10,63l9.2-3.7c1.9,1.5,4,2.7,6.3,3.6l1.4,9.8
-	c0.1,0.9,0.9,1.6,1.8,1.6h14.8c0.9,0,1.7-0.7,1.8-1.6l1.4-9.8C49,62,51,60.8,53,59.3l9.2,3.7c0.8,0.3,1.8,0,2.3-0.8l7.4-12.8
-	c0.5-0.8,0.3-1.8-0.4-2.4L63.6,40.9z M36.1,58.3c-11.6,0-21-9.4-21-21s9.4-21,21-21s21,9.4,21,21S47.7,58.3,36.1,58.3z"/>
-</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.061c-.081 0-.163-.001-.245-.004l-1.113 1.696c-.287.438-.83.646-1.335.5a9.75 9.75 0 0 1-4.067-2.325 1.198 1.198 0 0 1-.233-1.41l.926-1.807a7.085 7.085 0 0 1-.238-.408l-2.046-.108a1.199 1.199 0 0 1-1.106-.898 9.535 9.535 0 0 1-.293-2.335c0-.787.1-1.568.294-2.337.13-.51.583-.87 1.101-.896l2.05-.108c.074-.139.154-.274.238-.408l-.926-1.806a1.198 1.198 0 0 1 .234-1.411 9.745 9.745 0 0 1 4.064-2.324 1.206 1.206 0 0 1 1.337.499l1.113 1.696a7.047 7.047 0 0 1 .49 0l1.113-1.696c.287-.438.83-.645 1.336-.5a9.751 9.751 0 0 1 4.066 2.326 1.2 1.2 0 0 1 .233 1.41l-.926 1.806c.084.133.163.27.238.408l2.046.108a1.2 1.2 0 0 1 1.106.898c.193.767.293 1.548.293 2.335 0 .787-.1 1.568-.294 2.337-.13.51-.583.87-1.101.896l-2.05.108a7.138 7.138 0 0 1-.238.408l.927 1.81a1.2 1.2 0 0 1-.235 1.407 9.748 9.748 0 0 1-4.064 2.325 1.207 1.207 0 0 1-1.337-.5l-1.113-1.696a7.047 7.047 0 0 1-.245.004zm-2.504.653l1.226-1.867a.764.764 0 0 1 .71-.342 6.037 6.037 0 0 0 1.135 0 .764.764 0 0 1 .711.342l1.227 1.868a8.22 8.22 0 0 0 3.015-1.722l-1.018-1.987a.764.764 0 0 1 .06-.796c.22-.303.408-.625.562-.963a.764.764 0 0 1 .655-.446l2.253-.12c.126-.568.19-1.142.19-1.719 0-.577-.065-1.152-.19-1.72l-2.253-.119a.764.764 0 0 1-.655-.446 5.617 5.617 0 0 0-.561-.963.764.764 0 0 1-.061-.796L17.52 5.93a8.223 8.223 0 0 0-3.015-1.722l-1.227 1.869a.764.764 0 0 1-.71.34A6.037 6.037 0 0 0 12 6.392c-.183 0-.372.01-.568.028a.764.764 0 0 1-.71-.341L9.496 4.21A8.218 8.218 0 0 0 6.48 5.93l1.018 1.988a.764.764 0 0 1-.06.796 5.563 5.563 0 0 0-.562.962.764.764 0 0 1-.655.447l-2.253.12a7.962 7.962 0 0 0-.19 1.719c0 .577.065 1.152.19 1.72l2.253.119a.764.764 0 0 1 .655.447c.152.335.34.657.561.962.169.233.192.54.061.796L6.48 17.993a8.222 8.222 0 0 0 3.016 1.721zm.48-7.752a2.025 2.025 0 1 0 4.049 0 2.025 2.025 0 0 0-4.05 0zm-1.529 0a3.553 3.553 0 1 1 7.106 0 3.553 3.553 0 0 1-7.106 0z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites/bookmark-o.svg b/components/img/newtab/topsites/bookmark-o.svg
new file mode 100644
index 000000000000..9a91b363654d
--- /dev/null
+++ b/components/img/newtab/topsites/bookmark-o.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M7,10.3740003 L3.7119827,12.1952135 C3.42038476,12.3567278 3.0625,12.145841 3.0625,11.8125 L3.0625,2.1875 C3.0625,1.94587542 3.25837542,1.75 3.5,1.75 L10.5,1.75 C10.7416246,1.75 10.9375,1.94587542 10.9375,2.1875 L10.9375,11.8125 C10.9375,12.145841 10.5796152,12.3567278 10.2880173,12.1952135 L7,10.3740003 Z M3.9375,2.625 L3.9375,11.070042 L6.7880173,9.4911574 C6.91989944,9.41810867 7.08010056,9.41810867 7.2119827,9.4911574 L10.0625,11.070042 L10.0625,2.625 L3.9375,2.625 Z" id="path-1"></path>
+    </defs>
+    <g id="minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="essentials/bookmark-o" stroke="#979797" stroke-width="0.75" transform="translate(-1.000000, -1.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Mask" stroke="none" fill="#373843" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites/bookmark.svg b/components/img/newtab/topsites/bookmark.svg
new file mode 100644
index 000000000000..05611d585ac9
--- /dev/null
+++ b/components/img/newtab/topsites/bookmark.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M7,10.3740003 L3.7119827,12.1952135 C3.42038476,12.3567278 3.0625,12.145841 3.0625,11.8125 L3.0625,2.1875 C3.0625,1.94587542 3.25837542,1.75 3.5,1.75 L10.5,1.75 C10.7416246,1.75 10.9375,1.94587542 10.9375,2.1875 L10.9375,11.8125 C10.9375,12.145841 10.5796152,12.3567278 10.2880173,12.1952135 L7,10.3740003 Z" id="path-1"></path>
+    </defs>
+    <g id="minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="essentials/bookmark" stroke="#979797" stroke-width="0.75" transform="translate(-1.000000, -1.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Mask" stroke="none" fill="#373843" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites/close.svg b/components/img/newtab/topsites/close.svg
new file mode 100644
index 000000000000..a431c83e304a
--- /dev/null
+++ b/components/img/newtab/topsites/close.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <g id="minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="essentials/close" stroke="#979797" stroke-width="0.75" fill="#373843">
+            <path d="M10.7641251,10.2302779 L6.52851427,5.99814147 L10.7641251,1.76600502 C10.9111053,1.61901525 10.9111053,1.38069774 10.7641251,1.23370797 C10.6171448,1.08671819 10.3788427,1.08671819 10.2318625,1.23370797 L6,5.46959298 L1.76813752,1.23370797 C1.67305796,1.13862225 1.53447649,1.10148706 1.4045954,1.13629084 C1.27471431,1.17109463 1.17326564,1.27254987 1.1384641,1.40243937 C1.10366257,1.53232887 1.14079536,1.67091931 1.23587492,1.76600502 L5.47148573,5.99814147 L1.23587492,10.2302779 C1.16491432,10.3006636 1.125,10.3964755 1.125,10.4964264 C1.125,10.5963774 1.16491432,10.6921893 1.23587492,10.762575 C1.306256,10.8335402 1.40206172,10.8734571 1.50200622,10.8734571 C1.60195072,10.8734571 1.69775643,10.8335402 1.76813752,10.762575 L6,6.52668995 L10.2318625,10.762575 C10.3022436,10.8335402 10.3980493,10.8734571 10.4979938,10.8734571 C10.5979383,10.8734571 10.693744,10.8335402 10.7641251,10.762575 C10.8350857,10.6921893 10.875,10.5963774 10.875,10.4964264 C10.875,10.3964755 10.8350857,10.3006636 10.7641251,10.2302779 Z" id="Path" stroke="none"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites/pin-o.svg b/components/img/newtab/topsites/pin-o.svg
new file mode 100644
index 000000000000..d5b2bff7a711
--- /dev/null
+++ b/components/img/newtab/topsites/pin-o.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.04590045,7.4223137 L1.74711289,5.1251171 C1.54635427,4.92449743 1.6302916,4.58097129 1.90061416,4.49689007 C2.93550874,4.17499611 4.03682149,4.24021117 5.00743189,4.6588235 L6.65091433,3.01729802 C6.4616155,2.372299 6.46221335,1.67600024 6.66760539,1.01492594 C6.75154513,0.744757734 7.09026342,0.660333345 7.28982711,0.859839284 L11.1393044,4.70820266 C11.3400872,4.90892735 11.2559523,5.25255593 10.9854804,5.33645972 C10.3236541,5.54176654 9.62633179,5.54159738 8.98054308,5.35084324 L7.34005407,6.99121445 C7.75894825,7.96208954 7.82430827,9.06384254 7.50217643,10.0994733 C7.41817532,10.3695308 7.07958686,10.4539005 6.8800447,10.2544965 L4.5780656,7.95411054 L1.38923747,11.1404129 C1.24228035,11.2872537 1.00484494,11.2864194 0.858910618,11.1385495 C0.712976301,10.9906796 0.713805443,10.7517695 0.860762558,10.6049288 L4.04590045,7.4223137 Z M8.2359651,5.03144656 C7.97939383,4.8833939 7.73911512,4.70050223 7.52226267,4.48399215 C7.30316116,4.26512045 7.11838023,4.02224597 6.9691879,3.76273325 L5.69823097,5.03217679 C5.94596081,5.19583182 6.1799314,5.38597173 6.39595163,5.60187973 C6.61228098,5.81818268 6.80277527,6.05249468 6.96670968,6.30061085 L8.2359651,5.03144656 Z M8.99987145,4.56207318 C9.00716527,4.56454685 9.01439831,4.56725248 9.02155918,4.57019003 C9.36560861,4.69727133 9.73295177,4.75313989 10.1008411,4.73384605 L7.26509357,1.89891909 C7.2246866,2.64850402 7.4975701,3.39592071 8.05059856,3.94836913 C8.32644964,4.22378469 8.65085817,4.42973901 8.99987145,4.56207318 Z M5.86735127,6.13723852 C5.03765008,5.30796834 3.88923485,4.93520142 2.76449054,5.07819732 L6.92538163,9.23620869 C7.06901351,8.11322547 6.69677285,6.96655883 5.86735127,6.13723852 Z" id="path-1"></path>
+    </defs>
+    <g id="minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="misc/pin-o" stroke="#979797" stroke-width="0.75">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Mask" stroke="none" fill="#373843" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites/pin.svg b/components/img/newtab/topsites/pin.svg
new file mode 100644
index 000000000000..630402f822e8
--- /dev/null
+++ b/components/img/newtab/topsites/pin.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.04590045,7.4223137 L1.74711289,5.1251171 C1.54635427,4.92449743 1.6302916,4.58097129 1.90061416,4.49689007 C2.93550874,4.17499611 4.03682149,4.24021117 5.00743189,4.6588235 L6.65091433,3.01729802 C6.4616155,2.372299 6.46221335,1.67600024 6.66760539,1.01492594 C6.75154513,0.744757734 7.09026342,0.660333345 7.28982711,0.859839284 L11.1393044,4.70820266 C11.3400872,4.90892735 11.2559523,5.25255593 10.9854804,5.33645972 C10.3236541,5.54176654 9.62633179,5.54159738 8.98054308,5.35084324 L7.34005407,6.99121445 C7.75894825,7.96208954 7.82430827,9.06384254 7.50217643,10.0994733 C7.41817532,10.3695308 7.07958686,10.4539005 6.8800447,10.2544965 L4.5780656,7.95411054 L1.38923747,11.1404129 C1.24228035,11.2872537 1.00484494,11.2864194 0.858910618,11.1385495 C0.712976301,10.9906796 0.713805443,10.7517695 0.860762558,10.6049288 L4.04590045,7.4223137 Z" id="path-1"></path>
+    </defs>
+    <g id="minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="misc/pin" stroke="#979797" stroke-width="0.75">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Mask" stroke="none" fill="#373843" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/components/img/newtab/topsites_btn_1.svg b/components/img/newtab/topsites_btn_1.svg
deleted file mode 100644
index 559f29f41901..000000000000
--- a/components/img/newtab/topsites_btn_1.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-viewBox="0 0 83.3 83.1" style="enable-background:new 0 0 83.3 83.1;" xml:space="preserve">
-<style type="text/css">
-  .st0{fill:#FFFFFF;}
-  .st1{opacity:0.3;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M20.3,3v17.3H3V3H20.3 M23.3,0H0v23.3h23.3V0L23.3,0z"/>
-<path class="st0" d="M50.3,3v17.3H33V3H50.3 M53.3,0H30v23.3h23.3V0L53.3,0z"/>
-<path class="st0" d="M80.3,3v17.3H63V3H80.3 M83.3,0H60v23.3h23.3V0L83.3,0z"/>
-<path class="st1" d="M20.3,32.9v17.3H3V32.9H20.3 M23.3,29.9H0v23.3h23.3V29.9L23.3,29.9z"/>
-<path class="st1" d="M50.3,32.9v17.3H33V32.9H50.3 M53.3,29.9H30v23.3h23.3V29.9L53.3,29.9z"/>
-<path class="st1" d="M80.3,32.9v17.3H63V32.9H80.3 M83.3,29.9H60v23.3h23.3V29.9L83.3,29.9z"/>
-<path class="st1" d="M20.3,62.8v17.3H3V62.8H20.3 M23.3,59.8H0v23.3h23.3V59.8L23.3,59.8z"/>
-<path class="st1" d="M50.3,62.8v17.3H33V62.8H50.3 M53.3,59.8H30v23.3h23.3V59.8L53.3,59.8z"/>
-<path class="st1" d="M80.3,62.8v17.3H63V62.8H80.3 M83.3,59.8H60v23.3h23.3V59.8L83.3,59.8z"/>
-</svg>
diff --git a/components/img/newtab/topsites_btn_2.svg b/components/img/newtab/topsites_btn_2.svg
deleted file mode 100644
index d345fb02394d..000000000000
--- a/components/img/newtab/topsites_btn_2.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-viewBox="0 0 83.3 83.1" style="enable-background:new 0 0 83.3 83.1;" xml:space="preserve">
-<style type="text/css">
-  .st0{fill:#FFFFFF;}
-  .st1{opacity:0.3;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M20.3,3v17.3H3V3H20.3 M23.3,0H0v23.3h23.3V0L23.3,0z"/>
-<path class="st0" d="M50.3,3v17.3H33V3H50.3 M53.3,0H30v23.3h23.3V0L53.3,0z"/>
-<path class="st0" d="M80.3,3v17.3H63V3H80.3 M83.3,0H60v23.3h23.3V0L83.3,0z"/>
-<path class="st0" d="M20.3,32.9v17.3H3V32.9H20.3 M23.3,29.9H0v23.3h23.3V29.9L23.3,29.9z"/>
-<path class="st0" d="M50.3,32.9v17.3H33V32.9H50.3 M53.3,29.9H30v23.3h23.3V29.9L53.3,29.9z"/>
-<path class="st0" d="M80.3,32.9v17.3H63V32.9H80.3 M83.3,29.9H60v23.3h23.3V29.9L83.3,29.9z"/>
-<path class="st1" d="M20.3,62.8v17.3H3V62.8H20.3 M23.3,59.8H0v23.3h23.3V59.8L23.3,59.8z"/>
-<path class="st1" d="M50.3,62.8v17.3H33V62.8H50.3 M53.3,59.8H30v23.3h23.3V59.8L53.3,59.8z"/>
-<path class="st1" d="M80.3,62.8v17.3H63V62.8H80.3 M83.3,59.8H60v23.3h23.3V59.8L83.3,59.8z"/>
-</svg>
diff --git a/components/img/newtab/topsites_btn_3.svg b/components/img/newtab/topsites_btn_3.svg
deleted file mode 100644
index 8cf855ec68b4..000000000000
--- a/components/img/newtab/topsites_btn_3.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-viewBox="0 0 83.3 83.1" style="enable-background:new 0 0 83.3 83.1;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{opacity:0.3;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M20.3,3v17.3H3V3H20.3 M23.3,0H0v23.3h23.3V0L23.3,0z"/>
-<path class="st0" d="M50.3,3v17.3H33V3H50.3 M53.3,0H30v23.3h23.3V0L53.3,0z"/>
-<path class="st0" d="M80.3,3v17.3H63V3H80.3 M83.3,0H60v23.3h23.3V0L83.3,0z"/>
-<path class="st0" d="M20.3,32.9v17.3H3V32.9H20.3 M23.3,29.9H0v23.3h23.3V29.9L23.3,29.9z"/>
-<path class="st0" d="M50.3,32.9v17.3H33V32.9H50.3 M53.3,29.9H30v23.3h23.3V29.9L53.3,29.9z"/>
-<path class="st0" d="M80.3,32.9v17.3H63V32.9H80.3 M83.3,29.9H60v23.3h23.3V29.9L83.3,29.9z"/>
-<path class="st0" d="M20.3,62.8v17.3H3V62.8H20.3 M23.3,59.8H0v23.3h23.3V59.8L23.3,59.8z"/>
-<path class="st0" d="M50.3,62.8v17.3H33V62.8H50.3 M53.3,59.8H30v23.3h23.3V59.8L53.3,59.8z"/>
-<path class="st0" d="M80.3,62.8v17.3H63V62.8H80.3 M83.3,59.8H60v23.3h23.3V59.8L83.3,59.8z"/>
-</svg>
diff --git a/components/resources/brave_components_resources.grd b/components/resources/brave_components_resources.grd
index 54473554d803..872f4ac84d32 100644
--- a/components/resources/brave_components_resources.grd
+++ b/components/resources/brave_components_resources.grd
@@ -11,8 +11,7 @@
       <!-- DO NOT PUT RESOURCES FOR SPECIFIC COMPONENTS IN THIS FILE
            create a new grd file in components/component_name/resources/ -->
       <!-- Common resources -->
-      <!-- TODO: Define only where needed, via webpack generated output,
-                  or use common chrome://resources DataSource -->
+      <!-- TODO: Define only where needed, via webpack generated output, or use common chrome://resources DataSource -->
       <include name="IDR_BRAVE_COMMON_TOOLBAR_IMG" file="../img/toolbar/menu_btn.svg" type="BINDATA" />
 
       <!-- Browser resources -->
@@ -33,28 +32,25 @@
       <include name="IDR_BRAVE_NEW_TAB_IMG1" file="../img/newtab/bookmarks_btn.svg" type="BINDATA" />
       <include name="IDR_BRAVE_NEW_TAB_IMG4" file="../img/newtab/history_btn.svg" type="BINDATA" />
       <include name="IDR_BRAVE_NEW_TAB_IMG2" file="../img/newtab/settings_prefs_btn.svg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_IMG14" file="../img/newtab/newtab_stock_image.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND1" file="../img/newtab/dksfoto1.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND2" file="../img/newtab/dksfoto2.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND3" file="../img/newtab/dksfoto3.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND4" file="../img/newtab/dksfoto4.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND5" file="../img/newtab/dksfoto5.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND6" file="../img/newtab/dksfoto6.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND7" file="../img/newtab/dksfoto7.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND8" file="../img/newtab/dksfoto8.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND9" file="../img/newtab/dksfoto9.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND10" file="../img/newtab/dksfoto10.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND11" file="../img/newtab/dksfoto11.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND12" file="../img/newtab/Phoyoserge_Corsica.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND13" file="../img/newtab/Phoyoserge_Corsica2.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND14" file="../img/newtab/Phoyoserge_DowntownGriffith.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND15" file="../img/newtab/Phoyoserge_ElmatadorBeach.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND16" file="../img/newtab/Phoyoserge_ParisConciergeri.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND17" file="../img/newtab/Phoyoserge_Theroofparis.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND18" file="../img/newtab/Phoyoserge_TheSeantParis.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND19" file="../img/newtab/Phoyoserge_VeniseSunset.jpg" type="BINDATA" />
-      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND20" file="../img/newtab/Phoyoserge_Yosemite.jpg" type="BINDATA" />
-
+     
+      <!-- Imagery links -->
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND1" file="../img/newtab/ntp-1.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND2" file="../img/newtab/ntp-2.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND3" file="../img/newtab/ntp-3.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND4" file="../img/newtab/ntp-4.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND5" file="../img/newtab/ntp-5.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND6" file="../img/newtab/ntp-6.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND7" file="../img/newtab/ntp-7.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND8" file="../img/newtab/ntp-8.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND9" file="../img/newtab/ntp-9.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND10" file="../img/newtab/ntp-10.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND11" file="../img/newtab/ntp-11.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND12" file="../img/newtab/ntp-12.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND13" file="../img/newtab/ntp-13.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND14" file="../img/newtab/ntp-14.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND15" file="../img/newtab/ntp-15.webp" type="BINDATA" />
+      <include name="IDR_BRAVE_NEW_TAB_BACKGROUND16" file="../img/newtab/ntp-16.webp" type="BINDATA" />
+      
       <!-- WebUI private new tab resources -->
       <!-- TODO: move to brave_new_tab_ui component -->
       <include name="IDR_BRAVE_PRIVATE_TAB_IMG" file="../img/newtab/private-window.svg" type="BINDATA" />
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index 531a6e3fd7a0..25b5ec004021 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -122,7 +122,7 @@
       <message name="IDS_BRAVE_NEW_TAB_TOTAL_TRACKERS_BLOCKED" desc="total number of trackers blocked">Trackers Blocked</message>
       <message name="IDS_BRAVE_NEW_TAB_TOTAL_HTTPS_UPGRADES" desc="total number of HTTPS upgrades">HTTPS Upgrades</message>
       <message name="IDS_BRAVE_NEW_TAB_TOTAL_TIME_SAVED" desc="total time saved from blocking ads and trackers">Estimated Time Saved</message>
-      <message name="IDS_BRAVE_NEW_TAB_THUMB_REMOVED" desc="Shown when a thumbnail is removed from the new tab page">Thumb Removed.</message>
+      <message name="IDS_BRAVE_NEW_TAB_THUMB_REMOVED" desc="Shown when a thumbnail is removed from the new tab page">Top site removed.</message>
       <message name="IDS_BRAVE_NEW_TAB_UNDO_REMOVED" desc="Shown when a user wants to undo removing a tile.">Undo</message>
       <message name="IDS_BRAVE_NEW_TAB_RESTORE_ALL" desc="Allows restoring all top sites back to the original.">Restore All</message>
       <message name="IDS_BRAVE_NEW_TAB_SECOND" desc="Displays the number of seconds.">second</message>
diff --git a/components/styles/common.less b/components/styles/common.less
index 920886022397..c864df4fbca7 100644
--- a/components/styles/common.less
+++ b/components/styles/common.less
@@ -14,7 +14,7 @@
 }
 
 html, body, #appContainer, #appContainer > div {
-  height: 100%;
+  height: 100vh;
 }
 
 body {
diff --git a/components/styles/newtab.less b/components/styles/newtab.less
index ab468178dfaf..d3c56dc659e5 100644
--- a/components/styles/newtab.less
+++ b/components/styles/newtab.less
@@ -2,490 +2,342 @@
  * 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 "./animations.less";
-@import "./common.less";
-
+@import './animations.less';
+@import './common.less';
 * {
-  box-sizing: border-box;
-  // undo global override from common.less
-  // and allow typography to flow from parent to descendent
-  font-family: inherit;
-  font-weight: inherit;
+    box-sizing: border-box; // undo global override from common.less
+    // and allow typography to flow from parent to descendent
+    font-family: inherit;
+    font-weight: inherit;
 }
 
-
-strong, div, span, li, em, p, a {
-  font-family: inherit;
-  font-weight: inherit;
-  -webkit-font-smoothing: antialiased; // light text on dark backgrounds on macOS looks better with this
+strong,
+div,
+span,
+li,
+em,
+p,
+a {
+    font-family: inherit;
+    font-weight: inherit;
+    -webkit-font-smoothing: antialiased; // light text on dark backgrounds on macOS looks better with this
 }
 
 body {
-  background: #fff;
+    background: #1f1f1f;
 }
 
-body, .dynamicBackground, bgGradient {
-  opacity: 0;
-  animation: fadeIn 200ms;
-  animation-fill-mode: forwards;
+body,
+.dynamicBackground {
+    bgGradient {
+        opacity: 0;
+        animation: fadeIn 300ms;
+        animation-fill-mode: forwards;
+    }
 }
 
 .copyrightNotice {
-  user-select: none;
-  cursor: default;
+    user-select: none;
+    cursor: pointer;
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 ul {
-  display: inline-block;
-  li {
     display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-  }
+    li {
+        display: inline-block;
+        vertical-align: middle;
+        list-style-type: none;
+    }
 }
 
 .dynamicBackground {
-  background-position: top center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  display: flex;
-  flex: 1;
-
-  > img {
-    display: none;
-  }
-}
-
-.gradient {
-  background: radial-gradient(circle farthest-corner at right bottom,#ff4444 0,rgb(9, 14, 160) 100%);
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    >img {
+        display: none;
+    }
 }
 
 .bgGradient {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-  height: 400px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.6) 100%);
+    height: 100vh;
 }
 
-.content {
-  position: relative;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  min-height: 100vh;
-  padding: 40px 60px;
-
-  .topSitesContainer {
-    width: 100%;
-    text-align: right;
-
-    .toggleTopSitesGridIcon {
-      outline: none;
-      background: 0 0 / contain no-repeat;
-      display: flex;
-      border: 0;
-      margin-left: auto;
-      width: 30px;
-      height: 30px;
-      font-size: 30px;
-      margin-bottom: 20px;
-      transition: @transitionFast;
-      cursor: default;
-
-      &.hasThreeRows {
-        background: url('../img/newtab/topsites_btn_3.svg');
-      }
-      &.hasTwoRows {
-        background: url('../img/newtab/topsites_btn_2.svg');
-      }
-      &.hasOneRow {
-        background: url('../img/newtab/topsites_btn_1.svg');
-      }
-    }
-
-    .topSitesGrid {
-      max-width: 510px;
-      display: inline-block;
-      text-align: left;
-      width: 100%;
-
-      .topSiteSquareSpace {
-        margin-left: 5px;
-        margin-bottom: 5px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      .topSitesElement {
-        transition: @transitionFast;
-        position: relative;
-        box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
-        border-radius: 4px;
+.bookmark {
+    background-image: url('../img/newtab/topsites/bookmark.svg');
+}
 
-        &:hover {
-          box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.8);
+.bookmark-o {
+    background-image: url('../img/newtab/topsites/bookmark-o.svg');
+}
 
-          .topSitesActionContainer {
-            visibility: visible;
-            opacity: 1;
-          }
-        }
+.pin {
+    background-image: url('../img/newtab/topsites/pin.svg');
+}
 
-        .topSitesActionContainer {
-          transition: @transitionFast;
-          visibility: hidden;
-          opacity: 0;
-          position: absolute;
-          z-index: 3;
-          top: 3px;
-          left: 0;
-          right: 0;
-          margin: auto;
-          padding: 3px;
-          max-width: 90%;
-          display: flex;
-          justify-content: space-between;
-          background-color: rgba(255, 255, 255, 0.5);
-          border-radius: @borderRadius;
+.pin-o {
+    background-image: url('../img/newtab/topsites/pin-o.svg');
+}
 
-          .topSitesActionBtn {
-            transition: @transitionFast;
-            width: 14px;
-            height: 14px;
-            font-size: 14px;
-            outline: none;
-            border: none;
-            background-color: transparent;
-            color: @black50;
-            &:hover {
-              color: black;
-            }
-          }
-        }
+.close {
+    background-image: url('../img/newtab/topsites/close.svg');
+}
 
-        .topSitesElementFavicon {
-          position: relative;
-          background-color: @defaultIconBackground;
-          border-radius: @borderRadius;
-          color: @gray;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 80px;
-          height: 80px;
-          font-size: 38px;
+.icon-container {
+    width: 12px;
+    height: 12px;
+    border: none;
+    cursor: pointer;
+}
 
-          // Add an opacity layer on top of tile
-          // to avoid backgrounds with the same color as icon
-          // (as seen on issue #5868)
-          &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
+.content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 100vh;
+    padding: 70px;
+    .topSitesContainer {
+        width: 100%;
+        .topSitesGrid {
+            display: inline-block;
+            text-align: left;
             width: 100%;
-            height: 100%;
-            background-color: #fff;
-            opacity: 0.15;
-            z-index: 0;
-            border-radius: 4px;
-          }
-
-          .pinnedTopSite {
-            transition: @transitionFast;
-            opacity: 1;
-            visibility: visible;
-            position: absolute;
-            top: 4px;
-            left: 4px;
-            width: 20px;
-            height: 20px;
-            background-color: @gray25;
-            border-radius: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2;
-
-            .pin {
-              font-size: 10px;
-              color: black;
+            .topSiteSquareSpace {
+                margin: 4px;
+                display: inline-block;
+                vertical-align: middle;
+            }
+            .topSitesElement {
+                transition: @transitionFast;
+                position: relative;
+                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+                border-radius: 8px;
+                &:hover {
+                    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
+                    .topSitesActionContainer {
+                        visibility: visible;
+                        opacity: 1;
+                    }
+                }
+                .topSitesActionContainer {
+                    transition: @transitionFast;
+                    visibility: hidden;
+                    opacity: 0;
+                    position: absolute;
+                    z-index: 3;
+                    top: 3px;
+                    left: 0;
+                    right: 0;
+                    margin: auto;
+                    padding: 3px;
+                    max-width: 90%;
+                    display: flex;
+                    justify-content: space-between;
+                    .topSitesActionBtn {
+                        transition: @transitionFast;
+                        color: #424242;
+                        height: 12px;
+                        width: 12px;
+                        outline: none;
+                        background-color: transparent;
+                        border: none;
+                        opacity: .7;
+                        &:hover {
+                            opacity: 1;
+                            cursor: pointer;
+                        }
+                    }
+                }
+                .topSitesElementFavicon {
+                    background-color: rgba(255, 255, 255, .8);
+                    position: relative;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 80px;
+                    height: 80px;
+                    font-size: 38px; // Add an opacity layer on top of tile
+                    // to avoid backgrounds with the same color as icon
+                    // (as seen on issue #5868)
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background-color: #fff;
+                        opacity: 0.15;
+                        z-index: 0;
+                        border-radius: 4px;
+                    }
+                    .pinnedTopSite {
+                        transition: @transitionFast;
+                        opacity: 1;
+                        visibility: visible;
+                        position: absolute;
+                        top: 6px;
+                        left: 6px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        z-index: 2;
+                    }
+                    img {
+                        position: relative;
+                        z-index: 3;
+                        max-width: 32px;
+                        max-height: 32px;
+                    }
+                }
+                &:hover {
+                    .pinnedTopSite {
+                        opacity: 0;
+                        visibility: hidden;
+                    }
+                }
             }
-
-          }
-          img {
-            position: relative;
-            z-index: 1;
-            max-width: 64px;
-            max-height: 64px;
-          }
-        }
-        &:hover {
-          .pinnedTopSite {
-            opacity: 0;
-            visibility: hidden;
-          }
         }
-      }
     }
-  }
-
-  .siteRemovalNotification {
-    @typography-display();
-    border-radius: @borderRadius;
-    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
-    background-color: #fff;
-    width: 500px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-
-    .notification {
-      user-select: none;
-      cursor: default;
-    }
-
-    .notificationText, .siteRemovalAction {
-      margin: 0 6px;
+    .statsContainer {
+        display: flex;
     }
-
-    .siteRemovalAction {
-      color: @braveOrange;
-      text-decoration: underline;
-      cursor: pointer;
+    .clockContainer {
+        display: flex;
+        margin-left: auto;
+        @media (max-width: 830px) {
+            margin: 0 0 30px 0;
+        }
     }
-
-    .fa-close {
-      color: @statsRed;
-      margin-left: 12px;
-      border: 0;
-      background-color: transparent;
+    .newTabStats {
+        display: flex;
+        margin: 0 0 30px 0;
+        @media (max-width: 830px) {
+            flex-direction: column-reverse;
+        }
     }
-  }
-
-  .footerContainer {
-    display: flex;
-    justify-content: space-between;
-
-    .copyrightNotice {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      line-height: 1.3;
-
-      .copyrightCredits {
+    .siteRemovalNotification {
         @typography-display();
-
-        &, .photoBy, .copyrightOwner {
-          color: #fff;
-          font-size: 13px;
-          text-transform: uppercase;
-        }
-
-        .copyrightOwner {
-          font-weight: 700;
-          &:hover {
-            text-decoration: underline;
-          }
+        border-radius: 8px;
+        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
+        background-color: #fff;
+        width: 500px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        .notification {
+            user-select: none;
         }
-        .copyRightYear {
-          position: relative;
-          &:after {
-            position: absolute;
-            right: 0;
-            content: '©';
-          }
+        .notificationText,
+        .siteRemovalAction {
+            margin: 0 16px;
+            text-decoration: none;
+            cursor: pointer;
+            color: #fb542b;
         }
-      }
-
-      .photoName {
-        @typography-display();
-        letter-spacing: @typographyDisplayMediumSpacing;
-        color: @white50;
-        font-size: 23px;
-      }
     }
-
-    .shortcutsContainer {
-      display: flex;
-
-      .shortcutIcon {
+    .footerContainer {
         display: flex;
-        width: 35px;
-        height: 35px;
-        margin: 15px 5px;
-        cursor: default;
-        background-color: white;
-        -webkit-mask-repeat: no-repeat;
-
-        &:hover {
-          background-color: @gray;
-        }
-
-        &.settingsIcon {
-          -webkit-mask-image: url('../img/newtab/settings_prefs_btn.svg');
-        }
-        &.bookmarksIcon {
-          -webkit-mask-image: url('../img/newtab/bookmarks_btn.svg');
+        justify-content: space-between;
+        .copyrightNotice {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            .copyrightCredits {
+                @typography-body();
+                font-weight: 300;
+                &,
+                .photoBy,
+                .copyrightOwner {
+                    color: #fff;
+                    font-size: 12px;
+                    text-transform: none;
+                    opacity: 0.6;
+                    font-weight: 800;
+                    transition: opacity 0.15s ease, filter 0.15s ease;
+                }
+                .copyrightOwner {
+                    &:hover {
+                        opacity: 0.95;
+                    }
+                }
+            }
         }
-        &.historyIcon {
-          -webkit-mask-image: url('../img/newtab/history_btn.svg');
+        .shortcutsContainer {
+            display: flex;
+            .shortcutIcon {
+                display: flex;
+                width: 24px;
+                height: 24px;
+                margin: 12px;
+                cursor: pointer;
+                background-color: #fff;
+                opacity: 0.7;
+                transition: opacity 0.15s ease, filter 0.15s ease;
+                -webkit-mask-repeat: no-repeat;
+                &:hover {
+                    opacity: 0.95;
+                }
+                &.settingsIcon {
+                    -webkit-mask-image: url('../img/newtab/settings_prefs_btn.svg');
+                    mask-image: url('../img/newtab/settings_prefs_btn.svg');
+                }
+                &.bookmarksIcon {
+                    -webkit-mask-image: url('../img/newtab/bookmarks_btn.svg');
+                    mask-image: url('../img/newtab/settings_prefs_btn.svg');
+                }
+                &.historyIcon {
+                    -webkit-mask-image: url('../img/newtab/history_btn.svg');
+                    mask-image: url('../img/newtab/settings_prefs_btn.svg');
+                }
+            }
         }
-      }
     }
-  }
 }
 
-.statsBar {
-  @typography-display();
-  width: 100%;
-  padding: 40px 0;
-  display: flex;
-  justify-content: space-between;
-
-  .statsBlock {
-    margin-right: 40px;
-    margin-bottom: 20px;
-
-    span {
-      display: block;
-    }
-
-    .counter {
-      letter-spacing: @typographyDisplayLargeSpacing;
-      font-size: 44px;
-      line-height: 53px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      max-width: 200px;
-
-      &.trackers {
-        color: @statsOrange;
-      }
-      &.ads {
-        color: @statsRed;
-      }
-      &.https {
-        color: @statsBlue;
-      }
-      &.timeSaved {
-        color: @statsLightGray;
-        display: flex;
-        align-items: baseline;
-      }
-
-      .text {
-        display: inline;
-        color: @statsLightGray;
-        font-size: 20px;
-        letter-spacing: 0;
-        line-height: 24px;
-        margin-left: 3px;
-      }
-    }
-
-    .statsText {
-      font-size: 13px;
-      color: #fff;
-    }
-  }
-
-  .clock {
-    line-height: 1;
-    user-select: none;
-    display: flex;
-    cursor: default;
-
-    .time {
-      letter-spacing: 0;
-      font-size: 75px;
-      font-weight: 200;
-      color: #fff;
-      display: inline-flex;
-    }
-
-    .timePeriod {
-      color: #fff;
-      display: inline-block;
-      font-size: 20px;
-      letter-spacing: @typographyDisplayMediumSpacing;
-      font-weight: 400;
-      margin-top: 8px;
-      margin-left: 3px;
-      vertical-align: top;
+@media (max-width: 730px) {
+    .dynamicBackground {
+        height: initial !important;
     }
-
-    .timeSeparator {
-      color: #fff;
-      // center colon vertically in the text-content line
-      margin-top: -0.1em;
+    .content {
+        min-height: 100vh;
     }
-
-    .dayTime {
-      font-size: 51px;
-      color: #fff;
+    .statsBar {
+        flex-direction: column-reverse;
+        padding-top: 0;
+        .statsBlock {
+            margin: 0 0 15px;
+            width: 50%;
+            padding-right: 20px;
+        }
+        .clock {
+            display: flex;
+            flex: 1;
+            justify-content: center;
+            padding-bottom: 20px;
+        }
     }
-  }
 }
 
-
-@media (max-width: 730px) {
-  .dynamicBackground {
-    min-height: 100%;
-    height: initial !important;
-  }
-
-  .content {
-    // default typography if not specified in element ancestor hierarchy
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-weight: 400;
-    min-height: 100%;
-
-    main {
-      margin-bottom: 20px;
-    }
-
-    .topSitesContainer {
-      text-align: center;
-      padding-bottom: 20px;
+@media (max-width: 680px) {
+    .content {
+        padding: 40px;
     }
-  }
-
-  .statsBar {
-    flex-direction: column-reverse;
-    padding-top: 0;
-
-    .statsBlock {
-      margin: 0 0 15px;
-      width: 50%;
-      padding-right: 20px;
+    .bgGradient {
+        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.6) 100%);
     }
-
-    .clock {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      padding-bottom: 20px;
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/components/styles/variables.less b/components/styles/variables.less
index a6123b1e7f0e..ae8ba85c61cc 100644
--- a/components/styles/variables.less
+++ b/components/styles/variables.less
@@ -166,15 +166,15 @@
 @transitionEase: all 600ms ease;
 @transitionFastEase: all 100ms ease;
 @transitionSlowEase: all 1s ease;
+// Colors used for stats on:	
+// - Bravery panel	
+// - about:newtab	
+@statsYellow: #ffc000;	
+@statsOrange: #f39030;	
+@statsRed: #fe521d;	
+@statsBlue: #0796fa;	
+@statsLightGray: #999999;	
 
-// Colors used for stats on:
-// - Bravery panel
-// - about:newtab
-@statsYellow: #ffc000;
-@statsOrange: #f39030;
-@statsRed: #fe521d;
-@statsBlue: #0796fa;
-@statsLightGray: #999999;
 
 @defaultIconBackground: #F7F7F7;