diff --git a/.storybook/locale.ts b/.storybook/locale.ts
index aa264819cf0b..6931ad1a5279 100644
--- a/.storybook/locale.ts
+++ b/.storybook/locale.ts
@@ -76,13 +76,12 @@ const locale: Record<string, string> = {
   dndCaptchaText2: 'target',
   donation: 'Donation',
   donationAmount: 'Donation amount',
-  donateMonthly: 'Tip this site Monthly',
+  donateMonthly: 'Monthly Contribution',
   donateNow: 'Send a tip…',
   donationFailureMsg: 'Looks like something went wrong. Please try again later.',
   donationSent: 'Donation Sent!',
   donationTips: 'Donation & Tips',
   done: 'Done',
-  doMonthly: 'Set recurring donation',
   downloadPDF: 'Download as PDF',
   earningsAds: 'Earnings from Ads',
   earningsClaimBat: 'BAT,',
@@ -120,9 +119,11 @@ const locale: Record<string, string> = {
   monthNov: 'November',
   monthOct: 'October',
   monthSep: 'September',
+  monthlyContribution: 'Monthly Contribution',
   monthlyText: 'Monthly',
   monthlyTips: 'Monthly Tips!',
   newGrant: 'A free token grant is available.',
+  nextContribution: 'Next Contribution',
   noActivity: 'No activities yet…',
   noAdsHistory: 'There is currently no Brave Ads history',
   noGrants: 'Currently no token grant is available.',
@@ -179,6 +180,8 @@ const locale: Record<string, string> = {
   rewardsBackupText3: 'You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It\'s probably safest to write it down on a piece of paper, or wherever else you keep important info.',
   rewardsBannerText1: 'Thanks for stopping by. We joined Brave’s vision of protecting your privacy because we believe that fans like you would support us in our effort to keep the web a clean and safe place to be.',
   rewardsBannerText2: 'Your donation is much appreciated and it encourages us to continue to improve our content.',
+  rewardsBannerMonthlyText1: 'You can support this content creator by sending a tip. It\'s a way of thank them for making great content. Verified creators get paid for their tips during the first week of each calendar month.',
+  rewardsBannerMonthlyText2: 'If you like, you can schedule monthly tips to support this creator on a continuous basis.',
   rewardsContribute: 'Auto-Contribute',
   rewardsContributeAttention: 'Attention',
   rewardsContributeAttentionScore: 'Attention',
@@ -220,6 +223,8 @@ const locale: Record<string, string> = {
   serviceTextPanelWelcome: 'By clicking ‘Join Rewards’, you indicate that you have read and agree to the',
   serviceTextWelcome: 'By clicking ‘Yes, I\'m in!’, you indicate that you have read and agree to the',
   serviceTextReady: 'By clicking ‘Yes, I\'m Ready!’, you indicate that you have read and agree to the',
+  set: 'Set...',
+  setContribution: 'Set Contribution',
   settings: 'Settings',
   showAll: 'Show All',
   site: 'site',
diff --git a/browser/extensions/api/brave_rewards_api.cc b/browser/extensions/api/brave_rewards_api.cc
index d66183ef4b43..cc4e55f33a23 100644
--- a/browser/extensions/api/brave_rewards_api.cc
+++ b/browser/extensions/api/brave_rewards_api.cc
@@ -84,6 +84,7 @@ ExtensionFunction::ResponseAction BraveRewardsTipSiteFunction::Run() {
 
   auto params_dict = std::make_unique<base::DictionaryValue>();
   params_dict->SetString("publisherKey", params->publisher_key);
+  params_dict->SetBoolean("monthly", params->monthly);
   params_dict->SetString(
       "url", contents ? contents->GetLastCommittedURL().spec() : std::string());
   ::brave_rewards::OpenTipDialog(contents, std::move(params_dict));
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index b27584f64edb..ec800704d003 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -651,9 +651,14 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "redditTipTitleEmpty", IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY },
         { "githubTipTitle", IDS_BRAVE_UI_GITHUB_TIP_TITLE },
         { "githubTipTitleEmpty", IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY },
+        { "monthlyContribution", IDS_BRAVE_UI_MONTHLY_CONTRIBUTION },
+        { "nextContribution", IDS_BRAVE_UI_NEXT_CONTRIBUTION },
         { "rewardsBannerText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
         { "rewardsBannerText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 },
+        { "rewardsBannerMonthlyText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
+        { "rewardsBannerMonthlyText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 },
         { "sendDonation", IDS_BRAVE_UI_SEND_DONATION },
+        { "setContribution", IDS_BRAVE_UI_SET_CONTRIBUTION },
         { "siteBannerNoticeNote", IDS_BRAVE_UI_SITE_BANNER_NOTICE_NOTE },
         { "siteBannerNoticeText", IDS_BRAVE_UI_SITE_BANNER_NOTICE_TEXT },
         { "siteBannerConnectedText", IDS_BRAVE_UI_SITE_BANNER_CONNECTED_TEXT },
diff --git a/common/extensions/api/brave_rewards.json b/common/extensions/api/brave_rewards.json
index f52dd1a0236d..5870464bd391 100644
--- a/common/extensions/api/brave_rewards.json
+++ b/common/extensions/api/brave_rewards.json
@@ -397,6 +397,10 @@
           {
             "name": "publisherKey",
             "type": "string"
+          },
+          {
+            "name": "monthly",
+            "type": "boolean"
           }
         ]
       },
diff --git a/components/brave_rewards/browser/rewards_service_browsertest.cc b/components/brave_rewards/browser/rewards_service_browsertest.cc
index d9b839d0f4fb..17b747e01431 100644
--- a/components/brave_rewards/browser/rewards_service_browsertest.cc
+++ b/components/brave_rewards/browser/rewards_service_browsertest.cc
@@ -802,9 +802,14 @@ class BraveRewardsBrowserTest :
         content::NOTIFICATION_LOAD_COMPLETED_MAIN_FRAME,
         content::NotificationService::AllSources());
 
+    const std::string buttonSelector = monthly
+        ? "[type='tip-monthly']"
+        : "[type='tip']";
+
     // Click button to initiate sending a tip
     content::EvalJsResult js_result = EvalJs(
       popup_contents,
+      content::JsReplace(
       "new Promise((resolve) => {"
       "let count = 10;"
       "var interval = setInterval(function() {"
@@ -814,13 +819,14 @@ class BraveRewardsBrowserTest :
       "  } else {"
       "    count -= 1;"
       "  }"
-      "  const tipButton = document.querySelector(\"[type='tip']\");"
+      "  const tipButton = document.querySelector($1);"
       "  if (tipButton) {"
       "    clearInterval(interval);"
       "    tipButton.click();"
       "    resolve(true);"
       "  }"
       "}, 500);});",
+      buttonSelector),
       content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
       content::ISOLATED_WORLD_ID_CONTENT_END);
 
@@ -850,18 +856,6 @@ class BraveRewardsBrowserTest :
         content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
         content::ISOLATED_WORLD_ID_CONTENT_END));
 
-    // Make this tip monthly, if requested
-    if (monthly) {
-      ASSERT_TRUE(ExecJs(
-          site_banner_contents,
-          "const delay = t => new Promise(resolve => setTimeout(resolve, t));"
-          "delay(0).then(() => "
-          "  document.querySelector(\"[data-test-id='monthlyCheckbox']\")"
-          "    .children[0].click());",
-          content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
-          content::ISOLATED_WORLD_ID_CONTENT_END));
-    }
-
     // Send the tip
     ASSERT_TRUE(ExecJs(
         site_banner_contents,
diff --git a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
index 1920159b131a..7d312a393134 100644
--- a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
+++ b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
@@ -56,7 +56,7 @@
     "description": "Label for auto contribute table attention for the publisher"
   },
   "donateMonthly": {
-    "message": "Tip this site monthly",
+    "message": "Monthly Contribution",
     "description": "Label for drop down menu where user select amount for monthly contribution for particular publisher"
   },
   "includeInAuto": {
@@ -528,5 +528,9 @@
   "walletGoToVerifyPage":  {
     "message": "Complete wallet verification",
     "description": "CTA for completing wallet verification"
+  },
+  "set": {
+    "message": "Set...",
+    "description": "Button text for setting monthly contribution"
   }
 }
diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts
index e7e50da0ce20..15318df73282 100644
--- a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts
+++ b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts
@@ -89,6 +89,7 @@ export const getUIMessages = (): Record<string, string> => {
     'rewardsSummary',
     'serviceText',
     'serviceTextPanelWelcome',
+    'set',
     'termsOfService',
     'tipsProcessedNotification',
     'tokenGrant',
diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
index 96e4119eaf69..35262f3ce90b 100644
--- a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
+++ b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
@@ -238,7 +238,7 @@ export class Panel extends React.Component<Props, State> {
     }
   }
 
-  showTipSiteDetail = () => {
+  showTipSiteDetail = (monthly: boolean) => {
     const publisher: RewardsExtension.Publisher | undefined = this.getPublisher()
     // TODO: why do we store windowId instead of active tab id in state?
     chrome.tabs.query({
@@ -253,7 +253,7 @@ export class Panel extends React.Component<Props, State> {
         return
       }
 
-      chrome.braveRewards.tipSite(tabId, publisher.publisher_key)
+      chrome.braveRewards.tipSite(tabId, publisher.publisher_key, monthly)
       window.close()
     })
   }
@@ -691,7 +691,7 @@ export class Panel extends React.Component<Props, State> {
               includeInAuto={!publisher.excluded}
               attentionScore={(publisher.percentage || 0).toString()}
               onToggleTips={this.doNothing}
-              donationAction={this.showTipSiteDetail}
+              donationAction={this.showTipSiteDetail.bind(this, false)}
               onAmountChange={this.onContributionAmountChange}
               onIncludeInAuto={this.switchAutoContribute}
               showUnVerified={this.shouldShowConnectedMessage()}
@@ -701,6 +701,7 @@ export class Panel extends React.Component<Props, State> {
               onRefreshPublisher={this.refreshPublisher}
               refreshingPublisher={this.state.refreshingPublisher}
               publisherRefreshed={this.state.publisherRefreshed}
+              setMonthlyAction={this.showTipSiteDetail.bind(this, true)}
             />
             : null
           }
diff --git a/components/brave_rewards/resources/tip/components/app.tsx b/components/brave_rewards/resources/tip/components/app.tsx
index 16f2a9cf5048..364bacc87512 100644
--- a/components/brave_rewards/resources/tip/components/app.tsx
+++ b/components/brave_rewards/resources/tip/components/app.tsx
@@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions'
 
 interface TipDialogArgs {
   url: string
+  monthly: boolean
   publisherKey: string
   mediaMetaData?: RewardsTip.MediaMetaData
 }
@@ -29,10 +30,13 @@ export class App extends React.Component<Props, {}> {
   }
 
   getTipBanner = (url: string, publisher: RewardsTip.Publisher, mediaMetaData: RewardsTip.MediaMetaData | undefined) => {
+    const monthly = this.props.dialogArgs.monthly
+
     if (!mediaMetaData) {
       return (
         <TipSite
           url={url}
+          monthly={monthly}
           publisher={publisher}
         />
       )
@@ -40,6 +44,7 @@ export class App extends React.Component<Props, {}> {
       return (
         <TipMediaUser
           url={url}
+          monthly={monthly}
           publisher={publisher}
           mediaMetaData={mediaMetaData}
         />
diff --git a/components/brave_rewards/resources/tip/components/siteBanner.tsx b/components/brave_rewards/resources/tip/components/siteBanner.tsx
index 77ba7735896e..2409044d7926 100644
--- a/components/brave_rewards/resources/tip/components/siteBanner.tsx
+++ b/components/brave_rewards/resources/tip/components/siteBanner.tsx
@@ -15,6 +15,7 @@ import * as tipActions from '../actions/tip_actions'
 import * as utils from '../utils'
 
 interface Props extends RewardsTip.ComponentProps {
+  monthly: boolean
   publisher: RewardsTip.Publisher
   mediaMetaData?: RewardsTip.MediaMetaData
 }
@@ -106,20 +107,6 @@ class Banner extends React.Component<Props, State> {
     return result
   }
 
-  hasRecurringTip = (publisherKey?: string) => {
-    const { recurringDonations } = this.props.rewardsDonateData
-
-    if (!publisherKey || !recurringDonations) {
-      return false
-    }
-
-    const recurringDonation = recurringDonations.find((donation: RewardsTip.RecurringTips) => {
-      return donation.publisherKey === publisherKey
-    })
-
-    return !!recurringDonation
-  }
-
   getScreenName = (mediaMetaData?: RewardsTip.MediaMetaData) => {
     if (!mediaMetaData) {
       return ''
@@ -179,6 +166,22 @@ class Banner extends React.Component<Props, State> {
       />)
   }
 
+  getNextContribution = () => {
+    const { reconcileStamp } = this.props.rewardsDonateData
+
+    if (!reconcileStamp) {
+      return undefined
+    }
+
+    const fmtArgs = {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }
+
+    return new Intl.DateTimeFormat('default', fmtArgs).format(reconcileStamp * 1000)
+  }
+
   render () {
     const { balance } = this.props.rewardsDonateData
     const { total } = balance
@@ -188,6 +191,7 @@ class Banner extends React.Component<Props, State> {
     const checkmark = utils.isPublisherConnectedOrVerified(publisher.status)
     const verified = utils.isPublisherVerified(publisher.status)
     const connected = utils.isPublisherConnected(publisher.status)
+    const bannerType = this.props.monthly ? 'monthly' : 'one-time'
     let logo = publisher.logo
 
     const internalFavicon = /^https:\/\/[a-z0-9-]+\.invalid(\/)?$/
@@ -200,12 +204,12 @@ class Banner extends React.Component<Props, State> {
     }
     return (
       <SiteBanner
+        type={bannerType}
         domain={publisher.publisherKey}
         title={publisher.title}
         name={publisher.name}
         screenName={this.getScreenName(mediaMetaData)}
         provider={publisher.provider as Provider}
-        recurringDonation={this.hasRecurringTip(publisher.publisherKey)}
         balance={total.toString() || '0'}
         bgImage={publisher.background}
         logo={logo}
@@ -220,6 +224,7 @@ class Banner extends React.Component<Props, State> {
         isVerified={checkmark}
         learnMoreNotice={'https://brave.com/faq/#unclaimed-funds'}
         addFundsLink={this.addFundsLink}
+        nextContribution={this.getNextContribution()}
       >
       {
         mediaMetaData
diff --git a/components/brave_rewards/resources/tip/components/tipMediaUser.tsx b/components/brave_rewards/resources/tip/components/tipMediaUser.tsx
index 8bba632b43ab..b6f70194e525 100644
--- a/components/brave_rewards/resources/tip/components/tipMediaUser.tsx
+++ b/components/brave_rewards/resources/tip/components/tipMediaUser.tsx
@@ -16,6 +16,7 @@ import { getLocale } from '../../../../common/locale'
 
 interface Props extends RewardsTip.ComponentProps {
   url: string
+  monthly: boolean
   publisher: RewardsTip.Publisher
   mediaMetaData: RewardsTip.MediaMetaData
 }
@@ -50,6 +51,7 @@ class TipMediaUser extends React.Component<Props, {}> {
     const { finished, error } = this.props.rewardsDonateData
 
     const publisher = this.props.publisher
+    const monthly = this.props.monthly
     const mediaMetaData = this.props.mediaMetaData
     if (!mediaMetaData) {
       return
@@ -78,7 +80,11 @@ class TipMediaUser extends React.Component<Props, {}> {
       <>
         {
           !finished && !error
-          ? <Banner publisher={publisher} mediaMetaData={mediaMetaData} />
+          ? <Banner
+              monthly={monthly}
+              publisher={publisher}
+              mediaMetaData={mediaMetaData}
+          />
           : null
         }
         {
diff --git a/components/brave_rewards/resources/tip/components/tipSite.tsx b/components/brave_rewards/resources/tip/components/tipSite.tsx
index 8dd1d35253a3..7e3aa1ac692d 100644
--- a/components/brave_rewards/resources/tip/components/tipSite.tsx
+++ b/components/brave_rewards/resources/tip/components/tipSite.tsx
@@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions'
 
 interface Props extends RewardsTip.ComponentProps {
   url: string
+  monthly: boolean
   publisher: RewardsTip.Publisher
 }
 
@@ -43,7 +44,10 @@ class TipSite extends React.Component<Props, {}> {
       <>
         {
           !finished && !error
-          ? <Banner publisher={this.props.publisher} />
+          ? <Banner
+              monthly={this.props.monthly}
+              publisher={this.props.publisher}
+          />
           : null
         }
         {
diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx
index c0e556102efb..f3fe0ddae80c 100644
--- a/components/brave_rewards/resources/ui/components/donate/index.tsx
+++ b/components/brave_rewards/resources/ui/components/donate/index.tsx
@@ -14,12 +14,16 @@ import {
   StyledFundsText,
   StyledAmountsWrapper,
   StyledSendButton,
-  StyledButtonWrapper
+  StyledButtonWrapper,
+  StyledContributionWrapper,
+  StyledContributionText,
+  StyledMonthlySendButton
 } from './style'
 
 import Amount from '../amount/index'
 import { getLocale } from 'brave-ui/helpers'
 import { EmoteSadIcon, SendIcon } from 'brave-ui/components/icons'
+import { BannerType } from '../siteBanner'
 
 export type DonateType = 'big' | 'small'
 
@@ -41,6 +45,8 @@ export interface Props {
   children?: React.ReactNode
   isMobile?: boolean
   addFundsLink?: string
+  type: BannerType
+  nextContribution?: string
 }
 
 interface State {
@@ -103,9 +109,14 @@ export default class Donate extends React.PureComponent<Props, State> {
       currentAmount,
       donateType,
       isMobile,
-      addFundsLink
+      addFundsLink,
+      type,
+      nextContribution
     } = this.props
+
+    const isMonthly = type === 'monthly'
     const disabled = parseInt(currentAmount, 10) === 0
+    const SendButton = isMonthly ? StyledMonthlySendButton : StyledSendButton
 
     return (
       <StyledWrapper donateType={donateType} disabled={disabled} isMobile={isMobile}>
@@ -130,13 +141,25 @@ export default class Donate extends React.PureComponent<Props, State> {
           {children}
         </StyledContent>
 
-        <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'}>
+        <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'} monthly={isMonthly}>
           <StyledButtonWrapper isMobile={isMobile}>
-            <StyledSendButton>
-              <StyledIconSend disabled={disabled} donateType={donateType}>
+            <SendButton>
+              <StyledIconSend disabled={disabled} donateType={donateType} monthly={isMonthly}>
                 <SendIcon />
               </StyledIconSend>{actionText}
-            </StyledSendButton>
+            </SendButton>
+            {
+              nextContribution && isMonthly
+              ? <StyledContributionWrapper>
+                  <StyledContributionText>
+                    {getLocale('nextContribution')}
+                  </StyledContributionText>
+                  <StyledContributionText>
+                    {nextContribution}
+                  </StyledContributionText>
+                </StyledContributionWrapper>
+              : null
+            }
           </StyledButtonWrapper>
         </StyledSend>
         {
diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts
index de8d3dea307f..05307fb68cbc 100644
--- a/components/brave_rewards/resources/ui/components/donate/style.ts
+++ b/components/brave_rewards/resources/ui/components/donate/style.ts
@@ -5,6 +5,7 @@
 import styled, { css } from 'brave-ui/theme'
 import * as CSS from 'csstype'
 import { DonateType } from './index'
+import palette from 'brave-ui/theme/colors'
 
 interface Theme {
   paddingBox: CSS.PaddingProperty<1>
@@ -18,6 +19,7 @@ interface StyleProps {
   disabled?: boolean
   donateType?: DonateType
   isMobile?: boolean
+  monthly?: boolean
 }
 
 const customStyle: Record<DonateType, Theme> = {
@@ -64,6 +66,18 @@ const getAmountStyle = (isMobile?: boolean) => {
   `
 }
 
+const getIconColor = (p: StyleProps) => {
+  if (p.monthly) {
+    return palette.orange500
+  }
+
+  if (p.disabled) {
+    return palette.purple300
+  }
+
+  return palette.blurple600
+}
+
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
   position: relative;
   font-family: ${p => p.theme.fontFamily.body};
@@ -89,9 +103,12 @@ export const StyledDonationTitle = styled<StyleProps, 'div'>('div')`
   padding-left: ${p => p.isMobile ? 20 : 0}px;
 `
 
-export const StyledSend = styled<{}, 'div'>('div')`
-  background: var(--donate-send-bg);
-  font-size: 13px;
+export const StyledSend = styled<StyleProps, 'div'>('div')`
+  background: ${p => p.monthly
+    ? `inherit`
+    : `var(--donate-send-bg)`
+  };
+  font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.2px;
   color: var(--donate-send-color);
@@ -100,19 +117,30 @@ export const StyledSend = styled<{}, 'div'>('div')`
   border: none;
   width: 100%;
   text-align: left;
-  cursor: pointer;
+  padding-bottom: ${p => p.monthly ? 20 : 13}px;
 `
 
 export const StyledSendButton = styled<{}, 'button'>('button')`
   display: block;
   border: none;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   background: var(--donate-send-bg);
   cursor: pointer;
 `
 
+export const StyledMonthlySendButton = styled(StyledSendButton)`
+  color: ${palette.orange500};
+  background: ${palette.white};
+  border-radius: 20px;
+  font-size: 12px;
+  padding: 6px 15px;
+  text-transform: none;
+  width: 180px;
+  font-weight: bold;
+`
+
 export const StyledButtonWrapper = styled<StyleProps, 'div'>('div')`
   display: block;
   width: ${p => p.isMobile ? 190 : 245}px;
@@ -123,14 +151,14 @@ export const StyledIconSend = styled<StyleProps, 'span'>('span')`
   vertical-align: middle;
   display: inline-block;
   margin-right: 15px;
-  color: ${p => p.disabled ? p.donateType === 'small' ? '#1A22A8' : '#3e45b2' : '#a1a8f2'};
+  color: ${p => getIconColor(p)};
   width: 27px;
   height: 27px;
 `
 
 export const StyledFunds = styled<{}, 'div'>('div')`
   font-family: Muli, sans-serif;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 300;
   line-height: 1.69;
   color: #fff;
@@ -142,7 +170,6 @@ export const StyledFunds = styled<{}, 'div'>('div')`
   left: 0;
   z-index: 10;
   width: 100%;
-
   a {
     color: #6cc7fd;
     text-decoration: none;
@@ -164,3 +191,18 @@ export const StyledAmountsWrapper = styled<StyleProps, 'div'>('div')`
   display: block;
   ${p => getAmountStyle(p.isMobile)}
 `
+
+export const StyledContributionWrapper = styled<{}, 'div'>('div')`
+  float: right;
+  color: ${palette.white};
+  margin: -33px -35px 0px;
+`
+
+export const StyledContributionText = styled<{}, 'span'>('span')`
+  font-size: 10px;
+  font-weight: 300;
+  text-align: right;
+  display: block;
+  line-height: 12px;
+  text-transform: none;
+`
diff --git a/components/brave_rewards/resources/ui/components/siteBanner/index.tsx b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx
index 855e8ad1676b..c3ae739dbdf8 100644
--- a/components/brave_rewards/resources/ui/components/siteBanner/index.tsx
+++ b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx
@@ -25,12 +25,9 @@ import {
   StyledScreenName,
   StyledSocialItem,
   StyledSocialIcon,
-  StyledOption,
   StyledLogoText,
   StyledSocialWrapper,
-  StyledEmptyBox,
   StyledLogoImage,
-  StyledCheckbox,
   StyledNoticeWrapper,
   StyledNoticeIcon,
   StyledNoticeText,
@@ -39,7 +36,6 @@ import {
 } from './style'
 
 import Donate from '../donate/index'
-import Checkbox from 'brave-ui/components/formControls/checkbox/index'
 import { getLocale } from 'brave-ui/helpers'
 import {
   CloseCircleOIcon,
@@ -52,6 +48,7 @@ import {
   VerifiedSIcon
 } from 'brave-ui/components/icons'
 
+export type BannerType = 'one-time' | 'monthly'
 export type Social = { type: SocialType, url: string }
 export type SocialType = 'twitter' | 'youtube' | 'twitch' | 'reddit' | 'vimeo' | 'github'
 export type Donation = { tokens: string, converted: string, selected?: boolean }
@@ -70,7 +67,6 @@ export interface Props {
   logo?: string
   social?: Social[]
   provider?: SocialType
-  recurringDonation?: boolean
   children?: React.ReactNode
   onDonate: (amount: string, monthly: boolean) => void
   onClose?: () => void
@@ -79,19 +75,11 @@ export interface Props {
   learnMoreNotice?: string
   addFundsLink?: string
   isVerified?: boolean
+  type: BannerType
+  nextContribution?: string
 }
 
-interface State {
-  monthly: boolean
-}
-
-export default class SiteBanner extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      monthly: false
-    }
-  }
+export default class SiteBanner extends React.PureComponent<Props, {}> {
 
   getLogo (logo: string | undefined, domain: string, name: string | undefined) {
     let letter = domain && domain.substring(0, 1) || ''
@@ -202,13 +190,17 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
 
   getText (children?: React.ReactNode) {
     if (!children) {
+      const bannerText = this.props.type === 'one-time'
+        ? 'rewardsBanner'
+        : 'rewardsBannerMonthly'
+
       return (
         <>
           <p>
-            {getLocale('rewardsBannerText1')}
+            {getLocale(`${bannerText}Text1`)}
           </p>
           <p>
-            {getLocale('rewardsBannerText2')}
+            {getLocale(`${bannerText}Text2`)}
           </p>
         </>
       )
@@ -217,13 +209,11 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
     return children
   }
 
-  onMonthlyChange = (key: string, selected: boolean) => {
-    this.setState({ monthly: selected })
-  }
-
   onDonate = (amount: string) => {
+    const isMonthly = this.props.type === 'monthly'
+
     if (this.props.onDonate) {
-      this.props.onDonate(amount, this.state.monthly)
+      this.props.onDonate(amount, isMonthly)
     }
   }
 
@@ -243,7 +233,6 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
       provider,
       children,
       title,
-      recurringDonation,
       balance,
       donationAmounts,
       domain,
@@ -255,9 +244,12 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
       showUnVerifiedNotice,
       learnMoreNotice,
       addFundsLink,
-      isVerified
+      isVerified,
+      type,
+      nextContribution
     } = this.props
 
+    const isMonthly = type === 'monthly'
     const isTwitterTip: boolean = !!(screenName && screenName !== '')
 
     return (
@@ -321,38 +313,23 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
                 </StyledText>
               </StyledTextWrapper>
             </StyledContent>
-            <StyledDonation>
-              <StyledWallet>
+            <StyledDonation monthly={isMonthly}>
+              <StyledWallet monthly={isMonthly}>
                 {getLocale('walletBalance')} <StyledTokens>{balance} BAT</StyledTokens>
               </StyledWallet>
               <Donate
+                type={type}
+                nextContribution={nextContribution}
                 balance={parseFloat(balance)}
                 donationAmounts={donationAmounts}
-                title={getLocale('donationAmount')}
+                title={!isMonthly ? getLocale('donationAmount') : getLocale('monthlyContribution')}
                 onDonate={this.onDonate}
-                actionText={this.state.monthly ? getLocale('doMonthly') : getLocale('sendDonation')}
+                actionText={!isMonthly ? getLocale('sendDonation') : getLocale('setContribution')}
                 onAmountSelection={onAmountSelection}
                 donateType={'big'}
                 currentAmount={currentAmount}
                 addFundsLink={addFundsLink}
-              >
-                {
-                  !recurringDonation
-                    ? <StyledCheckbox>
-                      <Checkbox
-                        testId={'monthlyCheckbox'}
-                        value={{ make: this.state.monthly }}
-                        onChange={this.onMonthlyChange}
-                        type={'dark'}
-                      >
-                        <div data-key='make'>
-                          <StyledOption>{getLocale('makeMonthly')}</StyledOption>
-                        </div>
-                      </Checkbox>
-                    </StyledCheckbox>
-                    : <StyledEmptyBox />
-                }
-              </Donate>
+              />
             </StyledDonation>
           </StyledContentWrapper>
         </StyledBanner>
diff --git a/components/brave_rewards/resources/ui/components/siteBanner/style.ts b/components/brave_rewards/resources/ui/components/siteBanner/style.ts
index adc72892bb9c..b9301f772297 100644
--- a/components/brave_rewards/resources/ui/components/siteBanner/style.ts
+++ b/components/brave_rewards/resources/ui/components/siteBanner/style.ts
@@ -6,11 +6,21 @@ import styled from 'styled-components'
 import { Props } from './index'
 import bg1Url from './assets/bg_bats.svg'
 import bg2Url from './assets/bg_hearts.svg'
+import palette from 'brave-ui/theme/colors'
 
 interface StyleProps {
   padding?: boolean
   bg?: string
   isTwitterTip?: boolean
+  monthly?: boolean | undefined
+}
+
+const getBgStyle = (monthly?: boolean) => {
+  if (!monthly) {
+    return `background: ${palette.blurple400}`
+  }
+
+  return `background-image: linear-gradient(180deg, #FF8907 0%, ${palette.orange500} 100%)`
 }
 
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
@@ -43,7 +53,7 @@ export const StyledContent = styled<{}, 'div'>('div')`
 
 export const StyledDonation = styled<StyleProps, 'div'>('div')`
   flex-basis: 336px;
-  background: #696fdc;
+  ${p => getBgStyle(p.monthly)};
   justify-content: space-between;
   display: flex;
   flex-direction: column;
@@ -145,7 +155,7 @@ export const StyledText = styled<StyleProps, 'div'>('div')`
 
 export const StyledWallet = styled<StyleProps, 'div'>('div')`
   font-size: 12px;
-  color: #afb2f1;
+  color: ${p => p.monthly ? '#fff' : '#afb2f1'};
   text-align: right;
   margin: 8px 0 10px;
   padding: 0 19px 0 55px;
diff --git a/components/brave_rewards/resources/ui/components/tip/index.tsx b/components/brave_rewards/resources/ui/components/tip/index.tsx
index 09f097c230ba..cc67be9aff56 100644
--- a/components/brave_rewards/resources/ui/components/tip/index.tsx
+++ b/components/brave_rewards/resources/ui/components/tip/index.tsx
@@ -66,6 +66,7 @@ export default class Tip extends React.PureComponent<Props, {}> {
         </StyledClose>
         <StyledTitle>Send my tip to</StyledTitle>
         <Donate
+          type={'one-time'}
           title={title || ''}
           actionText={getLocale('sendTip')}
           balance={parseFloat(balance)}
diff --git a/components/brave_rewards/resources/ui/components/walletPanel/index.tsx b/components/brave_rewards/resources/ui/components/walletPanel/index.tsx
index b9f08f0bfd49..c4f510b12d63 100644
--- a/components/brave_rewards/resources/ui/components/walletPanel/index.tsx
+++ b/components/brave_rewards/resources/ui/components/walletPanel/index.tsx
@@ -26,7 +26,9 @@ import {
   StyledNoticeLink,
   StyledOptionShown,
   StyledProfileWrapper,
-  StyledSelect
+  StyledSelect,
+  StyledSetButtonContainer,
+  StyledSetButton
 } from './style'
 
 // Components
@@ -63,6 +65,7 @@ export interface Props {
   showUnVerified?: boolean
   moreLink?: string
   acEnabled?: boolean
+  setMonthlyAction: () => void
 }
 
 export default class WalletPanel extends React.PureComponent<Props, {}> {
@@ -126,12 +129,15 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
   }
 
   donationControls () {
-    const { donationAmounts, acEnabled } = this.props
+    const { donationAmounts, acEnabled, setMonthlyAction } = this.props
 
     if (!donationAmounts && !acEnabled) {
       return null
     }
 
+    const firstColSpan = donationAmounts ? '5' : '4'
+    const secColSpan = donationAmounts ? '1' : '2'
+
     return (
       <StyledWrapper>
         {
@@ -152,16 +158,24 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
           </StyledGrid>
           : null
         }
-        {
-          donationAmounts
-          ? <StyledGrid>
-            <StyledColumn size={'5'}>
-              <StyledDonateText>{getLocale('donateMonthly')}</StyledDonateText>
-            </StyledColumn>
-            <StyledColumn size={'1'}>{this.donationDropDown()}</StyledColumn>
-          </StyledGrid>
-          : null
-        }
+        <StyledGrid>
+          <StyledColumn size={firstColSpan}>
+            <StyledDonateText>
+              {getLocale('donateMonthly')}
+            </StyledDonateText>
+          </StyledColumn>
+          <StyledColumn size={secColSpan}>
+            {
+              donationAmounts
+              ? this.donationDropDown()
+              : <StyledSetButtonContainer>
+                  <StyledSetButton type={'tip-monthly'} onClick={setMonthlyAction}>
+                    {getLocale('set')}
+                  </StyledSetButton>
+                </StyledSetButtonContainer>
+            }
+          </StyledColumn>
+        </StyledGrid>
       </StyledWrapper>
     )
   }
diff --git a/components/brave_rewards/resources/ui/components/walletPanel/style.ts b/components/brave_rewards/resources/ui/components/walletPanel/style.ts
index 868e97d2c103..9d8136f4bfaf 100644
--- a/components/brave_rewards/resources/ui/components/walletPanel/style.ts
+++ b/components/brave_rewards/resources/ui/components/walletPanel/style.ts
@@ -127,3 +127,18 @@ export const StyledSelect = styled<StyleProps, 'select'>('select')`
 export const StyledOptionShown = styled<{}, 'option'>('option')`
   display: none;
 `
+
+export const StyledSetButtonContainer = styled<{}, 'div'>('div')`
+  text-align: center;
+`
+
+export const StyledSetButton = styled<{}, 'button'>('button')`
+  color: ${palette.blurple500};
+  font-size: 13px;
+  border: 1px solid ${palette.blurple500};
+  width: 85%;
+  border-radius: 20px;
+  padding: 4px 5px;
+  margin-right: -16px;
+  cursor: pointer;
+`
diff --git a/components/brave_rewards/resources/ui/stories/concepts.tsx b/components/brave_rewards/resources/ui/stories/concepts.tsx
index 0bd45d11e2ae..ad30f9c30acf 100644
--- a/components/brave_rewards/resources/ui/stories/concepts.tsx
+++ b/components/brave_rewards/resources/ui/stories/concepts.tsx
@@ -40,9 +40,7 @@ const doNothing = (id: string) => {
 const donationAmounts = [
   { tokens: '1.0', converted: '0.30', selected: false },
   { tokens: '5.0', converted: '1.50', selected: false },
-  { tokens: '10.0', converted: '3.00', selected: false },
-  { tokens: '50.0', converted: '15.00', selected: false },
-  { tokens: '100.0', converted: '30.00', selected: false }
+  { tokens: '10.0', converted: '3.00', selected: false }
 ]
 
 const defaultGrant = {
@@ -153,11 +151,14 @@ storiesOf('Rewards/Concepts/Desktop', module)
           store.state.showBanner
             ? <div style={{ position: 'fixed', top: 0, left: 0, height: '100vh', width: '100%', backgroundColor: 'rgba(12,13,33,0.85)' }}>
               <SiteBanner
+                type={select('Banner Type', {
+                  'one-time': 'one-time',
+                  monthly: 'monthly'
+                }, 'one-time')}
                 domain={text('Domain', 'duckduckgo.com')}
                 name={text('Name', 'duckduckgo.com')}
                 screenName={screenName}
                 title={text('Title', '')}
-                recurringDonation={boolean('Current recurring donation', true)}
                 balance={text('Balance ', '5.0')}
                 bgImage={boolean('Show bg image', false) ? siteBgImage : null}
                 logo={boolean('Show logo', false) ? siteBgLogo : null}
@@ -168,6 +169,7 @@ storiesOf('Rewards/Concepts/Desktop', module)
                 currentAmount={store.state.currentAmount}
                 onClose={onClose}
                 provider={mediaProvider}
+                nextContribution={'07/08/2019'}
                 social={[
                   {
                     type: 'twitter',
@@ -518,6 +520,7 @@ storiesOf('Rewards/Concepts/Desktop', module)
               refreshingPublisher={store.state.refreshingPublisher}
               publisherRefreshed={store.state.publisherRefreshed}
               onRefreshPublisher={onRefreshPublisher}
+              setMonthlyAction={doNothing}
             />
             <WalletSummary
               compact={true}
diff --git a/components/brave_rewards/resources/ui/stories/other.tsx b/components/brave_rewards/resources/ui/stories/other.tsx
index ced5ed5b45e9..b6efa8fc61de 100644
--- a/components/brave_rewards/resources/ui/stories/other.tsx
+++ b/components/brave_rewards/resources/ui/stories/other.tsx
@@ -125,6 +125,7 @@ storiesOf('Rewards/Other/Desktop', module)
     return (
       <div style={{ background: '#696fdc' }}>
         <Donate
+          type={'one-time'}
           donateType={select<any>('Type', { big: 'big', small: 'small' }, 'small')}
           balance={number('Balance ', 5)}
           donationAmounts={object('Donations', store.state.donationAmounts)}
diff --git a/components/brave_rewards/resources/ui/stories/wallet.tsx b/components/brave_rewards/resources/ui/stories/wallet.tsx
index d4efa51800de..2510e5b8cbf2 100644
--- a/components/brave_rewards/resources/ui/stories/wallet.tsx
+++ b/components/brave_rewards/resources/ui/stories/wallet.tsx
@@ -157,6 +157,7 @@ storiesOf('Rewards/Wallet/Desktop', module)
             ]
           }
           onToggleTips={doNothing}
+          setMonthlyAction={doNothing}
           donationAction={doNothing}
           onAmountChange={doNothing}
           onIncludeInAuto={doNothing}
diff --git a/components/definitions/chromel.d.ts b/components/definitions/chromel.d.ts
index cf11175cd00f..47116f4eafa6 100644
--- a/components/definitions/chromel.d.ts
+++ b/components/definitions/chromel.d.ts
@@ -60,7 +60,7 @@ declare namespace chrome.settingsPrivate {
 
 declare namespace chrome.braveRewards {
   const createWallet: () => {}
-  const tipSite: (tabId: number, publisherKey: string) => {}
+  const tipSite: (tabId: number, publisherKey: string, monthly: boolean) => {}
   const tipTwitterUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {}
   const tipRedditUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {}
   const tipGitHubUser: (tabId: number, githubMetaData: RewardsTip.MediaMetaData) => {}
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index cbaa84b88d63..1c48fca030fd 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -351,6 +351,7 @@
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_TOGGLE" desc="">By turning on Brave Rewards, you indicate that you have read and agree to the</message>
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_WELCOME" desc="">By clicking ‘Yes, I'm in!’, you indicate that you have read and agree to the</message>
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_READY" desc="">By clicking ‘Yes, I'm Ready!’, you indicate that you have read and agree to the</message>
+      <message name="IDS_BRAVE_UI_SET_CONTRIBUTION" desc="">Set Contribution</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_CREATING_TEXT" desc="">Creating wallet</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_DESC" desc="">Your attention is valuable. Earn by viewing privacy-respecting ads, and pay it forward to support content creators you love.</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_OPT_IN_TEXT" desc="">Yes, I'm In!</message>
@@ -417,6 +418,8 @@
       <message name="IDS_BRAVE_UI_MONTHLY_TIPS" desc="">Monthly Tips!</message>
       <message name="IDS_BRAVE_UI_NEW_GRANT" desc="">A free token grant is available.</message>
       <message name="IDS_BRAVE_UI_NEW_TOKEN_GRANT" desc="">Free Token Grant</message>
+      <message name="IDS_BRAVE_UI_MONTHLY_CONTRIBUTION" desc="">Monthly Contribution</message>
+      <message name="IDS_BRAVE_UI_NEXT_CONTRIBUTION" desc="">Next Contribution</message>
       <message name="IDS_BRAVE_UI_NO_GRANTS" desc="">Currently no token grant is available.</message>
       <message name="IDS_BRAVE_UI_NO_ACTIVITY" desc="">No activities yet…</message>
       <message name="IDS_BRAVE_UI_NO_THANK_YOU" desc="">No, thank you</message>