diff --git a/browser/ui/webui/brave_tip_ui.cc b/browser/ui/webui/brave_tip_ui.cc
index 946afa5c2260..42c18d68fc02 100644
--- a/browser/ui/webui/brave_tip_ui.cc
+++ b/browser/ui/webui/brave_tip_ui.cc
@@ -71,9 +71,9 @@ class TipMessageHandler : public WebUIMessageHandler,
       const ledger::type::RewardsType type,
       const ledger::type::ContributionProcessor processor) override;
 
- private:
-  RewardsService* GetRewardsService();
+  void OnUnblindedTokensReady(RewardsService* rewards_service) override;
 
+ private:
   // Message handlers
   void DialogReady(const base::ListValue* args);
   void GetPublisherBanner(const base::ListValue* args);
@@ -81,7 +81,7 @@ class TipMessageHandler : public WebUIMessageHandler,
   void OnTip(const base::ListValue* args);
   void GetRecurringTips(const base::ListValue* args);
   void GetReconcileStamp(const base::ListValue* args);
-  void TweetTip(const base::ListValue *args);
+  void TweetTip(const base::ListValue* args);
   void GetOnlyAnonWallet(const base::ListValue* args);
   void GetExternalWallet(const base::ListValue* args);
   void FetchBalance(const base::ListValue* args);
@@ -118,17 +118,6 @@ TipMessageHandler::~TipMessageHandler() {
   }
 }
 
