diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index b27584f64edb..51c027cdb61b 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -258,6 +258,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "donationTitle",  IDS_BRAVE_REWARDS_LOCAL_DONAT_TITLE },
         { "donationDesc",  IDS_BRAVE_REWARDS_LOCAL_DONAT_DESC },
         { "donationTotalDonations",  IDS_BRAVE_REWARDS_LOCAL_DONAT_TOTAL_DONATIONS },            // NOLINT
+        { "donationTotalMonthlyContribution",  IDS_BRAVE_REWARDS_LOCAL_DONAT_TOTAL_MONTHLY_CONTRIBUTION },       // NOLINT
         { "donationVisitSome",  IDS_BRAVE_REWARDS_LOCAL_DONAT_VISIT_SOME },
         { "donationAbility",  IDS_BRAVE_REWARDS_LOCAL_DONAT_ABILITY },
         { "donationAbilityYT",  IDS_BRAVE_REWARDS_LOCAL_DONAT_ABILITY_YT },
@@ -267,6 +268,10 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "donationDisabledText1",  IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT1 },              // NOLINT
         { "donationDisabledText2",  IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT2 },              // NOLINT
         { "donationNextDate",  IDS_BRAVE_REWARDS_LOCAL_DONAT_NEXT_DATE },
+        { "monthlyContributionTitle",  IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_TITLE },     // NOLINT
+        { "monthlyContributionDesc",  IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DESC },       // NOLINT
+        { "monthlyContributionEmpty", IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_EMPTY },      // NOLINT
+        { "monthlyContributionDisabledText", IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DISABLED_TEXT },      // NOLINT
 
         { "panelAddFunds",  IDS_BRAVE_REWARDS_LOCAL_PANEL_ADD_FUNDS },
         { "panelWithdrawFunds",  IDS_BRAVE_REWARDS_LOCAL_PANEL_WITHDRAW_FUNDS },
diff --git a/components/brave_rewards/browser/rewards_service_browsertest.cc b/components/brave_rewards/browser/rewards_service_browsertest.cc
index 70cb0fb691e2..948a657c1761 100644
--- a/components/brave_rewards/browser/rewards_service_browsertest.cc
+++ b/components/brave_rewards/browser/rewards_service_browsertest.cc
@@ -999,7 +999,7 @@ class BraveRewardsBrowserTest :
             contents(),
             "const delay = t => new Promise(resolve => setTimeout(resolve, t));"
             "delay(0).then(() => "
-            "  document.querySelector(\"[type='donation']\")"
+            "  document.querySelectorAll(\"[type='donation']\")[1]"
             "    .parentElement.parentElement.innerText);",
             content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
             content::ISOLATED_WORLD_ID_CONTENT_END);
