diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index fdef7ce9c369..77f04040af25 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -168,6 +168,9 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "showRewards", IDS_BRAVE_NEW_TAB_SHOW_REWARDS },
         { "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
         { "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN },
+        { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
+        { "statsTitle", IDS_BRAVE_NEW_TAB_STATS },
+        { "clockTitle", IDS_BRAVE_NEW_TAB_CLOCK },
         // Private Tab - General
         { "learnMore", IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE },
         { "done", IDS_BRAVE_PRIVATE_NEW_TAB_DONE },
diff --git a/components/brave_new_tab_ui/components/default/binance/index.tsx b/components/brave_new_tab_ui/components/default/binance/index.tsx
index 526b1b364c64..862790e3ccca 100644
--- a/components/brave_new_tab_ui/components/default/binance/index.tsx
+++ b/components/brave_new_tab_ui/components/default/binance/index.tsx
@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import createWidget from '../widget/index'
 import {
   WidgetWrapper,
   Copy,
@@ -51,7 +52,7 @@ interface Props {
   onSetUserTLDAutoSet: () => void
 }
 
-export default class Binance extends React.PureComponent<Props, State> {
+class Binance extends React.PureComponent<Props, State> {
   private fiatList: string[]
   private usCurrencies: string[]
   private comCurrencies: string[]
@@ -291,3 +292,5 @@ export default class Binance extends React.PureComponent<Props, State> {
     )
   }
 }
+
+export const BinanceWidget = createWidget(Binance)
diff --git a/components/brave_new_tab_ui/components/default/index.ts b/components/brave_new_tab_ui/components/default/index.ts
index db27ad5f7387..4d587e58e42d 100644
--- a/components/brave_new_tab_ui/components/default/index.ts
+++ b/components/brave_new_tab_ui/components/default/index.ts
@@ -8,9 +8,8 @@ import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper
 import { ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './gridSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { ClockWidget } from './clock'
-import RewardsWidget from './rewards'
-import { WidgetStack } from './widgetStack'
-import BinanceWidget from './binance'
+import { RewardsWidget } from './rewards'
+import { BinanceWidget } from './binance'
 import createWidget from './widget'
 
 export * from './page'
@@ -33,7 +32,6 @@ export {
   SettingsTitle,
   SettingsWrapper,
   RewardsWidget,
-  WidgetStack,
   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 cca0c0e056b0..192511f5e572 100644
--- a/components/brave_new_tab_ui/components/default/page/index.ts
+++ b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -89,8 +89,7 @@ export const GridItemWidgetStack = styled('section')`
   grid-column: 3 / span 1;
   grid-row-end: span 2;
   @media screen and (max-width: ${breakpointLargeBlocks}) {
-    grid-column: 2 / span 2;
-    justify-self: end;
+    max-width: 284px;
   }
 `
 
@@ -262,6 +261,7 @@ export const Navigation = styled<{}, 'nav'>('nav')`
 
 interface IconButtonProps {
   clickDisabled?: boolean
+  isClickMenu?: boolean
 }
 
 export const IconLink = styled<{}, 'a'>('a')`
@@ -286,7 +286,8 @@ export const IconButton = styled<IconButtonProps, 'button'>('button')`
   height: 24px;
   padding: 0;
   border: none;
-  margin: 12px;
+  margin: 7px;
+  margin: ${p => p.isClickMenu ? 7 : 12}px;
   cursor: pointer;
   color: #ffffff;
   background-color: transparent;
diff --git a/components/brave_new_tab_ui/components/default/rewards/index.tsx b/components/brave_new_tab_ui/components/default/rewards/index.tsx
index a0e48ebeb885..b49cdb432269 100644
--- a/components/brave_new_tab_ui/components/default/rewards/index.tsx
+++ b/components/brave_new_tab_ui/components/default/rewards/index.tsx
@@ -3,6 +3,7 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import createWidget from '../widget/index'
 import { convertBalance } from '../../../../brave_rewards/resources/page/utils'
 import { getLocale, splitStringForTag } from '../../../../common/locale'
 
@@ -69,7 +70,7 @@ const enum AmountItemType {
   TIPS = 1
 }
 
-export default class Rewards extends React.PureComponent<RewardsProps, {}> {
+class Rewards extends React.PureComponent<RewardsProps, {}> {
 
   getButtonText = (isAds: boolean = false) => {
     if (isAds) {
@@ -397,3 +398,5 @@ export default class Rewards extends React.PureComponent<RewardsProps, {}> {
     )
   }
 }
+
+export const RewardsWidget = createWidget(Rewards)
diff --git a/components/brave_new_tab_ui/components/default/widget/assets/ellipsis.tsx b/components/brave_new_tab_ui/components/default/widget/assets/ellipsis.tsx
new file mode 100644
index 000000000000..db90e421face
--- /dev/null
+++ b/components/brave_new_tab_ui/components/default/widget/assets/ellipsis.tsx
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+export default class EllipsisIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M18 14.25a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5zm-6 0a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5zm-6 0a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5z'} fill={'#ffffff'} fillRule={'evenodd'}/>
+      </svg>
+    )
+  }
+}
diff --git a/components/brave_new_tab_ui/components/default/widget/assets/hide.tsx b/components/brave_new_tab_ui/components/default/widget/assets/hide.tsx
new file mode 100644
index 000000000000..19c115e87c1e
--- /dev/null
+++ b/components/brave_new_tab_ui/components/default/widget/assets/hide.tsx
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+export default class HideIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M5.812 19.138a.663.663 0 01-.943 0 .666.666 0 010-.943l2.054-2.054C4.744 14.741 4 12.805 4 12c0-1.741 2.803-6 8-6 2.001 0 3.263.607 3.961 1.103l2.242-2.241a.666.666 0 11.942.942L5.812 19.138zm4.396-6.282l2.653-2.652A1.994 1.994 0 0012 10c-1.103 0-2 .898-2 2 0 .3.08.589.208.856zM12 7.333c-4.523 0-6.667 3.744-6.667 4.667 0 .297.476 1.954 2.562 3.168l1.359-1.358c-.047-.043-.101-.075-.135-.133A3.337 3.337 0 0112 8.667c.66 0 1.293.202 1.835.562l1.162-1.161c-.55-.34-1.502-.735-2.997-.735zm0 8A.667.667 0 0111.956 14 2.198 2.198 0 0014 11.956a.666.666 0 111.33.087 3.537 3.537 0 01-3.288 3.289H12zm-1.84 1.113c.582.146 1.201.22 1.84.22 4.523 0 6.667-3.743 6.667-4.666 0-.279-.289-1.185-1.182-2.204a.667.667 0 111.004-.878C19.407 9.966 20 11.176 20 12c0 1.74-2.803 6-8 6a8.871 8.871 0 01-2.165-.262.667.667 0 11.326-1.292z'} fill={'#3B3E4F'} fillRule={'evenodd'} />
+      </svg>
+    )
+  }
+}
diff --git a/components/brave_new_tab_ui/components/default/widget/assets/learn-more.tsx b/components/brave_new_tab_ui/components/default/widget/assets/learn-more.tsx
new file mode 100644
index 000000000000..755e718c0489
--- /dev/null
+++ b/components/brave_new_tab_ui/components/default/widget/assets/learn-more.tsx
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+export default class LearnMoreIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M9 1.688a7.313 7.313 0 110 14.625A7.313 7.313 0 019 1.688zm0 1.218a6.094 6.094 0 100 12.188A6.094 6.094 0 009 2.906zm0 2.438a.61.61 0 110 1.218.61.61 0 010-1.218zm.61 6.703a.61.61 0 01-1.22 0v-3.7a.61.61 0 111.22 0v3.7z'} fill={'#3B3E4F'} transform={'translate(3 3)'} fillRule={'evenodd'} />
+      </svg>
+    )
+  }
+}
diff --git a/components/brave_new_tab_ui/components/default/widget/index.tsx b/components/brave_new_tab_ui/components/default/widget/index.tsx
index 2a6b7a2ece78..77b873e0e4b3 100644
--- a/components/brave_new_tab_ui/components/default/widget/index.tsx
+++ b/components/brave_new_tab_ui/components/default/widget/index.tsx
@@ -13,6 +13,10 @@ export interface WidgetProps {
   hideWidget?: HideWidgetFunction
   preventFocus?: boolean
   textDirection: string
+  isCrypto?: boolean
+  isCryptoTab?: boolean
+  widgetTitle?: string
+  onLearnMore?: () => void
 }
 
 export interface WidgetState {
@@ -32,20 +36,27 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
       this.setState({ widgetMenuPersist: !this.state.widgetMenuPersist })
     }
 
+    persistWidgetHover = () => {
+      this.setState({ widgetMenuPersist: true })
+    }
+
     unpersistWidgetHover = () => {
       this.setState({ widgetMenuPersist: false })
     }
 
     render () {
-      const { menuPosition, hideWidget, textDirection, preventFocus } = this.props
+      const { menuPosition, hideWidget, textDirection, preventFocus, isCrypto, isCryptoTab, widgetTitle, onLearnMore } = this.props
       const { widgetMenuPersist } = this.state
 
       return (
         <StyledWidgetContainer
           menuPosition={menuPosition}
           textDirection={textDirection}
+          onMouseLeave={this.unpersistWidgetHover}
         >
           <StyledWidget
+            isCrypto={isCrypto}
+            isCryptoTab={isCryptoTab}
             widgetMenuPersist={widgetMenuPersist}
             preventFocus={preventFocus}
           >
@@ -53,12 +64,15 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
           </StyledWidget>
           {hideWidget && !preventFocus &&
           <WidgetMenu
+            widgetTitle={widgetTitle}
+            onLearnMore={onLearnMore}
             widgetMenuPersist={widgetMenuPersist}
             toggleWidgetHover={this.toggleWidgetHover}
             textDirection={textDirection}
             menuPosition={menuPosition}
             hideWidget={hideWidget as HideWidgetFunction}
             unpersistWidgetHover={this.unpersistWidgetHover}
+            onMouseEnter={this.persistWidgetHover}
           />
           }
         </StyledWidgetContainer>
diff --git a/components/brave_new_tab_ui/components/default/widget/styles.ts b/components/brave_new_tab_ui/components/default/widget/styles.ts
index 5aeb73add962..9908ffe8b6e0 100644
--- a/components/brave_new_tab_ui/components/default/widget/styles.ts
+++ b/components/brave_new_tab_ui/components/default/widget/styles.ts
@@ -3,7 +3,7 @@
 // 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 'brave-ui/theme'
+import styled from 'brave-ui/theme'
 
 interface WidgetPositionProps {
   menuPosition: 'right' | 'left'
@@ -20,36 +20,15 @@ export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
   flex-direction: ${p => p.menuPosition === 'right' ? 'row' : 'row-reverse'};
   height: fit-content;
   min-width: 0;
-`
-
-interface WidgetVisibilityProps {
-  widgetMenuPersist: boolean
-  preventFocus?: boolean
-}
-
-export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
-  padding: 24px;
-  max-width: 100%;
   position: relative;
-  ${p => !p.preventFocus && css`
-    ${StyledWidgetContainer}:hover & {
-      border-radius: 16px;
-      background: rgba(33, 37, 41, 0.48);
-    }
-  `}
-
-  // Also hover when menu button has been clicked
-  ${ p => p.widgetMenuPersist && `
-    border-radius: 16px;
-    background: rgba(33, 37, 41, 0.48);
-  `}
-
 `
 
 export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPositionProps, 'div'>('div')`
   visibility: hidden;
   pointer-events: none;
-  position: relative;
+  position: absolute;
+  top: 5px;
+  right: 5px;
 
   ${StyledWidgetContainer}:hover & {
     visibility: visible;
@@ -61,13 +40,35 @@ export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPo
     visibility: visible;
     pointer-events: auto;
   `}
+`
+
+interface WidgetVisibilityProps {
+  widgetMenuPersist: boolean
+  preventFocus?: boolean
+  isCrypto?: boolean
+  isCryptoTab?: boolean
+}
 
-  // Float in gutter
-  ${p => p.menuPosition === 'left' ? css`
-      margin-left: -48px;
-    ` : css`
-      margin-right: -48px;
-    `}
+export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
+  padding: ${p => p.isCrypto ? 0 : 24}px;
+  max-width: 100%;
+  min-width: ${p => p.isCrypto ? '284px' : 'initial'};
+  position: relative;
+  transition: background 0.5s ease;
+  border-radius: ${p => p.isCrypto ? 'initial' : '16px'};
+
+  ${StyledWidgetMenuContainer}:hover & {
+    background: rgba(33, 37, 41, 0.48);
+  }
+
+  // Also hover when menu button has been clicked
+  ${ p => (p.widgetMenuPersist && !p.isCryptoTab) && `
+    background: rgba(33, 37, 41, 0.48);
+  `}
+
+  &:hover {
+    box-shadow: ${p => p.isCrypto && !p.isCryptoTab ? '0px 0px 16px 0px rgba(0, 0, 0, 0.5)' : 'initial'};
+  }
 `
 
 interface WidgetMenuProps {
@@ -84,6 +85,7 @@ export const StyledWidgetMenu = styled<WidgetMenuProps, 'div'>('div')`
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   top: 48px;
+  z-index: 1;
 
   @media screen and (min-width: 1150px) {
     ${p => (p.menuPosition === 'right' && p.textDirection === 'ltr') || (p.menuPosition === 'left' && p.textDirection === 'rtl')
@@ -120,6 +122,29 @@ export const StyledWidgetButton = styled<WidgetButtonProps, 'button'>('button')`
   outline-color: #FF7654;
   outline-width: 2px;
   outline-offset: -3px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${p => p.theme.color.contextMenuHoverBackground};
+    color: ${p => p.theme.color.contextMenuHoverForeground};
+  }
+`
+
+export const StyledWidgetLink = styled<WidgetButtonProps, 'a'>('a')`
+  border-style: none;
+  background: transparent;
+  padding: 0;
+  display: flex;
+  height: 30px;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  outline-color: #FF7654;
+  outline-width: 2px;
+  outline-offset: -3px;
+  cursor: pointer;
+  text-decoration: none;
 
   &:hover {
     background-color: ${p => p.theme.color.contextMenuHoverBackground};
@@ -130,7 +155,7 @@ export const StyledWidgetButton = styled<WidgetButtonProps, 'button'>('button')`
 export const StyledWidgetIcon = styled<{}, 'div'>('div')`
   height: 13px;
   width: 13px;
-  margin: 0 10px 0 18px;
+  margin: -7px 15px 0 10px;
 `
 export const StyledSpan = styled<{}, 'span'>('span')`
   height: 13px;
diff --git a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
index 79f3c136ec23..b02c64c2812d 100644
--- a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
+++ b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
@@ -5,9 +5,11 @@
 
 import * as React from 'react'
 
-import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan } from './styles'
+import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan, StyledWidgetLink } from './styles'
 import { IconButton } from '../../default'
-import { CaratCircleODownIcon, CloseStrokeIcon } from 'brave-ui/components/icons'
+import EllipsisIcon from './assets/ellipsis'
+import HideIcon from './assets/hide'
+import LearnMoreIcon from './assets/learn-more'
 import { getLocale } from '../../../../common/locale'
 
 interface Props {
@@ -17,6 +19,9 @@ interface Props {
   toggleWidgetHover: () => void
   widgetMenuPersist: boolean
   unpersistWidgetHover: () => void
+  widgetTitle?: string
+  onLearnMore?: () => void
+  onMouseEnter: () => void
 }
 
 interface State {
@@ -49,7 +54,6 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
   }
 
   toggleMenu = () => {
-    this.props.toggleWidgetHover()
     this.setState({ showMenu: !this.state.showMenu })
   }
 
@@ -64,15 +68,18 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { menuPosition, textDirection, widgetMenuPersist } = this.props
+    const { menuPosition, textDirection, widgetMenuPersist, widgetTitle, onLearnMore, onMouseEnter } = this.props
     const { showMenu } = this.state
+    const hideString = widgetTitle ? `${getLocale('hide')} ${widgetTitle}` : getLocale('hide')
+
     return (
       <StyledWidgetMenuContainer
         menuPosition={menuPosition}
         innerRef={this.settingsMenuRef}
         widgetMenuPersist={widgetMenuPersist}
+        onMouseEnter={onMouseEnter}
       >
-        <IconButton onClick={this.toggleMenu}><CaratCircleODownIcon/></IconButton>
+        <IconButton isClickMenu={true} onClick={this.toggleMenu}><EllipsisIcon/></IconButton>
         {showMenu && <StyledWidgetMenu
           textDirection={textDirection}
           menuPosition={menuPosition}
@@ -80,9 +87,19 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
           <StyledWidgetButton
             onClick={this.unmountWidget}
           >
-            <StyledWidgetIcon><CloseStrokeIcon/></StyledWidgetIcon>
-            <StyledSpan>{getLocale('hide')}</StyledSpan>
+            <StyledWidgetIcon><HideIcon/></StyledWidgetIcon>
+            <StyledSpan>{hideString}</StyledSpan>
           </StyledWidgetButton>
+          {
+            onLearnMore
+            ? <StyledWidgetLink
+                onClick={onLearnMore}
+            >
+              <StyledWidgetIcon><LearnMoreIcon/></StyledWidgetIcon>
+              <StyledSpan>{`${getLocale('learnMore')}`}</StyledSpan>
+            </StyledWidgetLink>
+            : null
+          }
         </StyledWidgetMenu>}
       </StyledWidgetMenuContainer>
     )
diff --git a/components/brave_new_tab_ui/components/default/widgetStack/index.tsx b/components/brave_new_tab_ui/components/default/widgetStack/index.tsx
deleted file mode 100644
index c4d514a92fee..000000000000
--- a/components/brave_new_tab_ui/components/default/widgetStack/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
-* License, v. 2.0. If a copy of the MPL was not distributed with this file,
-* You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import * as React from 'react'
-import createWidget from '../widget'
-
-class Stack extends React.PureComponent<{}, {}> {
-
-  render () {
-    return (
-      <>
-        {this.props.children}
-      </>
-    )
-  }
-}
-
-export const WidgetStack = createWidget(Stack)
diff --git a/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts b/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts
index 746babe812c1..22fb31bf7d78 100644
--- a/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts
+++ b/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts
@@ -13,7 +13,8 @@ export const StyledTitleTab = styled<StyleProps, 'div'>('div')`
   cursor: pointer;
   padding: 10px ${p => p.isInTab ? 13 : 25}px;
   margin-bottom: -3px;
-  background-image: linear-gradient(270deg, rgba(33,37,41,0.16) 0%, #212529 100%);
+  backdrop-filter: blur(25px);
+  background: linear-gradient(90deg, rgba(33,37,41,0.4) 0%, rgba(33,37,41,0.16) 100%);
   border-radius: 8px 8px 0 0;
   box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 20px 2px;
 `
diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
index 72721bf8dc09..4ca9a5369579 100644
--- a/components/brave_new_tab_ui/containers/newTab/index.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -13,8 +13,7 @@ import SiteRemovalNotification from './notification'
 import {
   ClockWidget as Clock,
   RewardsWidget as Rewards,
-  BinanceWidget as Binance,
-  WidgetStack
+  BinanceWidget as Binance
 } from '../../components/default'
 import * as Page from '../../components/default/page'
 import BrandedWallpaperLogo from '../../components/default/brandedWallpaper/logo'
@@ -28,6 +27,7 @@ import { isGridSitePinned } from '../../helpers/newTabUtils'
 import { SortEnd } from 'react-sortable-hoc'
 import * as newTabActions from '../../actions/new_tab_actions'
 import * as gridSitesActions from '../../actions/grid_sites_actions'
+import { getLocale } from '../../../common/locale'
 
 interface Props {
   newTabData: NewTab.State
@@ -188,21 +188,6 @@ class NewTabPage extends React.Component<Props, State> {
     )
   }
 
-  toggleShowCrypto = () => {
-    const { currentStackWidget, binanceState, showRewards } = this.props.newTabData
-
-    if (!binanceState.binanceSupported) {
-      this.props.saveShowRewards(!showRewards)
-      return
-    }
-
-    if (currentStackWidget === 'rewards') {
-      this.toggleShowRewards()
-    } else {
-      this.toggleShowBinance()
-    }
-  }
-
   toggleShowRewards = () => {
     const {
       currentStackWidget,
@@ -309,6 +294,14 @@ class NewTabPage extends React.Component<Props, State> {
     this.props.actions.setUserTLDAutoSet()
   }
 
+  learnMoreRewards = () => {
+    window.open('https://brave.com/brave-rewards/', '_blank')
+  }
+
+  learnMoreBinance = () => [
+    window.open('https://brave.com/binance/', '_blank')
+  ]
+
   getCryptoContent () {
     const { currentStackWidget } = this.props.newTabData
 
@@ -331,7 +324,7 @@ class NewTabPage extends React.Component<Props, State> {
 
   renderCryptoContent () {
     const { newTabData } = this.props
-    const { textDirection, showRewards, showBinance } = newTabData
+    const { showRewards, showBinance } = newTabData
 
     if (!showRewards && !showBinance) {
       return null
@@ -339,14 +332,7 @@ class NewTabPage extends React.Component<Props, State> {
 
     return (
       <Page.GridItemWidgetStack>
-        <WidgetStack
-          menuPosition={'left'}
-          textDirection={textDirection}
-          preventFocus={false}
-          hideWidget={this.toggleShowCrypto}
-        >
-          {this.getCryptoContent()}
-        </WidgetStack>
+        {this.getCryptoContent()}
       </Page.GridItemWidgetStack>
     )
   }
@@ -355,7 +341,8 @@ class NewTabPage extends React.Component<Props, State> {
     const { newTabData } = this.props
     const {
       rewardsState,
-      showRewards: rewardsWidgetOn
+      showRewards: rewardsWidgetOn,
+      textDirection
     } = newTabData
     const isShowingBrandedWallpaper = GetIsShowingBrandedWallpaper(this.props)
     const shouldShowBrandedWallpaperNotification = GetShouldShowBrandedWallpaperNotification(this.props)
@@ -368,6 +355,14 @@ class NewTabPage extends React.Component<Props, State> {
     return (
       <Rewards
         {...rewardsState}
+        widgetTitle={getLocale('rewardsWidgetBraveRewards')}
+        onLearnMore={this.learnMoreRewards}
+        menuPosition={'left'}
+        isCrypto={true}
+        isCryptoTab={!showContent}
+        textDirection={textDirection}
+        preventFocus={false}
+        hideWidget={this.toggleShowRewards}
         showContent={showContent}
         onShowContent={this.toggleStackWidget.bind(this, 'rewards')}
         onCreateWallet={this.createWallet}
@@ -386,7 +381,7 @@ class NewTabPage extends React.Component<Props, State> {
 
   renderBinanceWidget (showContent: boolean) {
     const { newTabData } = this.props
-    const { binanceState, showBinance } = newTabData
+    const { binanceState, showBinance, textDirection } = newTabData
 
     if (!showBinance || !binanceState.binanceSupported) {
       return null
@@ -395,6 +390,14 @@ class NewTabPage extends React.Component<Props, State> {
     return (
       <Binance
         {...binanceState}
+        isCrypto={true}
+        isCryptoTab={!showContent}
+        menuPosition={'left'}
+        widgetTitle={'Binance'}
+        onLearnMore={this.learnMoreBinance}
+        textDirection={textDirection}
+        preventFocus={false}
+        hideWidget={this.toggleShowBinance}
         showContent={showContent}
         onBuyCrypto={this.buyCrypto}
         onBinanceUserTLD={this.onBinanceUserTLD}
@@ -447,6 +450,7 @@ class NewTabPage extends React.Component<Props, State> {
           {newTabData.showStats &&
           <Page.GridItemStats>
             <Stats
+              widgetTitle={getLocale('statsTitle')}
               textDirection={newTabData.textDirection}
               stats={newTabData.stats}
               hideWidget={this.toggleShowStats}
@@ -457,6 +461,7 @@ class NewTabPage extends React.Component<Props, State> {
           {newTabData.showClock &&
           <Page.GridItemClock>
             <Clock
+              widgetTitle={getLocale('clockTitle')}
               textDirection={newTabData.textDirection}
               hideWidget={this.toggleShowClock}
               menuPosition={'left'}
@@ -469,6 +474,7 @@ class NewTabPage extends React.Component<Props, State> {
               <Page.GridItemTopSites>
                 <TopSitesGrid
                   actions={actions}
+                  widgetTitle={getLocale('topSitesTitle')}
                   gridSites={gridSitesData.gridSites}
                   menuPosition={'right'}
                   hideWidget={this.toggleShowTopSites}
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index bbe32a731407..48da609860a5 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -182,6 +182,9 @@
       <message name="IDS_BRAVE_NEW_TAB_SHOW_REWARDS" desc="Text for settings show rewards option">Show Brave Rewards</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_BINANCE" desc="Text for show binance option">Show Binance</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">Show 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>
+      <message name="IDS_BRAVE_NEW_TAB_CLOCK" desc="Clock title">clock</message>
 
       <!-- WebUI private tab resources -->
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE" desc="">Learn more</message>