diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 91a50c771179..ceaea053ea1f 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -162,6 +162,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "showTopSites", IDS_BRAVE_NEW_TAB_SHOW_TOP_SITES },
         { "showRewards", IDS_BRAVE_NEW_TAB_SHOW_REWARDS },
         { "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
+        { "moreCards", IDS_BRAVE_NEW_TAB_SHOW_MORE_CARDS },
         { "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN },
         { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
         { "statsTitle", IDS_BRAVE_NEW_TAB_STATS },
diff --git a/components/brave_new_tab_ui/components/default/index.ts b/components/brave_new_tab_ui/components/default/index.ts
index 4d587e58e42d..d0da70d40ad3 100644
--- a/components/brave_new_tab_ui/components/default/index.ts
+++ b/components/brave_new_tab_ui/components/default/index.ts
@@ -4,7 +4,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { StatsContainer, StatsItem } from './stats'
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from './settings'
+export * from './settings'
 import { ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './gridSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { ClockWidget } from './clock'
@@ -26,11 +26,6 @@ export {
   SiteRemovalText,
   SiteRemovalAction,
   ClockWidget,
-  SettingsMenu,
-  SettingsRow,
-  SettingsText,
-  SettingsTitle,
-  SettingsWrapper,
   RewardsWidget,
   BinanceWidget,
   createWidget
diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts
index 2634e6c347db..7b21ac076e3e 100644
--- a/components/brave_new_tab_ui/components/default/page/index.ts
+++ b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -67,6 +67,11 @@ export const Page = styled<PageProps, 'div'>('div')`
   min-height: 100vh;
   align-items: flex-start;
 
+  /* lock the screen so when brave today is scroled
+  NTP items remain in the same place */
+  position: sticky;
+  top: 0;
+
   @media screen and (max-width: ${breakpointEveryBlock}) {
     display: flex;
     flex-direction: column;
@@ -139,6 +144,15 @@ export const GridItemNavigation = styled('section')`
   }
 `
 
+export const GridItemNavigationBraveToday = styled<{}, 'span'>('span')`
+  position: absolute;
+  bottom: 60px;
+  text-align: center;
+  width: 100%;
+  color: white;
+  font-size: 24px;
+`
+
 export const Footer = styled<{}, 'footer'>('footer')`
   /* Child items are primary Grid items and can slot in to free spaces,
      so this element doesn't do anything on wider viewport widths. */
@@ -183,6 +197,7 @@ export const App = styled<AppProps, 'div'>('div')`
   box-sizing: border-box;
   display: flex;
   flex: 1;
+  flex-direction: column;
   transition: opacity .125s ease-out;
   opacity: ${p => p.dataIsReady ? 1 : 0};
 `
@@ -327,3 +342,22 @@ export const IconButtonSideText = styled<IconButtonSideTextProps, 'label'>('labe
     outline: 0;
   }
 `
+
+interface IconButtonContainerProps {
+  textDirection: string
+}
+
+export const IconButtonContainer = styled<IconButtonContainerProps, 'div'>('div')`
+  font-family: ${p => p.theme.fontFamily.heading};
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255,255,255,0.8);
+  margin-right: ${p => p.textDirection === 'ltr' && '8px'};
+  margin-left: ${p => p.textDirection === 'rtl' && '8px'};
+  border-right: ${p => p.textDirection === 'ltr' && '1px solid rgba(255, 255, 255, 0.6)'};
+  border-left: ${p => p.textDirection === 'rtl' && '1px solid rgba(255, 255, 255, 0.6)'};
+
+  &:hover {
+    color: #ffffff;
+  }
+`
diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
index e59fd2f209e4..927efd1cda11 100644
--- a/components/brave_new_tab_ui/components/default/settings/index.ts
+++ b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -1,32 +1,168 @@
-/* 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/. */
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
 
-import styled, { css } from 'styled-components'
+import styled, { css } from 'brave-ui/theme'
 
 interface Props {
   textDirection: string
 }
 
 export const SettingsMenu = styled<Props, 'div'>('div')`
-  bottom: 48px;
-  width: auto;
-  position: absolute;
+  width: 680px;
   ${p => p.textDirection && (p.textDirection === 'rtl') ? `left: 12px` : `right: 12px`}
   background-color: ${p => p.theme.color.contextMenuBackground};
   color:  ${p => p.theme.color.contextMenuForeground};
   border-radius: 8px;
-  padding: 24px 24px 17px 24px;
+  padding: 24px;
   box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
   font-family: ${p => p.theme.fontFamily.body};
 `
 
+export const SettingsContent = styled<{}, 'div'>('div')`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 40px;
+`
+
+export const SettingsSidebar = styled<{}, 'aside'>('aside')`
+  position: relative;
+  /* normalize against SettingsMenu default padding */
+  margin-left: -24px;
+  padding-left: 24px;
+`
+
+interface SettingsSidebarActiveButtonSliderProps {
+  translateTo: number
+}
+
+export const SettingsSidebarActiveButtonSlider =
+  styled<SettingsSidebarActiveButtonSliderProps, 'div'>('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 48px;
+  width: 4px;
+  background: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
+  transform: translateY(${p => p.translateTo * 48}px);
+  transition-delay: 0.05s;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+  transition-property: transform;
+`
+interface SettingsSidebarSVGContentProps {
+  src: string
+}
+
+export const SettingsSidebarSVGContent = styled<SettingsSidebarSVGContentProps, 'div'>('div')`
+  width: 20px;
+  height: 20px;
+  background: ${p => p.theme.palette.grey800};
+  -webkit-mask-image: url(${p => p.src});
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+`
+
+export const SettingsSidebarButtonText = styled<{}, 'span'>('span')`
+  margin-left: 16px;
+  font-weight: 500;
+  font-size: 13px;
+  font-family: ${p => p.theme.fontFamily.heading};
+  color: ${p => p.theme.palette.grey800};
+  position: relative;
+
+  &:hover {
+    color: ${p => p.theme.color.brandBrave};
+  }
+`
+interface SettingsSidebarButtonProps {
+  activeTab: boolean
+}
+
+export const SettingsSidebarButton = styled<SettingsSidebarButtonProps, 'button'>('button')`
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 220px;
+  height: 48px;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    ${SettingsSidebarSVGContent} {
+      background: ${p => p.theme.color.brandBrave};
+    }
+    ${SettingsSidebarButtonText} {
+      color: ${p => p.theme.color.brandBrave};
+    }
+  }
+
+  ${SettingsSidebarSVGContent} {
+    ${p => p.activeTab && css`
+      background: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
+    `}
+  }
+
+  ${SettingsSidebarButtonText} {
+    // Gradientify text
+    ${p => p.activeTab && css`
+      background: ${p => p.theme.color.panelBackground};
+    `}
+
+    // Gradientify text part 2
+    &::before {
+      ${p => p.activeTab && css`
+        mix-blend-mode: screen;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transition: linear 0.3s background-image;
+        background-image: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
+      `}
+    }
+`
+
+export const SettingsFeatureBody = styled<{}, 'section'>('section')`
+  padding: 10px 16px 0;
+`
+
 export const SettingsTitle = styled<{}, 'div'>('div')`
-  font-family: ${p => p.theme.fontFamily.body};
-  font-size: 18px;
-  font-weight: bold;
-  letter-spacing: 0px;
   margin-bottom: 17px;
+  grid-template-columns: 1fr 20px;
+  display: grid;
+  align-items: center;
+
+  h1 {
+    font-family: ${p => p.theme.fontFamily.heading};
+    margin: 0;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 30px;
+    letter-spacing: 0.02em;
+    color: ${p => p.theme.color.neutral900};
+  }
+`
+
+export const SettingsCloseIcon = styled<{}, 'button'>('button')`
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
 `
 
 interface SettingsRowProps {
@@ -37,11 +173,11 @@ export const SettingsRow = styled<SettingsRowProps, 'div'>('div')`
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr 36px;
-  margin-top: 10px;
-  height: 30px;
-  width: 320px;
+  align-items: center;
+  width: 100%;
+  height: 28px;
   ${p => p.isChildSetting && css`
-    padding-left: 15px;
+    padding-left: 36px;
   `}
 `
 
@@ -57,9 +193,15 @@ interface SettingsWrapperProps {
 }
 
 export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 13px;
   font-weight: 600;
diff --git a/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx b/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx
index b33a55173c18..ad64e29b3ab0 100644
--- a/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx
@@ -5,67 +5,42 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Link, Navigation, IconLink, PhotoName } from '../../components/default'
+import {
+  Link,
+  Navigation,
+  IconButton,
+  IconButtonContainer,
+  IconButtonSideText,
+  IconLink,
+  PhotoName
+} from '../../components/default'
 import * as S from '../../components/default/page'
 
 // Icons
-import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons'
+import {
+  SettingsIcon,
+  SettingsAdvancedIcon,
+  BookmarkBook,
+  HistoryIcon
+} from 'brave-ui/components/icons'
 
 // Helpers
 import { getLocale } from '../../../common/locale'
-import Settings from './settings'
 
 interface Props {
   textDirection: string
-  onClickOutside: () => void
+  onClickSettings: (event: React.MouseEvent<HTMLButtonElement>) => void
   backgroundImageInfo: any
-  onClickSettings: () => void
-  showSettingsMenu: boolean
   showPhotoInfo: boolean
-  toggleShowBackgroundImage: () => void
-  toggleShowClock: () => void
-  toggleShowStats: () => void
-  toggleShowTopSites: () => void
-  toggleShowRewards: () => void
-  toggleShowBinance: () => void
-  toggleBrandedWallpaperOptIn: () => void
-  showBackgroundImage: boolean
-  showClock: boolean
-  showStats: boolean
-  showTopSites: boolean
-  showRewards: boolean
-  showBinance: boolean
-  brandedWallpaperOptIn: boolean
-  allowSponsoredWallpaperUI: boolean
-  binanceSupported: boolean
 }
 
 export default class FooterInfo extends React.PureComponent<Props, {}> {
-
   render () {
     const {
       textDirection,
-      backgroundImageInfo,
       onClickSettings,
-      showSettingsMenu,
-      showPhotoInfo,
-      onClickOutside,
-      toggleShowBackgroundImage,
-      toggleShowClock,
-      toggleShowStats,
-      toggleShowTopSites,
-      toggleBrandedWallpaperOptIn,
-      showBackgroundImage,
-      showClock,
-      showStats,
-      showTopSites,
-      brandedWallpaperOptIn,
-      allowSponsoredWallpaperUI,
-      toggleShowRewards,
-      showRewards,
-      toggleShowBinance,
-      showBinance,
-      binanceSupported
+      backgroundImageInfo,
+      showPhotoInfo
     } = this.props
 
     return (
@@ -80,30 +55,21 @@ export default class FooterInfo extends React.PureComponent<Props, {}> {
             </PhotoName>
           </S.GridItemCredits>
         }
+        {
+          <S.GridItemNavigationBraveToday>
+            ⬇🟢⬇🟢⬇🟢⬇🟢⬇🟢 scroll to see more ⬇🟢⬇🟢⬇🟢⬇🟢⬇🟢
+          </S.GridItemNavigationBraveToday>
+        }
         <S.GridItemNavigation>
           <Navigation>
-            <Settings
-              textDirection={textDirection}
-              showSettingsMenu={showSettingsMenu}
-              onClickOutside={onClickOutside}
-              onClick={onClickSettings}
-              toggleShowBackgroundImage={toggleShowBackgroundImage}
-              toggleShowClock={toggleShowClock}
-              toggleShowStats={toggleShowStats}
-              toggleShowTopSites={toggleShowTopSites}
-              toggleBrandedWallpaperOptIn={toggleBrandedWallpaperOptIn}
-              showBackgroundImage={showBackgroundImage}
-              showClock={showClock}
-              showStats={showStats}
-              showTopSites={showTopSites}
-              brandedWallpaperOptIn={brandedWallpaperOptIn}
-              allowSponsoredWallpaperUI={allowSponsoredWallpaperUI}
-              toggleShowRewards={toggleShowRewards}
-              showRewards={showRewards}
-              toggleShowBinance={toggleShowBinance}
-              showBinance={showBinance}
-              binanceSupported={binanceSupported}
-            />
+            <IconButtonContainer textDirection={textDirection}>
+              <IconButtonSideText textDirection={textDirection}>
+                <IconButton onClick={onClickSettings}>
+                  <SettingsIcon />
+                </IconButton>
+                {getLocale('customize')}
+              </IconButtonSideText>
+            </IconButtonContainer>
             <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
               <SettingsAdvancedIcon />
             </IconLink>
diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
index 04f62579b2c8..592e7e97013d 100644
--- a/components/brave_new_tab_ui/containers/newTab/index.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -31,6 +31,9 @@ import * as gridSitesActions from '../../actions/grid_sites_actions'
 import { getLocale } from '../../../common/locale'
 import currencyData from '../../components/default/binance/data'
 
+// NTP features
+import Settings from './settings'
+
 interface Props {
   newTabData: NewTab.State
   gridSitesData: NewTab.GridSitesState
@@ -655,31 +658,34 @@ class NewTabPage extends React.Component<Props, State> {
             </Page.GridItemBrandedLogo>}
             <FooterInfo
               textDirection={newTabData.textDirection}
-              onClickOutside={this.closeSettings}
-              backgroundImageInfo={newTabData.backgroundImage}
               onClickSettings={this.toggleSettings}
-              showSettingsMenu={showSettingsMenu}
+              backgroundImageInfo={newTabData.backgroundImage}
               showPhotoInfo={!isShowingBrandedWallpaper && newTabData.showBackgroundImage}
-              toggleShowBackgroundImage={this.toggleShowBackgroundImage}
-              toggleShowClock={this.toggleShowClock}
-              toggleShowStats={this.toggleShowStats}
-              toggleShowTopSites={this.toggleShowTopSites}
-              toggleBrandedWallpaperOptIn={this.toggleShowBrandedWallpaper}
-              showBackgroundImage={newTabData.showBackgroundImage}
-              showClock={newTabData.showClock}
-              showStats={newTabData.showStats}
-              showTopSites={newTabData.showTopSites}
-              showRewards={newTabData.showRewards}
-              showBinance={newTabData.showBinance}
-              brandedWallpaperOptIn={newTabData.brandedWallpaperOptIn}
-              allowSponsoredWallpaperUI={newTabData.featureFlagBraveNTPSponsoredImagesWallpaper}
-              toggleShowRewards={this.toggleShowRewards}
-              toggleShowBinance={this.toggleShowBinance}
-              binanceSupported={binanceState.binanceSupported}
             />
             </Page.FooterContent>
           </Page.Footer>
         </Page.Page>
+        <Settings
+          textDirection={newTabData.textDirection}
+          showSettingsMenu={showSettingsMenu}
+          onClickOutside={this.closeSettings}
+          toggleShowBackgroundImage={this.toggleShowBackgroundImage}
+          toggleShowClock={this.toggleShowClock}
+          toggleShowStats={this.toggleShowStats}
+          toggleShowTopSites={this.toggleShowTopSites}
+          toggleBrandedWallpaperOptIn={this.toggleShowBrandedWallpaper}
+          showBackgroundImage={newTabData.showBackgroundImage}
+          showClock={newTabData.showClock}
+          showStats={newTabData.showStats}
+          showTopSites={newTabData.showTopSites}
+          showRewards={newTabData.showRewards}
+          showBinance={newTabData.showBinance}
+          brandedWallpaperOptIn={newTabData.brandedWallpaperOptIn}
+          allowSponsoredWallpaperUI={newTabData.featureFlagBraveNTPSponsoredImagesWallpaper}
+          toggleShowRewards={this.toggleShowRewards}
+          toggleShowBinance={this.toggleShowBinance}
+          binanceSupported={binanceState.binanceSupported}
+        />
       </Page.App>
     )
   }
diff --git a/components/brave_new_tab_ui/containers/newTab/settings.tsx b/components/brave_new_tab_ui/containers/newTab/settings.tsx
index 16338553c112..3c8b24f7b3d5 100644
--- a/components/brave_new_tab_ui/containers/newTab/settings.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/settings.tsx
@@ -1,28 +1,46 @@
-/* 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/. */
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
 
 import {
   SettingsMenu,
-  SettingsRow,
-  SettingsText,
   SettingsTitle,
   SettingsWrapper,
-  IconButton,
-  IconButtonSideText
+  SettingsSidebar,
+  SettingsFeatureBody,
+  SettingsContent,
+  SettingsCloseIcon,
+  SettingsSidebarButton,
+  SettingsSidebarActiveButtonSlider,
+  SettingsSidebarButtonText,
+  SettingsSidebarSVGContent
 } from '../../components/default'
 
-import { Toggle } from '../../components/toggle'
-
 import { getLocale } from '../../../common/locale'
-import { SettingsIcon } from 'brave-ui/components/icons'
+
+// Icons
+import { CloseStrokeIcon } from 'brave-ui/components/icons'
+import BackgroundImageIcon from './settings/icons/backgroundImage.svg'
+import NraveStatsIcon from './settings/icons/braveStats.svg'
+import BraveRewardsIcon from './settings/icons/braveRewards.svg'
+import TopSitesIcon from './settings/icons/topSites.svg'
+import ClockIcon from './settings/icons/clock.svg'
+import MoreCardsIcon from './settings/icons/moreCards.svg'
+
+// Tabs
+import BackgroundImageSettings from './settings/backgroundImage'
+import BraveStatsSettings from './settings/braveStats'
+import BraveRewardsSettings from './settings/braveRewards'
+import TopSitesSettings from './settings/topSites'
+import ClockSettings from './settings/clock'
+import MoreCardsSettings from './settings/moreCards'
 
 export interface Props {
   textDirection: string
   showSettingsMenu: boolean
-  onClick: () => void
   onClickOutside: () => void
   toggleShowBackgroundImage: () => void
   toggleShowClock: () => void
@@ -42,28 +60,40 @@ export interface Props {
   binanceSupported: boolean
 }
 
-export default class Settings extends React.PureComponent<Props, {}> {
+type ActiveTabType = 'backgroundImage' | 'braveStats' | 'braveRewards' | 'topSites' | 'clock' | 'moreCards'
+
+interface State {
+  activeTab: number
+}
+
+export default class Settings extends React.PureComponent<Props, State> {
   settingsMenuRef: React.RefObject<any>
   constructor (props: Props) {
     super(props)
     this.settingsMenuRef = React.createRef()
+    this.state = { activeTab: 0 }
   }
 
   handleClickOutside = (event: Event) => {
-    if (this.settingsMenuRef && !this.settingsMenuRef.current.contains(event.target)) {
+    if (
+      this.settingsMenuRef &&
+      this.settingsMenuRef.current &&
+      !this.settingsMenuRef.current.contains(event.target)
+    ) {
       this.props.onClickOutside()
     }
   }
 
   componentDidMount () {
     document.addEventListener('mousedown', this.handleClickOutside)
+    document.addEventListener('keydown', this.onKeyPressSettings)
   }
 
   componentWillUnmount () {
     document.removeEventListener('mousedown', this.handleClickOutside)
   }
 
-  onKeyPressSettings = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+  onKeyPressSettings = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       this.props.onClickOutside()
     }
@@ -73,6 +103,35 @@ export default class Settings extends React.PureComponent<Props, {}> {
     this.props.toggleShowBackgroundImage()
   }
 
+  setActiveTab (activeTab: number) {
+    this.setState({ activeTab })
+  }
+
+  get activeTabOptions (): ActiveTabType[] {
+    return [
+      'backgroundImage', 'braveStats', 'braveRewards', 'topSites', 'clock', 'moreCards'
+    ]
+  }
+
+  getTabIcon (activeTab: number) {
+    switch (activeTab) {
+      case 0:
+        return <SettingsSidebarSVGContent src={BackgroundImageIcon} />
+      case 1:
+        return <SettingsSidebarSVGContent src={NraveStatsIcon} />
+      case 2:
+        return <SettingsSidebarSVGContent src={BraveRewardsIcon} />
+      case 3:
+        return <SettingsSidebarSVGContent src={TopSitesIcon} />
+      case 4:
+        return <SettingsSidebarSVGContent src={ClockIcon} />
+      case 5:
+        return <SettingsSidebarSVGContent src={MoreCardsIcon} />
+      default:
+        return <SettingsSidebarSVGContent src={BackgroundImageIcon} />
+    }
+  }
+
   render () {
     const {
       textDirection,
@@ -89,94 +148,108 @@ export default class Settings extends React.PureComponent<Props, {}> {
       showRewards,
       brandedWallpaperOptIn,
       allowSponsoredWallpaperUI,
-      onClick,
       toggleShowBinance,
       showBinance,
       binanceSupported
     } = this.props
-    return (
-      <SettingsWrapper
-        textDirection={textDirection}
-        title={getLocale('dashboardSettingsTitle')}
-        innerRef={this.settingsMenuRef}
-      >
-        <IconButtonSideText textDirection={textDirection}>
-          <IconButton onClick={onClick} onKeyDown={this.onKeyPressSettings}><SettingsIcon/></IconButton>
-          {getLocale('customize')}
-        </IconButtonSideText>
-        {showSettingsMenu &&
-          <SettingsMenu textDirection={textDirection}>
-            <SettingsTitle>{getLocale('dashboardSettingsTitle')}</SettingsTitle>
-            {allowSponsoredWallpaperUI &&
-            <SettingsRow>
-              <SettingsText>{getLocale('showBackgroundImage')}</SettingsText>
-              <Toggle
-                onChange={this.toggleShowBackgroundImage}
-                checked={showBackgroundImage}
-                size='small'
-              />
-            </SettingsRow>
-            }
-            {allowSponsoredWallpaperUI &&
-            <SettingsRow isChildSetting={true}>
-              <SettingsText>{getLocale('brandedWallpaperOptIn')}</SettingsText>
-              <Toggle
-                onChange={toggleBrandedWallpaperOptIn}
-                // This option can only be enabled if
-                // users opt in for background images
-                checked={showBackgroundImage && brandedWallpaperOptIn}
-                disabled={!showBackgroundImage}
-                size='small'
-              />
-            </SettingsRow>
-            }
-            <SettingsRow>
-              <SettingsText>{getLocale('showRewards')}</SettingsText>
-              <Toggle
-                onChange={toggleShowRewards}
-                checked={showRewards}
-                size='small'
-              />
-            </SettingsRow>
-            {
-              binanceSupported
-              ? <SettingsRow>
-                  <SettingsText>{getLocale('showBinance')}</SettingsText>
-                  <Toggle
-                    onChange={toggleShowBinance}
-                    checked={showBinance}
-                    size='small'
-                  />
-                </SettingsRow>
-              : null
-            }
-            <SettingsRow>
-              <SettingsText>{getLocale('showBraveStats')}</SettingsText>
-              <Toggle
-                onChange={toggleShowStats}
-                checked={showStats}
-                size='small'
-              />
-            </SettingsRow>
-            <SettingsRow>
-              <SettingsText>{getLocale('showClock')}</SettingsText>
-              <Toggle
-                onChange={toggleShowClock}
-                checked={showClock}
-                size='small'
-              />
-            </SettingsRow>
-            <SettingsRow>
-              <SettingsText>{getLocale('showTopSites')}</SettingsText>
-              <Toggle
-                onChange={toggleShowTopSites}
-                checked={showTopSites}
-                size='small'
-              />
-            </SettingsRow>
-        </SettingsMenu>
-      }
-      </SettingsWrapper>
-    )
+    const { activeTab } = this.state
+
+    return showSettingsMenu
+      ? (
+        <SettingsWrapper
+          textDirection={textDirection}
+          title={getLocale('dashboardSettingsTitle')}
+        >
+          <SettingsMenu innerRef={this.settingsMenuRef} textDirection={textDirection}>
+            <SettingsTitle id='settingsTitle'>
+              <h1>{getLocale('dashboardSettingsTitle')}</h1>
+              <SettingsCloseIcon onClick={this.props.onClickOutside}>
+                <CloseStrokeIcon />
+              </SettingsCloseIcon>
+            </SettingsTitle>
+            <SettingsContent id='settingsBody'>
+              <SettingsSidebar id='sidebar'>
+                <SettingsSidebarActiveButtonSlider translateTo={activeTab} />
+                {
+                  this.activeTabOptions.map((tabName, index) => {
+                    return (
+                      <SettingsSidebarButton
+                        key={`sidebar-button-${index}`}
+                        activeTab={activeTab === index}
+                        onClick={this.setActiveTab.bind(this, index)}
+                      >
+                        {this.getTabIcon(index)}
+                        <SettingsSidebarButtonText>
+                          {getLocale(tabName)}
+                        </SettingsSidebarButtonText>
+                      </SettingsSidebarButton>
+                    )
+                  })
+                }
+              </SettingsSidebar>
+              <SettingsFeatureBody id='content'>
+                {
+                  activeTab === 0
+                    ? (
+                    <BackgroundImageSettings
+                      toggleBrandedWallpaperOptIn={toggleBrandedWallpaperOptIn}
+                      toggleShowBackgroundImage={this.toggleShowBackgroundImage}
+                      allowSponsoredWallpaperUI={allowSponsoredWallpaperUI}
+                      brandedWallpaperOptIn={brandedWallpaperOptIn}
+                      showBackgroundImage={showBackgroundImage}
+                    />
+                  ) : null
+                }
+                {
+                  activeTab === 1
+                    ? (
+                      <BraveStatsSettings
+                        toggleShowStats={toggleShowStats}
+                        showStats={showStats}
+                      />
+                    ) : null
+                }
+                {
+                  activeTab === 2
+                    ? (
+                      <BraveRewardsSettings
+                        toggleShowRewards={toggleShowRewards}
+                        showRewards={showRewards}
+                      />
+                    ) : null
+                }
+                {
+                  activeTab === 3
+                    ? (
+                      <TopSitesSettings
+                        toggleShowTopSites={toggleShowTopSites}
+                        showTopSites={showTopSites}
+                      />
+                    ) : null
+                }
+                {
+                  activeTab === 4
+                    ? (
+                      <ClockSettings
+                        toggleShowClock={toggleShowClock}
+                        showClock={showClock}
+                      />
+                    ) : null
+                }
+                {
+                  activeTab === 5
+                    ? (
+                      <MoreCardsSettings
+                        toggleShowBinance={toggleShowBinance}
+                        showBinance={showBinance}
+                        binanceSupported={binanceSupported}
+                      />
+                    ) : null
+                }
+              </SettingsFeatureBody>
+            </SettingsContent>
+          </SettingsMenu>
+        </SettingsWrapper>
+    ) : null
   }
 }
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx b/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx
new file mode 100644
index 000000000000..03695eea6a7d
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx
@@ -0,0 +1,63 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleBrandedWallpaperOptIn: () => void
+  toggleShowBackgroundImage: () => void
+  allowSponsoredWallpaperUI: boolean
+  brandedWallpaperOptIn: boolean
+  showBackgroundImage: boolean
+}
+
+class BackgroundImageSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const {
+      allowSponsoredWallpaperUI,
+      toggleShowBackgroundImage,
+      toggleBrandedWallpaperOptIn,
+      brandedWallpaperOptIn,
+      showBackgroundImage
+    } = this.props
+
+    return (
+      <div>
+        {allowSponsoredWallpaperUI &&
+          <SettingsRow>
+            <SettingsText>{getLocale('showBackgroundImage')}</SettingsText>
+            <Toggle
+              onChange={toggleShowBackgroundImage}
+              checked={showBackgroundImage}
+              size='large'
+            />
+          </SettingsRow>
+          }
+          {allowSponsoredWallpaperUI &&
+          <SettingsRow isChildSetting={true}>
+            <SettingsText>{getLocale('brandedWallpaperOptIn')}</SettingsText>
+            <Toggle
+              onChange={toggleBrandedWallpaperOptIn}
+              // This option can only be enabled if
+              // users opt in for background images
+              checked={showBackgroundImage && brandedWallpaperOptIn}
+              disabled={!showBackgroundImage}
+              size='small'
+            />
+        </SettingsRow>}
+      </div>
+    )
+  }
+}
+
+export default BackgroundImageSettings
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/braveRewards.tsx b/components/brave_new_tab_ui/containers/newTab/settings/braveRewards.tsx
new file mode 100644
index 000000000000..0c682ed049cf
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/braveRewards.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleShowRewards: () => void
+  showRewards: boolean
+}
+
+class BraveRewardsSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const { toggleShowRewards, showRewards } = this.props
+    return (
+      <div>
+        <SettingsRow>
+          <SettingsText>{getLocale('showRewards')}</SettingsText>
+          <Toggle
+            onChange={toggleShowRewards}
+            checked={showRewards}
+            size='large'
+          />
+        </SettingsRow>
+      </div>
+    )
+  }
+}
+
+export default BraveRewardsSettings
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/braveStats.tsx b/components/brave_new_tab_ui/containers/newTab/settings/braveStats.tsx
new file mode 100644
index 000000000000..88aabf8afb41
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/braveStats.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleShowStats: () => void
+  showStats: boolean
+}
+
+class BraveStatsSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const { toggleShowStats, showStats } = this.props
+
+    return (
+      <div>
+        <SettingsRow>
+          <SettingsText>{getLocale('showBraveStats')}</SettingsText>
+          <Toggle
+            onChange={toggleShowStats}
+            checked={showStats}
+            size='large'
+          />
+        </SettingsRow>
+      </div>
+    )
+  }
+}
+
+export default BraveStatsSettings
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/clock.tsx b/components/brave_new_tab_ui/containers/newTab/settings/clock.tsx
new file mode 100644
index 000000000000..977e84f3e0f4
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/clock.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleShowClock: () => void
+  showClock: boolean
+}
+
+class ClockSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const { toggleShowClock, showClock } = this.props
+    return (
+      <div>
+        <SettingsRow>
+          <SettingsText>{getLocale('showClock')}</SettingsText>
+          <Toggle
+            onChange={toggleShowClock}
+            checked={showClock}
+            size='large'
+          />
+        </SettingsRow>
+      </div>
+    )
+  }
+}
+
+export default ClockSettings
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/backgroundImage.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/backgroundImage.svg
new file mode 100644
index 000000000000..a1beb9946fbc
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/backgroundImage.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='17' height='14' fill='none'><path fill='#5E6175' fillRule='evenodd' d='M11.073 4.828a1.287 1.287 0 112.572.001 1.287 1.287 0 01-2.572 0zm-9.005 7.719v-2.92l3.826-3.28 3.438 3.438a.643.643 0 00.84.06l2.085-1.563 2.675 3.211v1.054H2.068zM14.932 2.255v7.229l-2.079-2.495a.643.643 0 00-.88-.103L9.847 8.482 6.382 5.017a.643.643 0 00-.874-.034l-3.44 2.95V2.254h12.864zm0-1.286H2.068C1.358.969.78 1.546.78 2.255v10.292c0 .71.577 1.286 1.287 1.286h12.864c.71 0 1.287-.577 1.287-1.286V2.255c0-.71-.577-1.286-1.287-1.286z' clipRule='evenodd'/><mask width='17' height='14' x='0' y='0' maskUnits='userSpaceOnUse'><path fill='#fff' fillRule='evenodd' d='M11.073 4.828a1.287 1.287 0 112.572.001 1.287 1.287 0 01-2.572 0zm-9.005 7.719v-2.92l3.826-3.28 3.438 3.438a.643.643 0 00.84.06l2.085-1.563 2.675 3.211v1.054H2.068zM14.932 2.255v7.229l-2.079-2.495a.643.643 0 00-.88-.103L9.847 8.482 6.382 5.017a.643.643 0 00-.874-.034l-3.44 2.95V2.254h12.864zm0-1.286H2.068C1.358.969.78 1.546.78 2.255v10.292c0 .71.577 1.286 1.287 1.286h12.864c.71 0 1.287-.577 1.287-1.286V2.255c0-.71-.577-1.286-1.287-1.286z' clipRule='evenodd'/></mask></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/braveRewards.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/braveRewards.svg
new file mode 100644
index 000000000000..68329585b336
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/braveRewards.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'><path fill='#5E6175' fillRule='evenodd' d='M11.556 10.787L9.028 6.764v-2.19l4.527 7.544-1.999-1.332zm-5.552.888h4.969l1.613 1.075H4.122l1.882-1.075zm1.961-4.91L5.45 10.768 3.623 11.81l4.342-7.237v2.191zm.532 1.152l1.695 2.695h-3.39l1.695-2.695zm6.83 5.09L8.952 2.384c-.017-.028-.039-.05-.06-.074a.523.523 0 00-.395-.184.524.524 0 00-.396.184c-.021.024-.043.045-.06.074L1.666 13.008a.543.543 0 00-.056.132l-.002.01a.526.526 0 00-.007.217c.01.06.027.12.058.176l.001.002c.01.015.022.026.032.04.017.025.033.05.054.071.02.02.044.035.066.052.016.011.028.024.044.033.025.014.051.023.078.033.017.006.032.015.05.02.04.01.08.015.122.016l.016.002h12.75a.53.53 0 00.455-.804z' clipRule='evenodd' /></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/braveStats.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/braveStats.svg
new file mode 100644
index 000000000000..ce4c8fcb9d4b
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/braveStats.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'><path fill='#5E6175' fillRule='evenodd' d='M2.656 2.125v12.75h2.125V2.125H2.656zm-.531-1.063h3.188a.53.53 0 01.53.532v13.812a.531.531 0 01-.53.531H2.124a.531.531 0 01-.531-.53V1.593c0-.294.238-.532.531-.532zm5.313 7.97v5.843h2.125V9.031H7.437zm-.532-1.063h3.188c.293 0 .531.238.531.531v6.906a.531.531 0 01-.531.531H6.906a.531.531 0 01-.531-.53V8.5c0-.293.238-.531.531-.531zm5.313 6.906V4.781h2.125v10.094h-2.125zm2.656-11.156h-3.188a.531.531 0 00-.53.531v11.156a.53.53 0 00.53.531h3.188a.531.531 0 00.531-.53V4.25a.531.531 0 00-.531-.531z' clipRule='evenodd'/></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/clock.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/clock.svg
new file mode 100644
index 000000000000..404c1f3cfbbe
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/clock.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'> <path fill='#5E6175' fillRule='evenodd' d='M1.875 10a8.125 8.125 0 1016.25 0 8.125 8.125 0 00-16.25 0zm14.896 0a6.77 6.77 0 11-13.542 0 6.77 6.77 0 0113.542 0zm-5.688 0a1.256 1.256 0 00-.458-.458V6.875a.625.625 0 10-1.25 0v2.667a1.25 1.25 0 101.708 1.708h3.292a.625.625 0 100-1.25h-3.292z' clipRule='evenodd'/></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/moreCards.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/moreCards.svg
new file mode 100644
index 000000000000..e13859e37202
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/moreCards.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'><path fill='#5E6175' fillRule='evenodd' d='M11.628 15.625h2.747c.345 0 .625-.28.625-.625v-1.6c0-.346.28-.626.625-.626a1.25 1.25 0 100-2.5A.625.625 0 0115 9.65V5.625A.625.625 0 0014.375 5h-2.5a.625.625 0 01-.625-.625 1.25 1.25 0 10-2.5 0c0 .345-.28.625-.625.625H5a.625.625 0 00-.625.625v1.954a2.501 2.501 0 010 4.842V15c0 .345.28.625.625.625h1.728a2.5 2.5 0 014.9 0zM16.25 15c0 1.035-.84 1.875-1.875 1.875h-3.326a.625.625 0 01-.623-.666c.002-.028.002-.056.002-.084a1.25 1.25 0 10-2.497.084.625.625 0 01-.624.666H5A1.875 1.875 0 013.125 15v-3.125c0-.345.28-.625.625-.625a1.25 1.25 0 100-2.5.625.625 0 01-.625-.625v-2.5c0-1.036.84-1.875 1.875-1.875h2.579a2.501 2.501 0 014.842 0h1.954c1.036 0 1.875.84 1.875 1.875v3.478a2.501 2.501 0 010 4.842V15z' clipRule='evenodd'/><mask width='16' height='16' x='3' y='1' maskUnits='userSpaceOnUse'><path fill='#fff' fillRule='evenodd' d='M11.628 15.625h2.747c.345 0 .625-.28.625-.625v-1.6c0-.346.28-.626.625-.626a1.25 1.25 0 100-2.5A.625.625 0 0115 9.65V5.625A.625.625 0 0014.375 5h-2.5a.625.625 0 01-.625-.625 1.25 1.25 0 10-2.5 0c0 .345-.28.625-.625.625H5a.625.625 0 00-.625.625v1.954a2.501 2.501 0 010 4.842V15c0 .345.28.625.625.625h1.728a2.5 2.5 0 014.9 0zM16.25 15c0 1.035-.84 1.875-1.875 1.875h-3.326a.625.625 0 01-.623-.666c.002-.028.002-.056.002-.084a1.25 1.25 0 10-2.497.084.625.625 0 01-.624.666H5A1.875 1.875 0 013.125 15v-3.125c0-.345.28-.625.625-.625a1.25 1.25 0 100-2.5.625.625 0 01-.625-.625v-2.5c0-1.036.84-1.875 1.875-1.875h2.579a2.501 2.501 0 014.842 0h1.954c1.036 0 1.875.84 1.875 1.875v3.478a2.501 2.501 0 010 4.842V15z' clipRule='evenodd'/></mask></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/icons/topSites.svg b/components/brave_new_tab_ui/containers/newTab/settings/icons/topSites.svg
new file mode 100644
index 000000000000..89b5c9061f47
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/icons/topSites.svg
@@ -0,0 +1,7 @@
+<!--
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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/.
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'><path fill='#5E6175' fillRule='evenodd' d='M14.667 15.333H1.333A1.335 1.335 0 010 14V2C0 1.265.598.667 1.333.667h13.334C15.402.667 16 1.265 16 2v12c0 .735-.598 1.333-1.333 1.333zM1.333 14h13.332l.001-9.333H1.333V14zm0-12v1.333h13.334V2H1.333zm11.334 8h-4a.666.666 0 110-1.333h4a.666.666 0 110 1.333zm0-2h-4a.666.666 0 110-1.333h4a.667.667 0 010 1.333zM6 12H3.333a.667.667 0 01-.666-.667v-4c0-.368.298-.666.666-.666H6c.368 0 .667.298.667.666v4A.667.667 0 016 12zm-.667-4H4v2.667h1.333V8zm3.334 2.667H10A.667.667 0 1110 12H8.667a.667.667 0 010-1.333z' clipRule='evenodd'/></svg>
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx b/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx
new file mode 100644
index 000000000000..d1b5ba1f5d6c
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleShowBinance: () => void
+  showBinance: boolean
+  binanceSupported: boolean
+}
+
+class MoreCardsSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const { binanceSupported, toggleShowBinance, showBinance } = this.props
+    return (
+      <div>
+        {
+          binanceSupported
+          ? <SettingsRow>
+              <SettingsText>{getLocale('showBinance')}</SettingsText>
+              <Toggle
+                onChange={toggleShowBinance}
+                checked={showBinance}
+                size='large'
+              />
+            </SettingsRow>
+          : null
+        }
+      </div>
+    )
+  }
+}
+
+export default MoreCardsSettings
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx b/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx
new file mode 100644
index 000000000000..06f3666b9db8
--- /dev/null
+++ b/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.*/
+
+import * as React from 'react'
+
+import {
+  SettingsRow,
+  SettingsText
+} from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  toggleShowTopSites: () => void
+  showTopSites: boolean
+}
+
+class TopSitesSettings extends React.PureComponent<Props, {}> {
+  render () {
+    const { toggleShowTopSites, showTopSites } = this.props
+    return (
+      <div>
+        <SettingsRow>
+          <SettingsText>{getLocale('showTopSites')}</SettingsText>
+          <Toggle
+            onChange={toggleShowTopSites}
+            checked={showTopSites}
+            size='large'
+          />
+        </SettingsRow>
+      </div>
+    )
+  }
+}
+
+export default TopSitesSettings
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index d63834b2200b..86233d31013f 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -182,6 +182,7 @@
       <message name="IDS_BRAVE_NEW_TAB_SHOW_TOP_SITES" desc="Text for settings top sites option">Top Sites</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_REWARDS" desc="Text for settings rewards option">Brave Rewards</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_BINANCE" desc="Text for binance option">Binance</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_MORE_CARDS" desc="Text for more cards option">More cards</message>
       <message name="IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN" desc="Text for setting to opt-in to Branded Wallpapers on New Tab Page">Sponsored Images</message>
       <message name="IDS_BRAVE_NEW_TAB_TOP_SITES" desc="Top Sites title">top sites</message>
       <message name="IDS_BRAVE_NEW_TAB_STATS" desc="Brave Stats title">Brave Stats</message>