diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 77ceba8f9..11e484c8d 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1749,6 +1749,15 @@
"ghostery_browser_hub_onboarding_header_title_plan_choices": {
"message": "Ghostery Browser Hub - Plan Choices"
},
+ "ghostery_browser_hub_onboarding_welcome": {
+ "message": "Welcome to Ghostery Browser"
+ },
+ "ghostery_browser_hub_onboarding_lets_begin": {
+ "message": "Let's begin by choosing your privacy settings. This will be quick, we promise!"
+ },
+ "ghostery_browser_hub_onboarding_lets_do_this": {
+ "message": "Let's do this"
+ },
"enable_when_paused": {
"message": "To use this function, Resume Ghostery."
},
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx
index eb3b3766a..d0038f7ec 100644
--- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx
+++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx
@@ -13,6 +13,18 @@
import React from 'react';
-const WelcomeView = () =>
Step 5: Welcome View
;
+/**
+ * A Functional React component for rendering the Browser Welcome View
+ * @return {JSX} JSX for rendering the Browser Welcome View of the Hub app
+ * @memberof HubComponents
+ */
+const WelcomeView = () => (
+
+
{t('ghostery_browser_hub_onboarding_welcome')}
+
{t('ghostery_browser_hub_onboarding_lets_begin')}
+

+
+
+);
export default WelcomeView;
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss
new file mode 100644
index 000000000..b6d7c6998
--- /dev/null
+++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss
@@ -0,0 +1,57 @@
+.WelcomeView__container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.WelcomeView__title {
+ margin-top: 125px;
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 2.33;
+}
+
+.WelcomeView__subtitle {
+ margin-bottom: 20px;
+ width: 392px;
+ font-size: 18px;
+ line-height: 2.33;
+ text-align: center;
+}
+
+.WelcomeView__rocketShip {
+ margin-bottom: 84px;
+ height: 330px;
+ width: 545px;
+}
+
+.WelcomeView__ctaButton {
+ display: flex;
+ justify-content: center;
+ margin: 48px auto 0 auto;
+ height: 44px;
+ width: 162px;
+ padding: 7.7px 14px;
+ line-height: 22px;
+ background: linear-gradient(
+ 45deg,
+ #ff7e74 50%,
+ #00aef0
+ );
+ background-size: 200% 100%;
+ background-position: 100% 50%;
+ transition: 0.25s all;
+ border: none;
+ &:hover {
+ background-position: 0% 50%;
+ transition: 0.25s all;
+ }
+ color: #FFF;
+ font-size: 14.1px;
+ font-weight: 700;
+ border-radius: 3.5px;
+ text-align: center;
+ line-height: 2.05;
+ cursor: pointer;
+}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js
index 1ae8bd4ca..d5f22aa58 100644
--- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js
+++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js
@@ -13,4 +13,4 @@
import WelcomeView from './WelcomeView';
-export default WelcomesView;
+export default WelcomeView;
diff --git a/app/images/hub/welcome/rocketShip.png b/app/images/hub/welcome/rocketShip.png
new file mode 100644
index 000000000..1982e4fb6
Binary files /dev/null and b/app/images/hub/welcome/rocketShip.png differ
diff --git a/app/scss/hub.scss b/app/scss/hub.scss
index 759692615..9593db249 100644
--- a/app/scss/hub.scss
+++ b/app/scss/hub.scss
@@ -86,6 +86,7 @@ html, body, #root {
@import '../hub/Views/LogInView/LogInView.scss';
@import '../hub/Views/CreateAccountView/CreateAccountView.scss';
@import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../hub/Views/BrowserWelcomeView/BrowserWelcomeView.scss';
// Imports from ../shared-components directory
@import '../shared-components/ExitButton/ExitButton.scss';
diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss
index 2f71aa4f9..29c1449df 100644
--- a/app/scss/hub_ghostery_browser.scss
+++ b/app/scss/hub_ghostery_browser.scss
@@ -87,6 +87,7 @@ html, body, #root {
@import '../hub/Views/LogInView/LogInView.scss';
@import '../hub/Views/CreateAccountView/CreateAccountView.scss';
@import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss';
// Imports from ../shared-components directory
@import '../shared-components/ExitButton/ExitButton.scss';