diff --git a/app/src/main/res/drawable/ic_onboarding_firefox_accounts.xml b/app/src/main/res/drawable/ic_onboarding_firefox_accounts.xml
new file mode 100644
index 0000000000..14ccf67a08
--- /dev/null
+++ b/app/src/main/res/drawable/ic_onboarding_firefox_accounts.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<vector android:height="24dp" android:viewportHeight="64"
+    android:viewportWidth="64" android:width="24dp"
+    xmlns:aapt="http://schemas.android.com/aapt" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillType="nonZero"
+        android:pathData="M57,3.41C55.9029,3.41 54.8509,3.8465 54.0761,4.6232C53.3013,5.3999 52.8673,6.4529 52.87,7.55L52.87,12.28C45.6154,4.6969 34.8024,1.6745 24.6673,4.3967C14.5321,7.119 6.6888,15.1526 4.21,25.35C3.6618,27.5585 5.0033,29.7944 7.21,30.35C7.5364,30.436 7.8725,30.4797 8.21,30.48C10.1036,30.4685 11.7492,29.1767 12.21,27.34C14.475,18.1357 22.7311,11.667 32.21,11.67C38.6913,11.6766 44.7818,14.7701 48.61,20L40.48,20C38.9542,19.9249 37.511,20.6962 36.7256,22.0065C35.9402,23.3168 35.9402,24.9532 36.7256,26.2635C37.511,27.5738 38.9542,28.3451 40.48,28.27L57,28.27C59.2865,28.27 61.14,26.4165 61.14,24.13L61.14,7.55C61.14,5.2635 59.2865,3.41 57,3.41Z"
+        android:strokeColor="#00000000" android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient android:endX="73.57205" android:endY="7.6675277"
+                android:startX="20.146467" android:startY="20.368952" android:type="linear">
+                <item android:color="#FF00B3F4" android:offset="0"/>
+                <item android:color="#FF07B8ED" android:offset="0.16"/>
+                <item android:color="#FF1AC6D8" android:offset="0.41"/>
+                <item android:color="#FF39DCB7" android:offset="0.7"/>
+                <item android:color="#FF3FE1B0" android:offset="0.76"/>
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path android:fillType="nonZero"
+        android:pathData="M57.18,34.19C54.9715,33.6418 52.7356,34.9833 52.18,37.19C49.9086,46.3901 41.6564,52.8558 32.18,52.86C25.7094,52.8674 19.621,49.7972 15.78,44.59L23.91,44.59C26.1147,44.4815 27.8466,42.6624 27.8466,40.455C27.8466,38.2476 26.1147,36.4285 23.91,36.32L7.38,36.32C6.2829,36.32 5.2309,36.7565 4.4561,37.5332C3.6813,38.3099 3.2473,39.3629 3.25,40.46L3.25,57C3.1749,58.5258 3.9462,59.969 5.2565,60.7544C6.5668,61.5398 8.2032,61.5398 9.5135,60.7544C10.8238,59.969 11.5951,58.5258 11.52,57L11.52,52.26C18.7726,59.8486 29.5875,62.8759 39.7259,60.1554C49.8642,57.4349 57.7108,49.4 60.19,39.2C60.738,36.986 59.3921,34.7457 57.18,34.19Z"
+        android:strokeColor="#00000000" android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient android:endX="1.0314565" android:endY="52.72845"
+                android:startX="71.77078" android:startY="39.75396" android:type="linear">
+                <item android:color="#FF00B3F4" android:offset="0.13"/>
+                <item android:color="#FF32A0F7" android:offset="0.29"/>
+                <item android:color="#FF5D8FFA" android:offset="0.45"/>
+                <item android:color="#FF7F82FC" android:offset="0.61"/>
+                <item android:color="#FF9779FE" android:offset="0.75"/>
+                <item android:color="#FFA673FF" android:offset="0.89"/>
+                <item android:color="#FFAB71FF" android:offset="1"/>
+            </gradient>
+        </aapt:attr>
+    </path>
+</vector>
diff --git a/app/src/main/res/drawable/onboarding_card_background_dark.xml b/app/src/main/res/drawable/onboarding_card_background_dark.xml
new file mode 100644
index 0000000000..3d0b8fe707
--- /dev/null
+++ b/app/src/main/res/drawable/onboarding_card_background_dark.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <stroke android:width="1dp" android:color="?neutralFaded" />
+    <solid android:color="@color/onboarding_card_background_dark" />
+    <corners android:radius="8dp" />
+</shape>
diff --git a/app/src/main/res/drawable/onboarding_card_background_light.xml b/app/src/main/res/drawable/onboarding_card_background_light.xml
index fc80efc8ad..80b7bf978d 100644
--- a/app/src/main/res/drawable/onboarding_card_background_light.xml
+++ b/app/src/main/res/drawable/onboarding_card_background_light.xml
@@ -4,7 +4,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <stroke android:width="1dp" android:color="?shadow" />
+    <stroke android:width="1dp" android:color="?neutralFaded" />
     <solid android:color="?inset" />
     <corners android:radius="8dp" />
 </shape>