-RewardsService* TipMessageHandler::GetRewardsService() {
-  if (!rewards_service_) {
-    Profile* profile = Profile::FromWebUI(web_ui());
-    rewards_service_ = RewardsServiceFactory::GetForProfile(profile);
-    if (rewards_service_) {
-      rewards_service_->AddObserver(this);
-    }
-  }
-  return rewards_service_;
-}
-
 void TipMessageHandler::RegisterMessages() {
   web_ui()->RegisterMessageCallback(
       "dialogReady",
@@ -205,7 +194,7 @@ void TipMessageHandler::OnRecurringTipRemoved(
     RewardsService* rewards_service,
     bool success) {
   if (!IsJavascriptAllowed()) {
-     return;
+    return;
   }
 
   FireWebUIListener("recurringTipRemoved", base::Value(success));
@@ -215,7 +204,7 @@ void TipMessageHandler::OnRecurringTipSaved(
     RewardsService* rewards_service,
     bool success) {
   if (!IsJavascriptAllowed()) {
-     return;
+    return;
   }
 
   FireWebUIListener("recurringTipSaved", base::Value(success));
@@ -229,7 +218,7 @@ void TipMessageHandler::OnReconcileComplete(
     const ledger::type::RewardsType type,
     const ledger::type::ContributionProcessor processor) {
   if (!IsJavascriptAllowed()) {
-     return;
+    return;
   }
 
   base::Value data(base::Value::Type::DICTIONARY);
@@ -239,39 +228,59 @@ void TipMessageHandler::OnReconcileComplete(
   FireWebUIListener("reconcileCompleted", data);
 }
 
+void TipMessageHandler::OnUnblindedTokensReady(
+    RewardsService* rewards_service) {
+  if (!IsJavascriptAllowed()) {
+    return;
+  }
+
+  FireWebUIListener("unblindedTokensReady");
+}
+
 void TipMessageHandler::DialogReady(const base::ListValue* args) {
-  AllowJavascript();
-  if (auto* service = GetRewardsService()) {
-    if (service->IsInitialized()) {
-      FireWebUIListener("rewardsInitialized");
+  // Initialize rewards service pointer on first "dialogReady" message
+  if (!rewards_service_) {
+    Profile* profile = Profile::FromWebUI(web_ui());
+    rewards_service_ = RewardsServiceFactory::GetForProfile(profile);
+    if (rewards_service_) {
+      rewards_service_->AddObserver(this);
     }
   }
+  AllowJavascript();
+  if (rewards_service_ && rewards_service_->IsInitialized()) {
+    FireWebUIListener("rewardsInitialized");
+  }
 }
 
 void TipMessageHandler::GetOnlyAnonWallet(const base::ListValue* args) {
-  if (auto* service = GetRewardsService()) {
-    const bool only_anon = service->OnlyAnonWallet();
-    FireWebUIListener("onlyAnonWalletUpdated", base::Value(only_anon));
+  if (!rewards_service_) {
+    return;
   }
+  const bool only_anon = rewards_service_->OnlyAnonWallet();
+  FireWebUIListener("onlyAnonWalletUpdated", base::Value(only_anon));
 }
 
 void TipMessageHandler::GetPublisherBanner(const base::ListValue* args) {
   CHECK_EQ(1U, args->GetSize());
   const std::string publisher_key = args->GetList()[0].GetString();
 
-  if (auto* service = GetRewardsService()) {
-    service->GetPublisherBanner(publisher_key, base::Bind(
-        &TipMessageHandler::GetPublisherBannerCallback,
-        weak_factory_.GetWeakPtr()));
+  if (publisher_key.empty() || !rewards_service_) {
+    return;
   }
+
+  rewards_service_->GetPublisherBanner(publisher_key, base::Bind(
+      &TipMessageHandler::GetPublisherBannerCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
 void TipMessageHandler::GetRewardsParameters(const base::ListValue* args) {
-  if (auto* service = GetRewardsService()) {
-    service->GetRewardsParameters(base::Bind(
-        &TipMessageHandler::GetRewardsParametersCallback,
-        weak_factory_.GetWeakPtr()));
+  if (!rewards_service_) {
+    return;
   }
+
+  rewards_service_->GetRewardsParameters(base::Bind(
+      &TipMessageHandler::GetRewardsParametersCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
 void TipMessageHandler::OnTip(const base::ListValue* args) {
@@ -280,32 +289,36 @@ void TipMessageHandler::OnTip(const base::ListValue* args) {
   const double amount = args->GetList()[1].GetDouble();
   const bool recurring = args->GetList()[2].GetBool();
 
-  if (publisher_key.empty()) {
+  if (publisher_key.empty() || !rewards_service_) {
     return;
   }
 
-  if (auto* service = GetRewardsService()) {
-    if (recurring && amount <= 0) {
-      service->RemoveRecurringTip(publisher_key);
-    } else if (amount >= 1) {
-      service->OnTip(publisher_key, amount, recurring);
-    }
+  if (recurring && amount <= 0) {
+    rewards_service_->RemoveRecurringTip(publisher_key);
+  } else if (amount >= 1) {
+    rewards_service_->OnTip(publisher_key, amount, recurring);
   }
 }
 
-void TipMessageHandler::GetReconcileStamp(const base::ListValue *args) {
-  if (auto* service = GetRewardsService()) {
-    service->GetReconcileStamp(base::Bind(
-        &TipMessageHandler::GetReconcileStampCallback,
-        weak_factory_.GetWeakPtr()));
+void TipMessageHandler::GetReconcileStamp(const base::ListValue* args) {
+  if (!rewards_service_) {
+    return;
   }
+
+  rewards_service_->GetReconcileStamp(base::Bind(
+      &TipMessageHandler::GetReconcileStampCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
-void TipMessageHandler::TweetTip(const base::ListValue *args) {
+void TipMessageHandler::TweetTip(const base::ListValue* args) {
   CHECK_EQ(args->GetSize(), 2U);
-  std::string name = args->GetList()[0].GetString();
+  const std::string name = args->GetList()[0].GetString();
   const std::string tweet_id = args->GetList()[1].GetString();
 
+  if (name.empty() || !rewards_service_) {
+    return;
+  }
+
   const std::string comment = l10n_util::GetStringFUTF8(
       IDS_BRAVE_REWARDS_LOCAL_COMPLIMENT_TWEET,
       base::UTF8ToUTF16(name));
@@ -316,40 +329,41 @@ void TipMessageHandler::TweetTip(const base::ListValue *args) {
   std::map<std::string, std::string> share_url_args;
   share_url_args["comment"] = comment;
   share_url_args["hashtag"] = hashtag;
-  share_url_args["name"] = name.erase(0, 1);
+  share_url_args["name"] = name.substr(1);
   share_url_args["tweet_id"] = tweet_id;
 
-  if (auto* service = GetRewardsService()) {
-    service->GetShareURL(
-        share_url_args,
-        base::BindOnce(
-            &TipMessageHandler::GetShareURLCallback,
-            base::Unretained(this)));
-  }
+  rewards_service_->GetShareURL(
+      share_url_args,
+      base::BindOnce(
+          &TipMessageHandler::GetShareURLCallback,
+          base::Unretained(this)));
 }
 
 void TipMessageHandler::FetchBalance(const base::ListValue* args) {
-  if (auto* service = GetRewardsService()) {
-    service->FetchBalance(base::BindOnce(
-        &TipMessageHandler::FetchBalanceCallback,
-        weak_factory_.GetWeakPtr()));
+  if (!rewards_service_) {
+    return;
   }
+  rewards_service_->FetchBalance(base::BindOnce(
+      &TipMessageHandler::FetchBalanceCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
 void TipMessageHandler::GetExternalWallet(const base::ListValue* args) {
-  if (auto* service = GetRewardsService()) {
-    service->GetUpholdWallet(base::BindOnce(
-        &TipMessageHandler::GetUpholdWalletCallback,
-        weak_factory_.GetWeakPtr()));
+  if (!rewards_service_) {
+    return;
   }
+  rewards_service_->GetUpholdWallet(base::BindOnce(
+      &TipMessageHandler::GetUpholdWalletCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
-void TipMessageHandler::GetRecurringTips(const base::ListValue *args) {
-  if (auto* service = GetRewardsService()) {
-    service->GetRecurringTips(base::BindOnce(
-        &TipMessageHandler::GetRecurringTipsCallback,
-        weak_factory_.GetWeakPtr()));
+void TipMessageHandler::GetRecurringTips(const base::ListValue* args) {
+  if (!rewards_service_) {
+    return;
   }
+  rewards_service_->GetRecurringTips(base::BindOnce(
+      &TipMessageHandler::GetRecurringTipsCallback,
+      weak_factory_.GetWeakPtr()));
 }
 
 void TipMessageHandler::GetRewardsParametersCallback(
@@ -398,7 +412,7 @@ void TipMessageHandler::GetRecurringTipsCallback(
 void TipMessageHandler::GetPublisherBannerCallback(
     ledger::type::PublisherBannerPtr banner) {
   if (!IsJavascriptAllowed()) {
-     return;
+    return;
   }
 
   base::Value result(base::Value::Type::DICTIONARY);
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 6814006af56a..2f9518a48841 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -818,8 +818,6 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "currentMonthlyContribution", IDS_BRAVE_REWARDS_TIP_CURRENT_MONTHLY_CONTRIBUTION },  // NOLINT
         { "doMonthly", IDS_BRAVE_UI_DO_MONTHLY },
         { "errorHasOccurred", IDS_BRAVE_REWARDS_TIP_ERROR_HAS_OCCURRED },
-        { "githubTipTitle", IDS_BRAVE_UI_GITHUB_TIP_TITLE },
-        { "githubTipTitleEmpty", IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY },
         { "monthlyContribution", IDS_BRAVE_UI_MONTHLY_CONTRIBUTION },
         { "monthlyContributionSet", IDS_BRAVE_REWARDS_TIP_MONTHLY_CONTRIBUTION_SET },  // NOLINT
         { "monthlyText", IDS_BRAVE_UI_MONTHLY_TEXT },
@@ -830,8 +828,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "oneTimeTip", IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP },
         { "oneTimeTipAmount", IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP_AMOUNT },
         { "points", IDS_BRAVE_UI_POINTS },
-        { "redditTipTitle", IDS_BRAVE_UI_REDDIT_TIP_TITLE },
-        { "redditTipTitleEmpty", IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY },
+        { "postHeader", IDS_BRAVE_REWARDS_TIP_POST_HEADER },
+        { "postHeaderTwitter", IDS_BRAVE_REWARDS_TIP_POST_HEADER_TWITTER },
         { "rewardsBannerText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
         { "sendDonation", IDS_BRAVE_UI_SEND_DONATION },
         { "siteBannerConnectedText", IDS_BRAVE_UI_SITE_BANNER_CONNECTED_TEXT },
@@ -845,9 +843,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "tipPostSubtitle", IDS_BRAVE_REWARDS_TIP_TIP_POST_SUBTITLE },
         { "tokens", IDS_BRAVE_UI_TOKENS },
         { "tweetAboutSupport", IDS_BRAVE_REWARDS_TIP_TWEET_ABOUT_SUPPORT },
-        { "tweetTipTitle", IDS_BRAVE_UI_TWEET_TIP_TITLE },
-        { "tweetTipTitleEmpty", IDS_BRAVE_UI_TWEET_TIP_TITLE_EMPTY },
-        { "unVerifiedTextMore", IDS_BRAVE_UI_SITE_UNVERIFIED_TEXT_MORE },
+        { "unverifiedTextMore", IDS_BRAVE_UI_SITE_UNVERIFIED_TEXT_MORE },
         { "welcome", IDS_BRAVE_UI_WELCOME },
       }
     }, {
diff --git a/components/brave_rewards/browser/test/common/rewards_browsertest_contribution.cc b/components/brave_rewards/browser/test/common/rewards_browsertest_contribution.cc
index 36417ecb663c..e5b60123440d 100644
--- a/components/brave_rewards/browser/test/common/rewards_browsertest_contribution.cc
+++ b/components/brave_rewards/browser/test/common/rewards_browsertest_contribution.cc
@@ -163,7 +163,7 @@ void RewardsBrowserTestContribution::TipPublisher(
     rewards_browsertest_util::WaitForElementToContain(
         site_banner_contents,
         "body",
-        base::StringPrintf("%.0f BAT", amount));
+        base::StringPrintf("%.3f BAT", amount));
   }
 
   const bool is_monthly =
diff --git a/components/brave_rewards/resources/tip/components/app.style.ts b/components/brave_rewards/resources/tip/components/app.style.ts
index edbb9bc75dfe..933348707313 100644
--- a/components/brave_rewards/resources/tip/components/app.style.ts
+++ b/components/brave_rewards/resources/tip/components/app.style.ts
@@ -7,7 +7,6 @@ import styled from 'styled-components'
 export const root = styled.div`
   display: flex;
   flex-flow: row wrap;
-
   font-family: var(--brave-font-heading);
   font-size: 14px;
   line-height: 22px;
@@ -32,7 +31,6 @@ export const form = styled.div`
   position: relative;
   flex: 1 0 364px;
   min-height: 454px;
-
   background: #fff;
 `
 
@@ -62,6 +60,5 @@ export const error = styled.div`
 
 export const errorDetails = styled.div`
   margin-top: 10px;
-
   font-size: 12px;
 `
diff --git a/components/brave_rewards/resources/tip/components/app.tsx b/components/brave_rewards/resources/tip/components/app.tsx
index e54f916ba501..92a085ee4eae 100644
--- a/components/brave_rewards/resources/tip/components/app.tsx
+++ b/components/brave_rewards/resources/tip/components/app.tsx
@@ -38,9 +38,10 @@ export function App () {
   })
 
   function onMount (element: HTMLElement | null) {
-    if (element) {
-      injectThemeVariables(element)
+    if (!element) {
+      return
     }
+    injectThemeVariables(element)
   }
 
   return (
diff --git a/components/brave_rewards/resources/tip/components/bat_string.tsx b/components/brave_rewards/resources/tip/components/bat_string.tsx
index de228b25b969..44aed8fbec00 100644
--- a/components/brave_rewards/resources/tip/components/bat_string.tsx
+++ b/components/brave_rewards/resources/tip/components/bat_string.tsx
@@ -6,13 +6,12 @@ import * as React from 'react'
 
 import { HostContext } from '../lib/host_context'
 import { LocaleContext } from '../lib/locale_context'
-import { StringKey } from '../lib/interfaces'
 
 interface Props {
-  stringKey?: StringKey
+  stringKey?: string
 }
 
-function mapOnlyAnonWalletKey (key: StringKey) {
+function mapOnlyAnonWalletKey (key: string) {
   switch (key) {
     case 'bat': return 'bap'
     case 'batFunds': return 'bapFunds'
diff --git a/components/brave_rewards/resources/tip/components/button_switch.style.ts b/components/brave_rewards/resources/tip/components/button_switch.style.ts
index 3aa5cccbca24..e1950b14c4b3 100644
--- a/components/brave_rewards/resources/tip/components/button_switch.style.ts
+++ b/components/brave_rewards/resources/tip/components/button_switch.style.ts
@@ -15,7 +15,6 @@ export const option = styled.div`
   button {
     width: 100%;
     padding: var(--button-switch-padding, 6px 0);
-
     font-size: 12px;
     line-height: 21px;
     border-radius: 30px;
@@ -23,10 +22,12 @@ export const option = styled.div`
     background: #fff;
     color: var(--brave-color-brandBatInteracting);
     cursor: pointer;
+    outline: 0;
   }
 
-  button:active {
+  button:active, button:focus {
     background: var(--brave-color-brandBatActive);
+    color: var(--brave-color-brandBatInteracting);
   }
 
   &.selected button {
@@ -38,7 +39,6 @@ export const option = styled.div`
 
 export const caption = styled.div`
   margin-top: 5px;
-
   text-align: center;
   font-size: 12px;
   line-height: 18px;
diff --git a/components/brave_rewards/resources/tip/components/current_monthly_form.style.ts b/components/brave_rewards/resources/tip/components/current_monthly_form.style.ts
index afbee13db3fb..0b81350b1646 100644
--- a/components/brave_rewards/resources/tip/components/current_monthly_form.style.ts
+++ b/components/brave_rewards/resources/tip/components/current_monthly_form.style.ts
@@ -9,13 +9,11 @@ export const root = styled.div`
   padding-top: 45px;
   display: flex;
   flex-direction: column;
-
   color: #212529;
 `
 
 export const header = styled.div`
   text-align: center;
-
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
@@ -50,7 +48,6 @@ export const cancel = styled.span`
 
   button {
     padding: 10px 22px;
-
     border: none;
     background: none;
     color: #868E96;
@@ -64,7 +61,6 @@ export const cancel = styled.span`
 export const changeAmount = styled.span`
   button {
     padding: 9px 21px;
-
     background: none;
     color: var(--brave-color-brandBatInteracting);
     cursor: pointer;
diff --git a/components/brave_rewards/resources/tip/components/form_submit_button.style.ts b/components/brave_rewards/resources/tip/components/form_submit_button.style.ts
index 2374132a7213..4df5e4c39cf2 100644
--- a/components/brave_rewards/resources/tip/components/form_submit_button.style.ts
+++ b/components/brave_rewards/resources/tip/components/form_submit_button.style.ts
@@ -8,7 +8,6 @@ export const root = styled.div`
   button {
     width: 100%;
     padding: 19px 0;
-
     cursor: pointer;
     border: none;
     background: var(--brave-color-brandBatInteracting);
@@ -16,6 +15,7 @@ export const root = styled.div`
     line-height: 21px;
     font-weight: 600;
     color: #fff;
+    outline: 0;
   }
 
   button:active {
diff --git a/components/brave_rewards/resources/tip/components/media_card.style.ts b/components/brave_rewards/resources/tip/components/media_card.style.ts
index 3624b0e243d4..4053b136a5d7 100644
--- a/components/brave_rewards/resources/tip/components/media_card.style.ts
+++ b/components/brave_rewards/resources/tip/components/media_card.style.ts
@@ -10,15 +10,13 @@ export const root = styled.div`
 export const header = styled.div`
   display: flex;
   padding: 13px 18px 5px 20px;
-
   border-radius: 8px 8px 0 0;
-  background: #fff;
-  opacity: 0.65;
+  color: #212529;
+  background: rgba(255, 255, 255, 0.65);
 `
 
 export const title = styled.div`
   flex: 1 1 auto;
-
   color: #212529;
   font-weight: 600;
   font-size: 16px;
@@ -28,7 +26,6 @@ export const title = styled.div`
 export const date = styled.div`
   flex: 1 1 auto;
   text-align: right;
-
   font-size: 14px;
   line-height: 24px;
   color: #707282;
@@ -40,6 +37,7 @@ export const icon = styled.span`
   width: 23px;
   vertical-align: middle;
   margin-bottom: 3px;
+  margin-left: 5px;
 `
 
 export const text = styled.div`
diff --git a/components/brave_rewards/resources/tip/components/monthly_tip_form.style.ts b/components/brave_rewards/resources/tip/components/monthly_tip_form.style.ts
index 0e938f9b82ba..cdeccfe43aca 100644
--- a/components/brave_rewards/resources/tip/components/monthly_tip_form.style.ts
+++ b/components/brave_rewards/resources/tip/components/monthly_tip_form.style.ts
@@ -21,7 +21,6 @@ export const main = styled.div`
 export const amounts = styled.div`
   padding-top: 24px;
   margin-top: 11px;
-
   border-top: 1px solid rgba(174, 177, 194, 0.5);
 }
 `
diff --git a/components/brave_rewards/resources/tip/components/one_time_tip_form.style.ts b/components/brave_rewards/resources/tip/components/one_time_tip_form.style.ts
index 240950381436..1fd2cb57a17c 100644
--- a/components/brave_rewards/resources/tip/components/one_time_tip_form.style.ts
+++ b/components/brave_rewards/resources/tip/components/one_time_tip_form.style.ts
@@ -21,7 +21,6 @@ export const main = styled.div`
 export const amounts = styled.div`
   padding-top: 24px;
   margin-top: 11px;
-
   border-top: 1px solid rgba(174, 177, 194, 0.5);
 }
 `
@@ -31,7 +30,6 @@ export const footer = styled.div``
 export const addFunds = styled.div`
   padding: 19px 0;
   text-align: center;
-
   color: #fff;
   background: #868E96;
   font-size: 14px;
diff --git a/components/brave_rewards/resources/tip/components/payment_kind_switch.style.ts b/components/brave_rewards/resources/tip/components/payment_kind_switch.style.ts
index 1b9fd6e2b9fe..469848499713 100644
--- a/components/brave_rewards/resources/tip/components/payment_kind_switch.style.ts
+++ b/components/brave_rewards/resources/tip/components/payment_kind_switch.style.ts
@@ -7,7 +7,6 @@ import styled from 'styled-components'
 export const root = styled.div`
   margin: 0 auto;
   max-width: 150px;
-
   --button-switch-padding: 3px 0;
 `
 
diff --git a/components/brave_rewards/resources/tip/components/publisher_banner.style.ts b/components/brave_rewards/resources/tip/components/publisher_banner.style.ts
index b1941c5a8eb1..370d459632e5 100644
--- a/components/brave_rewards/resources/tip/components/publisher_banner.style.ts
+++ b/components/brave_rewards/resources/tip/components/publisher_banner.style.ts
@@ -17,9 +17,7 @@ export const root = styled.div`
   justify-content: center;
   padding: 64px 12px 10px;
   height: 100%;
-
   color: #fff;
-
   background-color: #212529;
   background-size: cover;
   background-position: center;
@@ -61,7 +59,6 @@ export const verifiedIcon = styled.div`
   position: absolute;
   top: 3px;
   left: -12px;
-
   color: #AEB1C2;
 
   &.verified {
@@ -78,25 +75,28 @@ export const logoMask = styled.div`
   width: 82px;
   text-align: center;
   overflow: hidden;
+  border-radius: 50%;
+  border: solid 2px rgba(255, 255, 255, .5);
+
+  > img {
+    object-fit: cover;
+    max-height: 100%;
+  }
+`
 
+export const logoLetter = styled.div`
   background: #fff;
-  border-radius: 50%;
-  text-align: center;
+  height: 100%;
   color: var(--brave-color-brandBrave);
   text-transform: uppercase;
+  text-align: center;
   font-size: 52px;
   font-weight: 600;
   line-height: 82px;
-
-  > img {
-    object-fit: cover;
-    max-height: 100%;
-  }
 `
 
 export const name = styled.div`
   flex: 1 1 auto;
-
   font-size: 22px;
   line-height: 33px;
   font-weight: 600;
@@ -122,7 +122,6 @@ export const socialLinks = styled.div`
     height: 25px;
     padding: 4px;
     margin: 0 5px;
-
     border-radius: 50%;
     background: #fff;
   }
@@ -134,7 +133,6 @@ export const unverifiedNotice = styled.div`
   margin-bottom: -12px;
   display: flex;
   align-items: center;
-
   font-size: 12px;
   background: #fff;
   color: #000;
@@ -160,7 +158,6 @@ export const unverifiedNoticeText = styled.div`
 
 export const title = styled.div`
   margin-top: 28px;
-
   font-size: 18px;
   line-height: 26px;
 `
diff --git a/components/brave_rewards/resources/tip/components/publisher_banner.tsx b/components/brave_rewards/resources/tip/components/publisher_banner.tsx
index 1244d8e6dae1..dcddea69aa01 100644
--- a/components/brave_rewards/resources/tip/components/publisher_banner.tsx
+++ b/components/brave_rewards/resources/tip/components/publisher_banner.tsx
@@ -10,7 +10,8 @@ import {
   TwitterColorIcon,
   TwitchColorIcon,
   GitHubColorIcon,
-  YoutubeColorIcon
+  YoutubeColorIcon,
+  VimeoColorIcon
 } from 'brave-ui/components/icons'
 
 import {
@@ -49,13 +50,12 @@ function getLogo (publisherInfo: PublisherInfo) {
   if (logoURL) {
     return <img src={logoURL} />
   }
-  if (publisherInfo.name) {
-    return publisherInfo.name[0]
-  }
-  if (publisherInfo.publisherKey) {
-    return publisherInfo.publisherKey[0]
-  }
-  return ''
+  const name = publisherInfo.name || publisherInfo.publisherKey
+  return (
+    <style.logoLetter>
+      {name ? name[0] : ''}
+    </style.logoLetter>
+  )
 }
 
 function getProviderName (publisherInfo: PublisherInfo) {
@@ -108,6 +108,7 @@ function getSocialIcon (type: string) {
     case 'twitch': return <TwitchColorIcon />
     case 'github': return <GitHubColorIcon />
     case 'reddit': return <RedditColorIcon />
+    case 'vimeo': return <VimeoColorIcon />
     default: return null
   }
 }
@@ -189,19 +190,40 @@ function getUnverifiedNotice (
         <strong>{getString('siteBannerNoticeNote')}</strong>&nbsp;
         {text}&nbsp;
         <NewTabLink href='https://brave.com/faq/#unclaimed-funds'>
-          {getString('unVerifiedTextMore')}
+          {getString('unverifiedTextMore')}
         </NewTabLink>
       </style.unverifiedNoticeText>
     </style.unverifiedNotice>
   )
 }
 
+function getPostRelativeTime (postDate: Date) {
+  // TS does not yet recongnize RelativeTimeFormatter (since chromium 71)
+  const { RelativeTimeFormat } = Intl as any
+  const formatter = new RelativeTimeFormat()
+  const sec = Math.max(0, Date.now() - postDate.getTime()) / 1000
+  if (sec < 60) {
+    return formatter.format(-Math.round(sec), 'second')
+  }
+  if (sec < 60 * 60) {
+    return formatter.format(-Math.round(sec / 60), 'minute')
+  }
+  if (sec < 60 * 60 * 24) {
+    return formatter.format(-Math.round(sec / 60 / 60), 'hour')
+  }
+  return ''
+}
+
 function getPostTimeString (postTimestamp: string) {
   const postDate = new Date(postTimestamp)
   const invalidDate = !Number(postDate)
   if (invalidDate) {
     return postTimestamp
   }
+  const relative = getPostRelativeTime(postDate)
+  if (relative) {
+    return relative
+  }
   return postDate.toLocaleDateString(undefined, {
     month: 'short',
     day: 'numeric',
@@ -220,12 +242,8 @@ function getDescription (
 
   if (mediaMetaData.mediaType === 'twitter') {
     const postTime = getPostTimeString(mediaMetaData.postTimestamp)
-    const message = getString(mediaMetaData.postText
-      ? 'tweetTipTitle'
-      : 'tweetTipTitleEmpty')
-    const title = formatLocaleTemplate(message, {
-      // The localized message for twitter contains a "@" before the screen name
-      user: getSocialScreenName(mediaMetaData).replace(/^@/, '')
+    const title = formatLocaleTemplate(getString('postHeaderTwitter'), {
+      user: publisherInfo.name
     })
     return (
       <MediaCard title={title} postTime={postTime} icon={<TwitterColorIcon />}>
@@ -235,18 +253,12 @@ function getDescription (
   }
 
   if (mediaMetaData.mediaType === 'reddit') {
-    const message = getString(mediaMetaData.postText
-      ? 'redditTipTitle'
-      : 'redditTipTitleEmpty')
-    const title = formatLocaleTemplate(message, {
-      user: getSocialScreenName(mediaMetaData)
+    const postTime = getPostTimeString(mediaMetaData.postRelDate)
+    const title = formatLocaleTemplate(getString('postHeader'), {
+      user: publisherInfo.name
     })
     return (
-      <MediaCard
-        title={title}
-        postTime={mediaMetaData.postRelDate}
-        icon={<RedditColorIcon />}
-      >
+      <MediaCard title={title} postTime={postTime} icon={<RedditColorIcon />}>
         {mediaMetaData.postText}
       </MediaCard>
     )
@@ -273,7 +285,7 @@ function getBackgroundClass (publisherInfo: PublisherInfo) {
   }
 
   // Vary the background type by publisher key and day
-  let hash = hashString(
+  const hash = hashString(
     publisherInfo.publisherKey + '-' +
     Math.floor(Date.now() / 1000 / 60 / 60 / 24))
 
diff --git a/components/brave_rewards/resources/tip/components/slider_switch.style.ts b/components/brave_rewards/resources/tip/components/slider_switch.style.ts
index 3d7e385319cc..e115b3aa095f 100644
--- a/components/brave_rewards/resources/tip/components/slider_switch.style.ts
+++ b/components/brave_rewards/resources/tip/components/slider_switch.style.ts
@@ -16,7 +16,6 @@ export const bar = styled.div`
   left: 0;
   bottom: 0;
   right: 0;
-
   background: #fff;
   border-radius: 21px;
   transition: all .3s ease;
@@ -26,7 +25,6 @@ export const rail = styled.div`
   display: flex;
   align-items: center;
   height: 37px;
-
   background: #DFDFE8;
   border-radius: 21px;
 `
@@ -38,18 +36,17 @@ export const option = styled.div`
   button {
     width: 100%;
     text-align: center;
-
     font-size: 12px;
     line-height: 30px;
     color: #686978;
     background: transparent;
     cursor: pointer;
     border: none;
+    outline: 0;
   }
 
   &.selected button {
     position: relative;
-
     color: var(
       --slider-switch-selected-color,
       var(--brave-color-brandBatInteracting)
diff --git a/components/brave_rewards/resources/tip/components/terms_of_service.style.ts b/components/brave_rewards/resources/tip/components/terms_of_service.style.ts
index 266dd4d695a8..a5483393e7ec 100644
--- a/components/brave_rewards/resources/tip/components/terms_of_service.style.ts
+++ b/components/brave_rewards/resources/tip/components/terms_of_service.style.ts
@@ -7,7 +7,6 @@ import styled from 'styled-components'
 export const terms = styled.div`
   text-align: center;
   padding-bottom: 7px;
-
   font-size: 10px;
   line-height: 14px;
   color: #686978;
diff --git a/components/brave_rewards/resources/tip/components/tip_complete.style.ts b/components/brave_rewards/resources/tip/components/tip_complete.style.ts
index 171ff327d6f0..fa5686edce0e 100644
--- a/components/brave_rewards/resources/tip/components/tip_complete.style.ts
+++ b/components/brave_rewards/resources/tip/components/tip_complete.style.ts
@@ -30,7 +30,6 @@ export const header = styled.div`
   padding-top: 63px;
   padding-bottom: 9px;
   text-align: center;
-
   border-bottom: 1px solid rgba(174, 177, 194, 0.5);
   font-weight: 600;
   font-size: 22px;
@@ -40,7 +39,6 @@ export const header = styled.div`
 export const message = styled.div`
   padding-top: 46px;
   text-align: center;
-
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
@@ -50,7 +48,6 @@ export const message = styled.div`
 export const table = styled.div`
   margin-top: 17px;
   text-align: left;
-
   font-size: 14px;
   line-height: 21px;
 
@@ -95,7 +92,6 @@ export const cancelMain = styled.div`
 
 export const cancelHeader = styled.div`
   margin-top: 152px;
-
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
@@ -104,7 +100,6 @@ export const cancelHeader = styled.div`
 
 export const cancelText = styled.div`
   margin: 24px 53px 0;
-
   color: #212529;
 `
 
diff --git a/components/brave_rewards/resources/tip/components/tip_complete.tsx b/components/brave_rewards/resources/tip/components/tip_complete.tsx
index 0bd1fa850c32..179d6d4c865f 100644
--- a/components/brave_rewards/resources/tip/components/tip_complete.tsx
+++ b/components/brave_rewards/resources/tip/components/tip_complete.tsx
@@ -9,6 +9,7 @@ import { TwitterColorIcon } from 'brave-ui/components/icons'
 import { TipKind } from '../lib/interfaces'
 import { HostContext } from '../lib/host_context'
 import { LocaleContext } from '../lib/locale_context'
+import { formatTokenAmount } from '../lib/formatting'
 
 import { BatString } from './bat_string'
 
@@ -43,8 +44,7 @@ export function TipComplete (props: Props) {
     })
   }, [host])
 
-  const amountString = props.tipAmount.toFixed(
-    Math.floor(props.tipAmount) === props.tipAmount ? 0 : 3)
+  const amountString = formatTokenAmount(props.tipAmount)
 
   function onShareClick () {
     host.shareTip('twitter')
diff --git a/components/brave_rewards/resources/tip/components/tip_form.style.ts b/components/brave_rewards/resources/tip/components/tip_form.style.ts
index fa81a05d3e25..15898ecd18a3 100644
--- a/components/brave_rewards/resources/tip/components/tip_form.style.ts
+++ b/components/brave_rewards/resources/tip/components/tip_form.style.ts
@@ -15,7 +15,6 @@ export const loading = styled.div``
 export const header = styled.div`
   text-align: center;
   padding-top: 27px;
-
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
@@ -46,7 +45,6 @@ export const monthlyIndicator = styled.div`
   text-align: center;
   padding-bottom: 4px;
   margin-top: -20px;
-
   font-size: 12px;
   line-height: 16px;
   color: #979797;
diff --git a/components/brave_rewards/resources/tip/lib/host.ts b/components/brave_rewards/resources/tip/lib/host.ts
index 422f762664bb..e4a3d054fd71 100644
--- a/components/brave_rewards/resources/tip/lib/host.ts
+++ b/components/brave_rewards/resources/tip/lib/host.ts
@@ -14,8 +14,7 @@ import {
   DialogArgs,
   EntryPoint,
   TipKind,
-  ShareTarget,
-  StringKey
+  ShareTarget
 } from './interfaces'
 
 interface RecurringTipInfo {
@@ -143,6 +142,10 @@ export function createHost (): Host {
       if (data.result === 0) {
         chrome.send('fetchBalance')
       }
+    },
+
+    unblindedTokensReady () {
+      chrome.send('fetchBalance')
     }
 
   })
@@ -157,7 +160,7 @@ export function createHost (): Host {
       return stateManager.getState()
     },
 
-    getString (key: StringKey) {
+    getString (key: string) {
       return self.loadTimeData.getString(key)
     },
 
diff --git a/components/brave_rewards/resources/tip/lib/interfaces.ts b/components/brave_rewards/resources/tip/lib/interfaces.ts
index cc45985bdae0..365c0b7ffabf 100644
--- a/components/brave_rewards/resources/tip/lib/interfaces.ts
+++ b/components/brave_rewards/resources/tip/lib/interfaces.ts
@@ -101,54 +101,6 @@ export interface RewardsParameters {
   monthlyTipChoices: number[]
 }
 
-export type StringKey =
-  'addFunds' |
-  'bap' |
-  'bapFunds' |
-  'bat' |
-  'batFunds' |
-  'cancel' |
-  'cancelConfirmationText' |
-  'cancelMonthlyContribution' |
-  'changeAmount' |
-  'confirmCancel' |
-  'contributionAmount' |
-  'contributionCanceled' |
-  'currentlySupporting' |
-  'currentMonthlyContribution' |
-  'doMonthly' |
-  'errorHasOccurred' |
-  'githubTipTitle' |
-  'githubTipTitleEmpty' |
-  'monthlyContributionSet' |
-  'monthlyText' |
-  'nextContributionDate' |
-  'notEnoughTokens' |
-  'notEnoughTokensLink' |
-  'on' |
-  'oneTimeTip' |
-  'oneTimeTipAmount' |
-  'points' |
-  'redditTipTitle' |
-  'redditTipTitleEmpty' |
-  'rewardsBannerText1' |
-  'sendDonation' |
-  'siteBannerConnectedText' |
-  'siteBannerNoticeNote' |
-  'siteBannerNoticeText' |
-  'sorryToSeeYouGo' |
-  'supportThisCreator' |
-  'termsOfService' |
-  'thanksForTheSupport' |
-  'tipHasBeenSent' |
-  'tipPostSubtitle' |
-  'tokens' |
-  'tweetAboutSupport' |
-  'tweetTipTitle' |
-  'tweetTipTitleEmpty' |
-  'unVerifiedTextMore' |
-  'welcome'
-
 export interface HostError {
   type: string
   code?: number
@@ -171,7 +123,7 @@ export type HostListener = (state: HostState) => void
 
 export interface Host {
   state: HostState
-  getString: (key: StringKey) => string
+  getString: (key: string) => string
   getDialogArgs: () => DialogArgs
   closeDialog: () => void
   processTip: (amount: number, kind: TipKind) => void
diff --git a/components/brave_rewards/resources/tip/lib/locale_context.ts b/components/brave_rewards/resources/tip/lib/locale_context.ts
index 4e61d2d04cd0..3e9a44539d98 100644
--- a/components/brave_rewards/resources/tip/lib/locale_context.ts
+++ b/components/brave_rewards/resources/tip/lib/locale_context.ts
@@ -9,7 +9,5 @@ export interface Locale {
 }
 
 export const LocaleContext = React.createContext<Locale>({
-  getString (key: string) {
-    return ''
-  }
+  getString: () => ''
 })
diff --git a/components/brave_rewards/resources/tip/stories/index.tsx b/components/brave_rewards/resources/tip/stories/index.tsx
index 2e9dc1879a68..205e5145057f 100644
--- a/components/brave_rewards/resources/tip/stories/index.tsx
+++ b/components/brave_rewards/resources/tip/stories/index.tsx
@@ -21,7 +21,7 @@ function getMediaMetaData (type: MediaType): MediaMetaData {
         mediaType: 'twitter',
         publisherName: 'brave',
         postId: '1234',
-        postTimestamp: new Date().toString(),
+        postTimestamp: new Date(Date.now() - 6000000).toString(),
         postText: 'It\'s all bravey baby'
       }
     case 'github':
diff --git a/components/brave_rewards/resources/tip/stories/locale_strings.ts b/components/brave_rewards/resources/tip/stories/locale_strings.ts
index fdfa0482337e..a8bd77550bf0 100644
--- a/components/brave_rewards/resources/tip/stories/locale_strings.ts
+++ b/components/brave_rewards/resources/tip/stories/locale_strings.ts
@@ -15,8 +15,6 @@ export const localeStrings = {
   currentlySupporting: 'You’re currently supporting this creator',
   doMonthly: 'Set monthly contribution',
   errorHasOccurred: 'Oops - an error has occurred.',
-  githubTipTitle: 'Tip {{ user }} for their post:',
-  githubTipTitleEmpty: 'Tip {{ user }}',
   monthlyContributionSet: 'Monthly contribution has been set.',
   monthlyText: 'Monthly',
   nextContributionDate: 'Next contribution date:',
@@ -26,8 +24,8 @@ export const localeStrings = {
   oneTimeTip: 'One Time Tip',
   oneTimeTipAmount: 'One time tip amount:',
   points: 'points',
-  redditTipTitle: 'Tip {{ user }} for their post:',
-  redditTipTitleEmpty: 'Tip {{ user }} for their post!',
+  postHeader: '{{user}}’s post',
+  postHeaderTwitter: '{{user}}’s tweet',
   rewardsBannerText1: 'You can support this content creator by sending a tip. It’s a way of thanking them for making great content. Verified creators get paid for their tips during the first week of each calendar month.',
   sendDonation: 'Send Tip',
   siteBannerConnectedText: 'This Brave Verified Creator has not yet configured their account to receive contributions from Brave users. Your browser will keep trying to contribute until they verify, or until 90 days have passed.',
@@ -41,8 +39,6 @@ export const localeStrings = {
   tipPostSubtitle: 'for their post',
   tokens: 'tokens',
   tweetAboutSupport: 'Tweet about your support',
-  tweetTipTitle: 'Tip @{{ user }} for their tweet:',
-  tweetTipTitleEmpty: 'Tip @{{ user }} for their tweet!',
-  unVerifiedTextMore: 'Learn more.',
+  unverifiedTextMore: 'Learn more.',
   welcome: 'Welcome!'
 }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index e5020ddb676c..1a3c578067f4 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -488,6 +488,8 @@
       <message name="IDS_BRAVE_REWARDS_TIP_NEXT_CONTRIBUTION_DATE" desc="">Next contribution date:</message>
       <message name="IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP" desc="">One Time Tip</message>
       <message name="IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP_AMOUNT" desc="">One time tip amount:</message>
+      <message name="IDS_BRAVE_REWARDS_TIP_POST_HEADER" desc="">{{user}}’s post</message>
+      <message name="IDS_BRAVE_REWARDS_TIP_POST_HEADER_TWITTER" desc="">{{user}}’s tweet</message>
       <message name="IDS_BRAVE_REWARDS_TIP_SORRY_TO_SEE_YOU_GO" desc="">Sorry to see you go…</message>
       <message name="IDS_BRAVE_REWARDS_TIP_SUPPORT_THIS_CREATOR" desc="">Support this creator</message>
       <message name="IDS_BRAVE_REWARDS_TIP_TERMS_OF_SERVICE" desc="">By proceeding, you agree to the <ph name="LINK_BEGIN">$1</ph>Terms of Service<ph name="LINK_END">$2</ph>.</message>
@@ -651,10 +653,6 @@
       <message name="IDS_BRAVE_UI_RECURRING" desc="">Recurring</message>
       <message name="IDS_BRAVE_UI_RECURRING_DONATION" desc="">Monthly Contributions</message>
       <message name="IDS_BRAVE_UI_RECURRING_DONATIONS" desc="">Monthly Contributions</message>
-      <message name="IDS_BRAVE_UI_REDDIT_TIP_TITLE" desc="">Tip {{ user }} for their post:</message>
-      <message name="IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY" desc="We use this title when reddit text is empty">Tip {{ user }} for their post!</message>
-      <message name="IDS_BRAVE_UI_GITHUB_TIP_TITLE" desc="">Tip {{ user }} for their post:</message>
-      <message name="IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY" desc="We use this title when github text is empty">Tip {{ user }} </message>
       <message name="IDS_BRAVE_UI_REMOVE" desc="">remove</message>
       <message name="IDS_BRAVE_UI_REMOVE_AD_FROM_SAVED" desc="">Remove From Saved</message>
       <message name="IDS_BRAVE_UI_RESERVED_AMOUNT_TEXT" desc="Notification about how much BAT do you have reserved">You’ve designated {{reservedAmount}} {{currency}} for creators who haven’t yet signed up to receive contributions. Your browser will keep trying to contribute until they verify, or until 90 days have passed.</message>
@@ -733,8 +731,6 @@
       <message name="IDS_BRAVE_UI_TURN_ON_ADS" desc="">Turn on Brave Ads</message>
       <message name="IDS_BRAVE_UI_TURN_ON_REWARDS_DESC" desc="">This enables both ads and automatic contributions. You can turn them on or off separately at any time.</message>
       <message name="IDS_BRAVE_UI_TURN_ON_REWARDS_TITLE" desc="">Activate Rewards</message>
-      <message name="IDS_BRAVE_UI_TWEET_TIP_TITLE" desc="">Tip @{{ user }} for their tweet:</message>
-      <message name="IDS_BRAVE_UI_TWEET_TIP_TITLE_EMPTY" desc="We use this title when twitter text is empty">Tip @{{ user }} for their tweet!</message>
       <message name="IDS_BRAVE_UI_TYPE" desc="">Type</message>
       <message name="IDS_BRAVE_UI_VERIFIED_PUBLISHER" desc="">Brave Verified Publisher</message>
       <message name="IDS_BRAVE_UI_VIEW_MONTHLY" desc="">View Monthly Statement for Details</message>
diff --git a/components/test/brave_rewards/tip/formatting_test.ts b/components/test/brave_rewards/tip/formatting_test.ts
new file mode 100644
index 000000000000..3580e579330c
--- /dev/null
+++ b/components/test/brave_rewards/tip/formatting_test.ts
@@ -0,0 +1,42 @@
+/* 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 {
+  formatTokenAmount,
+  formatExchangeAmount,
+  formatLocaleTemplate
+} from '../../../brave_rewards/resources/tip/lib/formatting'
+
+describe('Rewards Tip Dialog - formatting', () => {
+
+  describe('formatTokenAmount', () => {
+    it('formats token values to 3 decimal places', () => {
+      expect(formatTokenAmount(0)).toBe('0.000')
+      expect(formatTokenAmount(1.333333)).toBe('1.333')
+      expect(formatTokenAmount(10.55555)).toBe('10.556')
+    })
+  })
+
+  describe('formatExchangeAmount', () => {
+    it('formats exchange amounts with a rate and currency', () => {
+      expect(formatExchangeAmount(1.222, .95)).toBe('1.16 USD')
+    })
+  })
+
+  describe('formatLocaleTemplate', () => {
+    it('replaces named tokens in text', () => {
+      expect(
+        formatLocaleTemplate('a {{a}} b {{ b}} c {{ c }} d', {
+          a: '1',
+          b: '2',
+          c: '3'
+        }))
+        .toBe('a 1 b 2 c 3 d')
+      expect(
+        formatLocaleTemplate('a {{a}} b', {}))
+        .toBe('a {{a}} b')
+    })
+  })
+
+})