diff --git a/components/brave_rewards/resources/page/components/monthlyContributionBox.tsx b/components/brave_rewards/resources/page/components/monthlyContributionBox.tsx
new file mode 100644
index 000000000000..d1e0f9786f0e
--- /dev/null
+++ b/components/brave_rewards/resources/page/components/monthlyContributionBox.tsx
@@ -0,0 +1,160 @@
+/* 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 { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+
+import {
+  DisabledContent,
+  Box,
+  TableDonation,
+  List,
+  Tokens,
+  ModalDonation,
+  NextContribution
+} from '../../ui/components'
+import { Provider } from '../../ui/components/profile'
+
+import { getLocale } from '../../../../common/locale'
+import * as rewardsActions from '../actions/rewards_actions'
+import * as utils from '../utils'
+import { DetailRow } from '../../ui/components/tableDonation'
+
+interface Props extends Rewards.ComponentProps {
+}
+
+interface State {
+  modalShowAll: boolean
+}
+
+class MonthlyContributionBox extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      modalShowAll: false
+    }
+  }
+
+  get actions () {
+    return this.props.actions
+  }
+
+  disabledContent = () => {
+    return (
+      <DisabledContent
+        type={'donation'}
+      >
+        {getLocale('monthlyContributionDisabledText')}
+      </DisabledContent>
+    )
+  }
+
+  getRows = () => {
+    const { balance, recurringList } = this.props.rewardsData
+    let recurring: DetailRow[] = []
+
+    if (!recurringList) {
+      return recurring
+    }
+
+    return recurringList.map((item: Rewards.Publisher) => {
+      let faviconUrl = `chrome://favicon/size/48@1x/${item.url}`
+      const verified = utils.isPublisherConnectedOrVerified(item.status)
+
+      if (item.favIcon && verified) {
+        faviconUrl = `chrome://favicon/size/48@1x/${item.favIcon}`
+      }
+
+      return {
+        profile: {
+          name: item.name,
+          verified,
+          provider: (item.provider ? item.provider : undefined) as Provider,
+          src: faviconUrl
+        },
+        contribute: {
+          tokens: item.percentage.toFixed(1),
+          converted: utils.convertBalance(item.percentage.toString(), balance.rates)
+        },
+        url: item.url,
+        type: 'recurring' as any,
+        onRemove: () => { this.actions.removeRecurringTip(item.id) }
+      }
+    })
+  }
+
+  onModalToggle = () => {
+    this.setState({
+      modalShowAll: !this.state.modalShowAll
+    })
+  }
+
+  render () {
+    const {
+      balance,
+      firstLoad,
+      enabledMain,
+      recurringList,
+      reconcileStamp
+    } = this.props.rewardsData
+    const showDisabled = firstLoad !== false || !enabledMain
+    const tipRows = this.getRows()
+    const topRows = tipRows.slice(0, 5)
+    const numRows = tipRows && tipRows.length
+    const allSites = !(numRows > 5)
+    const total = utils.tipsListTotal(recurringList)
+    const converted = utils.convertBalance(total, balance.rates)
+
+    return (
+      <Box
+        type={'donation'}
+        title={getLocale('monthlyContributionTitle')}
+        description={getLocale('monthlyContributionDesc')}
+        disabledContent={showDisabled ? this.disabledContent() : null}
+      >
+        {
+          this.state.modalShowAll
+          ? <ModalDonation
+            rows={tipRows}
+            onClose={this.onModalToggle}
+            title={getLocale('monthlyContributionTitle')}
+          />
+          : null
+        }
+        <List title={getLocale('donationTotalMonthlyContribution')}>
+          <Tokens value={total} converted={converted} />
+        </List>
+        <List title={getLocale('donationNextDate')}>
+          <NextContribution>
+            {new Intl.DateTimeFormat('default', { month: 'short', day: 'numeric' }).format(reconcileStamp * 1000)}
+          </NextContribution>
+        </List>
+
+        <TableDonation
+          rows={topRows}
+          allItems={allSites}
+          numItems={numRows}
+          headerColor={true}
+          onShowAll={this.onModalToggle}
+        >
+          {getLocale('monthlyContributionEmpty')}
+        </TableDonation>
+      </Box>
+    )
+  }
+}
+
+const mapStateToProps = (state: Rewards.ApplicationState) => ({
+  rewardsData: state.rewardsData
+})
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  actions: bindActionCreators(rewardsActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MonthlyContributionBox)
diff --git a/components/brave_rewards/resources/page/components/settingsPage.tsx b/components/brave_rewards/resources/page/components/settingsPage.tsx
index e1ea8149438f..952e776b5f88 100644
--- a/components/brave_rewards/resources/page/components/settingsPage.tsx
+++ b/components/brave_rewards/resources/page/components/settingsPage.tsx
@@ -13,6 +13,7 @@ import PageWallet from './pageWallet'
 import AdsBox from './adsBox'
 import ContributeBox from './contributeBox'
 import TipBox from './tipsBox'
+import MonthlyContributionBox from './monthlyContributionBox'
 
 // Utils
 import * as rewardsActions from '../actions/rewards_actions'
@@ -244,6 +245,7 @@ class SettingsPage extends React.Component<Props, State> {
             }
             <AdsBox />
             <ContributeBox />
+            <MonthlyContributionBox />
             <TipBox />
           </Column>
           <Column size={1} customStyle={{ justifyContent: 'center', flexWrap: 'wrap' }}>
diff --git a/components/brave_rewards/resources/page/components/tipsBox.tsx b/components/brave_rewards/resources/page/components/tipsBox.tsx
index 826310c9848f..9713bc7ddd1f 100644
--- a/components/brave_rewards/resources/page/components/tipsBox.tsx
+++ b/components/brave_rewards/resources/page/components/tipsBox.tsx
@@ -15,8 +15,7 @@ import {
   TableDonation,
   List,
   Tokens,
-  ModalDonation,
-  NextContribution
+  ModalDonation
 } from '../../ui/components'
 import { Provider } from '../../ui/components/profile'
 
@@ -58,83 +57,40 @@ class TipBox extends React.Component<Props, State> {
     )
   }
 
-  getTotal = () => {
-    const { reports } = this.props.rewardsData
-
-    const currentTime = new Date()
-    const reportKey = `${currentTime.getFullYear()}_${currentTime.getMonth() + 1}`
-    const report: Rewards.Report = reports[reportKey]
-
-    if (report) {
-      return utils.tipsTotal(report)
-    }
-
-    return '0.0'
-  }
-
   getTipsRows = () => {
-    const { balance, recurringList, tipsList } = this.props.rewardsData
-
-    // Recurring
-    let recurring: DetailRow[] = []
-    if (recurringList) {
-      recurring = recurringList.map((item: Rewards.Publisher) => {
-        let faviconUrl = `chrome://favicon/size/48@1x/${item.url}`
-        const verified = utils.isPublisherConnectedOrVerified(item.status)
-        if (item.favIcon && verified) {
-          faviconUrl = `chrome://favicon/size/48@1x/${item.favIcon}`
-        }
-
-        return {
-          profile: {
-            name: item.name,
-            verified,
-            provider: (item.provider ? item.provider : undefined) as Provider,
-            src: faviconUrl
-          },
-          contribute: {
-            tokens: item.percentage.toFixed(1),
-            converted: utils.convertBalance(item.percentage.toString(), balance.rates)
-          },
-          url: item.url,
-          type: 'recurring' as any,
-          onRemove: () => { this.actions.removeRecurringTip(item.id) }
-        }
-      })
-    }
-
-    // Tips
+    const { balance, tipsList } = this.props.rewardsData
     let tips: DetailRow[] = []
-    if (tipsList) {
-      tips = tipsList.map((item: Rewards.Publisher) => {
-        let faviconUrl = `chrome://favicon/size/48@1x/${item.url}`
-        const verified = utils.isPublisherConnectedOrVerified(item.status)
-        if (item.favIcon && verified) {
-          faviconUrl = `chrome://favicon/size/48@1x/${item.favIcon}`
-        }
-
-        const token = utils.convertProbiToFixed(item.percentage.toString())
 
-        return {
-          profile: {
-            name: item.name,
-            verified,
-            provider: (item.provider ? item.provider : undefined) as Provider,
-            src: faviconUrl
-          },
-          contribute: {
-            tokens: token,
-            converted: utils.convertBalance(token, balance.rates)
-          },
-          url: item.url,
-          text: item.tipDate ? new Date(item.tipDate * 1000).toLocaleDateString() : undefined,
-          type: 'donation' as any,
-          onRemove: () => { this.actions.removeRecurringTip(item.id) }
-        }
-      })
+    if (!tipsList) {
+      return tips
     }
 
-    return recurring.concat(tips)
+    return tipsList.map((item: Rewards.Publisher) => {
+      let faviconUrl = `chrome://favicon/size/48@1x/${item.url}`
+      const verified = utils.isPublisherConnectedOrVerified(item.status)
+      if (item.favIcon && verified) {
+        faviconUrl = `chrome://favicon/size/48@1x/${item.favIcon}`
+      }
+
+      const token = utils.convertProbiToFixed(item.percentage.toString())
+
+      return {
+        profile: {
+          name: item.name,
+          verified,
+          provider: (item.provider ? item.provider : undefined) as Provider,
+          src: faviconUrl
+        },
+        contribute: {
+          tokens: token,
+          converted: utils.convertBalance(token, balance.rates)
+        },
+        url: item.url,
+        text: item.tipDate ? new Date(item.tipDate * 1000).toLocaleDateString() : undefined,
+        type: 'donation' as any,
+        onRemove: () => { this.actions.removeRecurringTip(item.id) }
+      }
+    })
   }
 
   onModalToggle = () => {
@@ -219,8 +175,7 @@ class TipBox extends React.Component<Props, State> {
       firstLoad,
       enabledMain,
       ui,
-      recurringList,
-      reconcileStamp
+      tipsList
     } = this.props.rewardsData
     const { walletImported } = ui
     const showDisabled = firstLoad !== false || !enabledMain
@@ -228,7 +183,7 @@ class TipBox extends React.Component<Props, State> {
     const topRows = tipRows.slice(0, 5)
     const numRows = tipRows && tipRows.length
     const allSites = !(numRows > 5)
-    const total = this.getTotal()
+    const total = utils.tipsListTotal(tipsList, true)
     const converted = utils.convertBalance(total, balance.rates)
 
     return (
@@ -247,22 +202,13 @@ class TipBox extends React.Component<Props, State> {
           ? <ModalDonation
             rows={tipRows}
             onClose={this.onModalToggle}
+            title={getLocale('donationTips')}
           />
           : null
         }
         <List title={getLocale('donationTotalDonations')}>
           <Tokens value={total} converted={converted} />
         </List>
-        {
-          recurringList && recurringList.length > 0
-          ? <List title={getLocale('donationNextDate')}>
-            <NextContribution>
-              {new Intl.DateTimeFormat('default', { month: 'short', day: 'numeric' }).format(reconcileStamp * 1000)}
-            </NextContribution>
-          </List>
-          : null
-        }
-
         <TableDonation
           rows={topRows}
           allItems={allSites}
diff --git a/components/brave_rewards/resources/page/utils.ts b/components/brave_rewards/resources/page/utils.ts
index d846e46bb83e..298f221652d0 100644
--- a/components/brave_rewards/resources/page/utils.ts
+++ b/components/brave_rewards/resources/page/utils.ts
@@ -60,6 +60,24 @@ export const tipsTotal = (report: Rewards.Report) => {
   return new BigNumber(report.donation).plus(tips).dividedBy('1e18').toFixed(1, BigNumber.ROUND_DOWN)
 }
 
+export const tipsListTotal = (list: Rewards.Publisher[], convertProbi = false) => {
+  if (list.length === 0) {
+    return '0.0'
+  }
+
+  let tipsTotal: number = 0
+
+  list.map((item: Rewards.Publisher) => {
+    if (convertProbi) {
+      tipsTotal += parseFloat(convertProbiToFixed(item.percentage.toString()))
+    } else {
+      tipsTotal += item.percentage
+    }
+  })
+
+  return tipsTotal.toFixed(1)
+}
+
 export const constructBackupString = (backupKey: string) => {
   return `Brave Wallet Recovery Key\nDate created: ${new Date(Date.now()).toLocaleDateString()} \n\nRecovery Key: ${backupKey}` +
     '\n\nNote: This key is not stored on Brave servers. ' +
diff --git a/components/brave_rewards/resources/ui/components/modalDonation/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/modalDonation/__snapshots__/spec.tsx.snap
index 9667f6961958..2089f1d4809e 100644
--- a/components/brave_rewards/resources/ui/components/modalDonation/__snapshots__/spec.tsx.snap
+++ b/components/brave_rewards/resources/ui/components/modalDonation/__snapshots__/spec.tsx.snap
@@ -35,9 +35,7 @@ exports[`ModalDonation tests basic tests matches the snapshot 1`] = `
       >
         <div
           className="sc-bwzfXH kNyJHx"
-        >
-          MISSING: donationTips
-        </div>
+        />
         <div>
           <div>
             <table
@@ -53,7 +51,7 @@ exports[`ModalDonation tests basic tests matches the snapshot 1`] = `
                   <th
                     className="sc-krDsej iCWhZz"
                   >
-                    MISSING: type
+                    MISSING: date
                   </th>
                   <th
                     className="sc-krDsej csFqvd"
diff --git a/components/brave_rewards/resources/ui/components/modalDonation/index.tsx b/components/brave_rewards/resources/ui/components/modalDonation/index.tsx
index 283a6b592175..fb58d7c51440 100644
--- a/components/brave_rewards/resources/ui/components/modalDonation/index.tsx
+++ b/components/brave_rewards/resources/ui/components/modalDonation/index.tsx
@@ -9,23 +9,23 @@ import {
 } from './style'
 import Modal from 'brave-ui/components/popupModals/modal/index'
 import TableDonation, { DetailRow } from '../tableDonation/index'
-import { getLocale } from 'brave-ui/helpers'
 
 export interface Props {
   rows: DetailRow[]
   onClose: () => void
   id?: string
+  title: string
 }
 
 export default class ModalDonation extends React.PureComponent<Props, {}> {
   render () {
-    const { id, onClose, rows } = this.props
+    const { id, onClose, rows, title } = this.props
     const numRows = rows && rows.length || 0
 
     return (
       <Modal id={id} onClose={onClose}>
         <StyledWrapper>
-          <StyledTitle>{getLocale('donationTips')}</StyledTitle>
+          <StyledTitle>{title}</StyledTitle>
           <TableDonation
             rows={rows}
             allItems={true}
diff --git a/components/brave_rewards/resources/ui/components/tableDonation/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/tableDonation/__snapshots__/spec.tsx.snap
index edb97552326c..50cef6290a8c 100644
--- a/components/brave_rewards/resources/ui/components/tableDonation/__snapshots__/spec.tsx.snap
+++ b/components/brave_rewards/resources/ui/components/tableDonation/__snapshots__/spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`TableDonation tests basic tests matches the snapshot 1`] = `
           <th
             className="sc-dnqmqq jygLhl"
           >
-            MISSING: type
+            MISSING: date
           </th>
           <th
             className="sc-dnqmqq iWaoIX"
diff --git a/components/brave_rewards/resources/ui/components/tableDonation/index.tsx b/components/brave_rewards/resources/ui/components/tableDonation/index.tsx
index e6938227499f..acee2077ebb1 100644
--- a/components/brave_rewards/resources/ui/components/tableDonation/index.tsx
+++ b/components/brave_rewards/resources/ui/components/tableDonation/index.tsx
@@ -142,7 +142,7 @@ export default class TableDonation extends React.PureComponent<Props, {}> {
         customStyle
       },
       {
-        content: getLocale('type'),
+        content: getLocale('date'),
         customStyle
       },
       {
diff --git a/components/brave_rewards/resources/ui/stories/modal.tsx b/components/brave_rewards/resources/ui/stories/modal.tsx
index fb60111ccb08..54a788668081 100644
--- a/components/brave_rewards/resources/ui/stories/modal.tsx
+++ b/components/brave_rewards/resources/ui/stories/modal.tsx
@@ -472,6 +472,7 @@ storiesOf('Rewards/Modal', module)
     return (
       <ModalDonation
         rows={rows}
+        title={'Tips'}
         onClose={doNothing}
       />
     )
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index cbaa84b88d63..d0b3ec7d0122 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -227,12 +227,17 @@
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_SITES" desc="">Supported sites</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_TITLE" desc="">Tips</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DESC" desc="">Tip content creators directly as you browse. You can also set up recurring monthly tips so you can support sites continuously.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_TITLE" desc="">Monthly Contributions</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DESC" desc="">Set up recurring monthly contributions so you can support sites continuously.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_EMPTY" desc="">No monthly contributions set up yet.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DISABLED_TEXT" desc="">Support your favorite sites with recurring monthly contributions. You can set this up from the tipping banner.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_DISABLED_TEXT_ONE" desc="">Earnings are paid every month.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_DISABLED_TEXT_TWO" desc="">Set your desired frequency to increase or decrease earnings.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_DISABLED_TEXT1" desc="">Reward creators for the content you love.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_DISABLED_TEXT2" desc="">Your monthly payment gets distributed across the sites you visit.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_VISIT_SOME" desc="">Sites will appear as you browse</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_TOTAL_DONATIONS" desc="">Total tips this month</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_TOTAL_MONTHLY_CONTRIBUTION" desc="">Total contributions this month</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_VISIT_SOME" desc="">Have you tipped your favorite content creator today?</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_PANEL_ADD_FUNDS" desc="">Add Funds</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_PANEL_WITHDRAW_FUNDS" desc="">Withdraw Funds</message>