diff --git a/app/src/main/res/drawable/onboarding_rounded_bottom_corners_ripple.xml b/app/src/main/res/drawable/onboarding_rounded_bottom_corners_ripple.xml
index 1744473a8f..9d7f6a4661 100644
--- a/app/src/main/res/drawable/onboarding_rounded_bottom_corners_ripple.xml
+++ b/app/src/main/res/drawable/onboarding_rounded_bottom_corners_ripple.xml
@@ -16,7 +16,7 @@
         <shape android:shape="rectangle">
             <stroke
                 android:width="1dp"
-                android:color="?shadow" />
+                android:color="?neutralFaded" />
             <solid android:color="?inset" />
             <corners
                 android:bottomLeftRadius="@dimen/tab_corner_radius"
diff --git a/app/src/main/res/layout/onboarding_firefox_account.xml b/app/src/main/res/layout/onboarding_firefox_account.xml
index c1946b61fa..98a484c58f 100644
--- a/app/src/main/res/layout/onboarding_firefox_account.xml
+++ b/app/src/main/res/layout/onboarding_firefox_account.xml
@@ -5,15 +5,41 @@
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/onboarding_card"
-    style="@style/OnboardingCardLight"
+    style="@style/OnboardingCardDark"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     <TextView
         android:id="@+id/header_text"
+        android:drawableStart="@drawable/ic_onboarding_firefox_accounts"
+        android:drawablePadding="12dp"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="14dp"
         android:text="@string/onboarding_firefox_account_header"
-        android:textAppearance="@style/HeaderTextStyle" />
+        android:textAppearance="@style/Header16TextStyle"
+        android:textColor="@color/onboarding_card_primary_text_dark"/>
+    <FrameLayout
+        android:id="@+id/read_button"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:background="@drawable/button_background"
+        android:backgroundTint="@color/onboarding_card_button_background_dark"
+        android:clickable="true"
+        android:focusable="true"
+        android:foreground="?android:attr/selectableItemBackground"
+        android:padding="10dp">
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:clickable="false"
+            android:focusable="false"
+            android:textStyle="bold"
+            android:gravity="center"
+            android:text="@string/onboarding_firefox_account_sign_in"
+            android:textColor="?neutral"
+            android:textSize="14sp" />
+    </FrameLayout>
 </LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 3817823c79..c45ced205e 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -136,4 +136,8 @@
 
     <!-- Reader View colors -->
     <color name="mozac_feature_readerview_text_color">@color/primary_text_light_theme</color>
+
+    <color name="onboarding_card_background_dark">#20123A</color>
+    <color name="onboarding_card_primary_text_dark">#3FE1B0</color>
+    <color name="onboarding_card_button_background_dark">#312A65</color>
 </resources>
diff --git a/app/src/main/res/values/static_strings.xml b/app/src/main/res/values/static_strings.xml
index f803df31c6..c4a4077f73 100644
--- a/app/src/main/res/values/static_strings.xml
+++ b/app/src/main/res/values/static_strings.xml
@@ -33,7 +33,9 @@
     <string name="onboarding_theme_picker_description" translatable="false">Save some battery and your eyesight by enabling dark mode.</string>
     <!-- text for the firefox account onboarding card header
     The first parameter is the name of the app defined in app_name (for example: Firefox Preview) -->
-    <string name="onboarding_firefox_account_header" translatable="false">Get the most out of %s</string>
+    <string name="onboarding_firefox_account_header" translatable="false">Get the most out of %s.</string>
+    <!-- text for the button to sign into your Firefox account -->
+    <string name="onboarding_firefox_account_sign_in">Sign in to Firefox</string>
     <!-- text for the tracking protection onboarding card header -->
     <string name="onboarding_tracking_protection_header" translatable="false">Protect yourself</string>
     <!-- text for the tracking protection card description
@@ -55,6 +57,9 @@
     <string name="onboarding_privacy_notice_description" translatable="false">We\'ve designed %s to give you control over what you share
         online and what you share with us.
     </string>
+    <!-- Text for the button to read the privacy notice -->
+    <string name="onboarding_privacy_notice_read_button">Read our privacy notice</string>
+
     <!-- text for the button to finish onboarding -->
     <string name="onboarding_finish" translatable="false">Start browsing</string>
 
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index ec6f84e89e..b03bf1ea2d 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -496,5 +496,4 @@
     <string name="accessibility_text_size_sample_text">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</string>
     <string name="preference_accessibility_text_size_summary">Make text on websites larger or smaller</string>
     <string name="preference_accessibility_font_size_title">Font Size</string>
-    <string name="onboarding_privacy_notice_read_button">Read our privacy notice</string>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index ae5e414e2a..9f36cc663d 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -243,4 +243,8 @@
         <item name="android:padding">16dp</item>
         <item name="android:layout_marginBottom">16dp</item>
     </style>
+
+    <style name="OnboardingCardDark" parent="OnboardingCardLight">
+        <item name="android:background">@drawable/onboarding_card_background_dark</item>
+    </style>
 </resources>