diff --git a/Habitica/res/color/promo_gradient.xml b/Habitica/res/color/promo_gradient.xml
new file mode 100644
index 000000000..efe22607d
--- /dev/null
+++ b/Habitica/res/color/promo_gradient.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<gradient xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="#2995CD" android:offset="0" />
+    <item android:color="#24CC8F" android:offset="1" />
+</gradient>
diff --git a/Habitica/res/drawable-hdpi/flag_flap.png b/Habitica/res/drawable-hdpi/flag_flap.png
index b4e5e9cec..e67ac259f 100644
Binary files a/Habitica/res/drawable-hdpi/flag_flap.png and b/Habitica/res/drawable-hdpi/flag_flap.png differ
diff --git a/Habitica/res/drawable-hdpi/gift_sub_gift.png b/Habitica/res/drawable-hdpi/gift_sub_gift.png
index 278e05552..5cacbeb60 100644
Binary files a/Habitica/res/drawable-hdpi/gift_sub_gift.png and b/Habitica/res/drawable-hdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_gift.png b/Habitica/res/drawable-hdpi/payment_gift.png
index 250123b8c..2b9716bca 100644
Binary files a/Habitica/res/drawable-hdpi/payment_gift.png and b/Habitica/res/drawable-hdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-hdpi/separator_fancy.png b/Habitica/res/drawable-hdpi/separator_fancy.png
index ec6d69ba8..547a3d4ff 100644
Binary files a/Habitica/res/drawable-hdpi/separator_fancy.png and b/Habitica/res/drawable-hdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-hdpi/sub_plus.png b/Habitica/res/drawable-hdpi/sub_plus.png
new file mode 100644
index 000000000..6ca472fa0
Binary files /dev/null and b/Habitica/res/drawable-hdpi/sub_plus.png differ
diff --git a/Habitica/res/drawable-hdpi/subscription_bg.png b/Habitica/res/drawable-hdpi/subscription_bg.png
new file mode 100644
index 000000000..8e6b8b427
Binary files /dev/null and b/Habitica/res/drawable-hdpi/subscription_bg.png differ
diff --git a/Habitica/res/drawable-hdpi/subscription_selected_indicator.png b/Habitica/res/drawable-hdpi/subscription_selected_indicator.png
new file mode 100644
index 000000000..af84be92b
Binary files /dev/null and b/Habitica/res/drawable-hdpi/subscription_selected_indicator.png differ
diff --git a/Habitica/res/drawable-mdpi/flag_flap.png b/Habitica/res/drawable-mdpi/flag_flap.png
index b14a89033..fbf095f59 100644
Binary files a/Habitica/res/drawable-mdpi/flag_flap.png and b/Habitica/res/drawable-mdpi/flag_flap.png differ
diff --git a/Habitica/res/drawable-mdpi/gift_sub_gift.png b/Habitica/res/drawable-mdpi/gift_sub_gift.png
index d13327594..694da1399 100644
Binary files a/Habitica/res/drawable-mdpi/gift_sub_gift.png and b/Habitica/res/drawable-mdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_gift.png b/Habitica/res/drawable-mdpi/payment_gift.png
index bfdf2bd4a..527420f50 100644
Binary files a/Habitica/res/drawable-mdpi/payment_gift.png and b/Habitica/res/drawable-mdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-mdpi/separator_fancy.png b/Habitica/res/drawable-mdpi/separator_fancy.png
index 5595d9b81..a71f3c720 100644
Binary files a/Habitica/res/drawable-mdpi/separator_fancy.png and b/Habitica/res/drawable-mdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-mdpi/sub_plus.png b/Habitica/res/drawable-mdpi/sub_plus.png
new file mode 100644
index 000000000..d1c1db1b8
Binary files /dev/null and b/Habitica/res/drawable-mdpi/sub_plus.png differ
diff --git a/Habitica/res/drawable-mdpi/subscription_bg.png b/Habitica/res/drawable-mdpi/subscription_bg.png
new file mode 100644
index 000000000..3cfc3b068
Binary files /dev/null and b/Habitica/res/drawable-mdpi/subscription_bg.png differ
diff --git a/Habitica/res/drawable-mdpi/subscription_selected_indicator.png b/Habitica/res/drawable-mdpi/subscription_selected_indicator.png
new file mode 100644
index 000000000..505075158
Binary files /dev/null and b/Habitica/res/drawable-mdpi/subscription_selected_indicator.png differ
diff --git a/Habitica/res/drawable-xhdpi/flag_flap.png b/Habitica/res/drawable-xhdpi/flag_flap.png
index dca3af7c5..4cdb4a573 100644
Binary files a/Habitica/res/drawable-xhdpi/flag_flap.png and b/Habitica/res/drawable-xhdpi/flag_flap.png differ
diff --git a/Habitica/res/drawable-xhdpi/gift_sub_gift.png b/Habitica/res/drawable-xhdpi/gift_sub_gift.png
index f13dbf105..9ffb340e5 100644
Binary files a/Habitica/res/drawable-xhdpi/gift_sub_gift.png and b/Habitica/res/drawable-xhdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_gift.png b/Habitica/res/drawable-xhdpi/payment_gift.png
index fb1d96a23..ac4799cd6 100644
Binary files a/Habitica/res/drawable-xhdpi/payment_gift.png and b/Habitica/res/drawable-xhdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-xhdpi/separator_fancy.png b/Habitica/res/drawable-xhdpi/separator_fancy.png
index 28f321bf2..f35a8ad93 100644
Binary files a/Habitica/res/drawable-xhdpi/separator_fancy.png and b/Habitica/res/drawable-xhdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-xhdpi/sub_plus.png b/Habitica/res/drawable-xhdpi/sub_plus.png
new file mode 100644
index 000000000..ac5bbf974
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/sub_plus.png differ
diff --git a/Habitica/res/drawable-xhdpi/subscription_bg.png b/Habitica/res/drawable-xhdpi/subscription_bg.png
new file mode 100644
index 000000000..23037e347
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/subscription_bg.png differ
diff --git a/Habitica/res/drawable-xhdpi/subscription_selected_indicator.png b/Habitica/res/drawable-xhdpi/subscription_selected_indicator.png
new file mode 100644
index 000000000..f01900954
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/subscription_selected_indicator.png differ
diff --git a/Habitica/res/drawable-xxhdpi/flag_flap.png b/Habitica/res/drawable-xxhdpi/flag_flap.png
index fa7d6a76c..b9d656371 100644
Binary files a/Habitica/res/drawable-xxhdpi/flag_flap.png and b/Habitica/res/drawable-xxhdpi/flag_flap.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gift_sub_gift.png b/Habitica/res/drawable-xxhdpi/gift_sub_gift.png
index 6e7180dd5..a154b401f 100644
Binary files a/Habitica/res/drawable-xxhdpi/gift_sub_gift.png and b/Habitica/res/drawable-xxhdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_gift.png b/Habitica/res/drawable-xxhdpi/payment_gift.png
index e466c91e3..d2fb03a2b 100644
Binary files a/Habitica/res/drawable-xxhdpi/payment_gift.png and b/Habitica/res/drawable-xxhdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-xxhdpi/separator_fancy.png b/Habitica/res/drawable-xxhdpi/separator_fancy.png
index bb1aad139..7b4687ee8 100644
Binary files a/Habitica/res/drawable-xxhdpi/separator_fancy.png and b/Habitica/res/drawable-xxhdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-xxhdpi/sub_plus.png b/Habitica/res/drawable-xxhdpi/sub_plus.png
new file mode 100644
index 000000000..053926a82
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/sub_plus.png differ
diff --git a/Habitica/res/drawable-xxhdpi/subscription_bg.png b/Habitica/res/drawable-xxhdpi/subscription_bg.png
new file mode 100644
index 000000000..152afc073
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/subscription_bg.png differ
diff --git a/Habitica/res/drawable-xxhdpi/subscription_selected_indicator.png b/Habitica/res/drawable-xxhdpi/subscription_selected_indicator.png
new file mode 100644
index 000000000..9eb1dba33
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/subscription_selected_indicator.png differ
diff --git a/Habitica/res/drawable/flag_flap_background.xml b/Habitica/res/drawable/flag_flap_background.xml
new file mode 100644
index 000000000..4bd0c225f
--- /dev/null
+++ b/Habitica/res/drawable/flag_flap_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <gradient android:startColor="#77F4C7" android:endColor="#72CFFF" />
+</shape>
diff --git a/Habitica/res/drawable/g1g1_box.xml b/Habitica/res/drawable/g1g1_box.xml
index 3c098bd65..c122da223 100644
--- a/Habitica/res/drawable/g1g1_box.xml
+++ b/Habitica/res/drawable/g1g1_box.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="@color/teal_50"/>
+    <gradient android:startColor="#3BCAD7" android:endColor="#925CF3" android:angle="315"/>
     <corners android:radius="8dip"/>
-</shape>
\ No newline at end of file
+</shape>
diff --git a/Habitica/res/drawable/promo_gradient.xml b/Habitica/res/drawable/promo_gradient.xml
new file mode 100644
index 000000000..1a4fb7a7c
--- /dev/null
+++ b/Habitica/res/drawable/promo_gradient.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
+    <gradient
+            android:endColor="#72CFFF"
+            android:startColor="#77F4C7"
+            android:type="linear" />
+</shape>
diff --git a/Habitica/res/drawable/separator_fancy_full.xml b/Habitica/res/drawable/separator_fancy_full.xml
new file mode 100644
index 000000000..4a3c54fa7
--- /dev/null
+++ b/Habitica/res/drawable/separator_fancy_full.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <size android:height="1dp" />
+            <solid android:color="@color/brand_700" />
+        </shape>
+    </item>
+<item android:drawable="@drawable/separator_fancy" />
+</layer-list>
diff --git a/Habitica/res/drawable/subscription_box_bg.xml b/Habitica/res/drawable/subscription_box_bg.xml
index 499e18b04..02260c724 100644
--- a/Habitica/res/drawable/subscription_box_bg.xml
+++ b/Habitica/res/drawable/subscription_box_bg.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?attr/colorWindowBackground"/>
-    <corners android:radius="20dip"/>
+    <solid android:color="@color/brand_200"/>
+    <corners android:radius="12dip"/>
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
 </shape>
diff --git a/Habitica/res/drawable/subscription_box_bg_selected.xml b/Habitica/res/drawable/subscription_box_bg_selected.xml
index 66e128860..2afd67ff6 100644
--- a/Habitica/res/drawable/subscription_box_bg_selected.xml
+++ b/Habitica/res/drawable/subscription_box_bg_selected.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?attr/colorWindowBackground"/>
+    <solid android:color="@color/white"/>
     <corners android:radius="8dip"/>
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
-    <stroke android:color="@color/text_brand_neon" android:width="3dp" />
-</shape>
\ No newline at end of file
+</shape>
diff --git a/Habitica/res/drawable/subscription_type_box_bg.xml b/Habitica/res/drawable/subscription_type_box_bg.xml
index 147c40f4a..514a48d10 100644
--- a/Habitica/res/drawable/subscription_type_box_bg.xml
+++ b/Habitica/res/drawable/subscription_type_box_bg.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?attr/colorWindowBackground"/>
+    <solid android:color="@color/brand_200"/>
     <corners android:radius="8dip"/>
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
-    <stroke android:color="@color/gray600_gray50" android:width="3dp" />
-</shape>
\ No newline at end of file
+</shape>
diff --git a/Habitica/res/layout/activity_gift_subscription.xml b/Habitica/res/layout/activity_gift_subscription.xml
index c3b4972b1..e76d416da 100644
--- a/Habitica/res/layout/activity_gift_subscription.xml
+++ b/Habitica/res/layout/activity_gift_subscription.xml
@@ -1,160 +1,177 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    tools:context="com.habitrpg.android.habitica.ui.activities.FixCharacterValuesActivity">
-    <com.google.android.material.appbar.AppBarLayout
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        tools:context="com.habitrpg.android.habitica.ui.activities.FixCharacterValuesActivity"
+        android:background="@color/brand_300">
+
+    <com.google.android.material.appbar.AppBarLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
 
         <androidx.appcompat.widget.Toolbar
-            android:id="@+id/toolbar"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:minHeight="?attr/actionBarSize"
-            android:background="?attr/colorContentBackground"
-            app:layout_scrollFlags="scroll|enterAlways"
-            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>
+                android:id="@+id/toolbar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:minHeight="?attr/actionBarSize"
+                android:background="@color/brand_300"
+                app:titleTextColor="@color/white"
+                app:layout_scrollFlags="scroll|enterAlways"
+                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
 
     </com.google.android.material.appbar.AppBarLayout>
+
     <androidx.core.widget.NestedScrollView
-        android:orientation="vertical"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent">
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
             android:orientation="vertical"
-            android:layout_marginTop="@dimen/spacing_large">
-            <com.habitrpg.common.habitica.views.AvatarView
-                android:id="@+id/avatar_view"
-                android:layout_width="88dp"
-                android:layout_height="84dp"
-                app:showBackground="false"
-                app:showPet="false"
-                app:showMount="false"
-                app:showSleeping="false"
-                android:clipChildren="false"
-                android:layout_gravity="center_horizontal"/>
-            <com.habitrpg.android.habitica.ui.views.UsernameLabel
-                android:id="@+id/display_name_text_view"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal"
-                />
-            <TextView
-                android:id="@+id/username_text_view"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:textColor="@color/text_quad"
-                android:textSize="12sp"
-                android:layout_gravity="center_horizontal"
-                android:layout_marginBottom="@dimen/spacing_large"/>
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal"
-                android:gravity="center_horizontal"
-                android:text="@string/gift_subscription_subtitle"
-                android:textColor="@color/text_quad"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"/>
-            <LinearLayout
-                android:id="@+id/subscriptionOptions"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+
+        <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:orientation="vertical"
-                android:layout_marginTop="24dp"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"
-                android:layout_marginBottom="@dimen/spacing_large">
+                android:layout_marginTop="@dimen/spacing_large">
+
+            <com.habitrpg.common.habitica.views.AvatarView
+                    android:id="@+id/avatar_view"
+                    android:layout_width="88dp"
+                    android:layout_height="84dp"
+                    app:showBackground="false"
+                    app:showPet="false"
+                    app:showMount="false"
+                    app:showSleeping="false"
+                    android:clipChildren="false"
+                    android:layout_gravity="center_horizontal" />
+
+            <TextView
+                    android:id="@+id/display_name_text_view"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textColor="@color/white"
+                    android:textSize="15sp"
+                    android:layout_gravity="center_horizontal" />
+
+            <TextView
+                    android:id="@+id/username_text_view"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textColor="@color/white"
+                    android:textSize="12sp"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginBottom="@dimen/spacing_large" />
+
+            <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:gravity="center_horizontal"
+                    android:text="@string/gift_subscription_subtitle"
+                    android:textColor="@color/white"
+                    android:layout_marginStart="@dimen/spacing_large"
+                    android:layout_marginEnd="@dimen/spacing_large" />
+
+            <LinearLayout
+                    android:id="@+id/subscriptionOptions"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:layout_marginTop="24dp"
+                    android:layout_marginStart="@dimen/spacing_large"
+                    android:layout_marginEnd="@dimen/spacing_large"
+                    android:layout_marginBottom="@dimen/spacing_large">
 
                 <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                    android:id="@+id/subscription1MonthView"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    app:recurringText="@string/one_month_one_time"
-                    app:gemCapText="@string/subscribe1month_gemcap"
-                    app:isNonRecurring="true"/>
+                        android:id="@+id/subscription3MonthView"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:recurringText="@string/three_months_one_time"
+                        app:isNonRecurring="true" />
 
                 <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                    android:id="@+id/subscription3MonthView"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    app:recurringText="@string/three_months_one_time"
-                    app:gemCapText="@string/subscribe3month_gemcap"
-                    app:isNonRecurring="true"
-                    app:hourGlassCount="1" />
+                        android:id="@+id/subscription6MonthView"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:recurringText="@string/six_months_one_time"
+                        app:isNonRecurring="true" >
+
+                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                            android:id="@+id/subscription1MonthView"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            app:recurringText="@string/one_month_one_time"
+                            app:isNonRecurring="true" />
+                </com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView>
+
                 <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                    android:id="@+id/subscription6MonthView"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    app:recurringText="@string/six_months_one_time"
-                    app:gemCapText="@string/subscribe6month_gemcap"
-                    app:isNonRecurring="true"
-                    app:hourGlassCount="2" />
-                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                    android:id="@+id/subscription12MonthView"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    app:recurringText="@string/twelve_months_one_time"
-                    app:gemCapText="@string/subscribe12month_gemcap"
-                    app:isNonRecurring="true"
-                    app:flagText="@string/save_20"
-                    app:hourGlassCount="4" >
+                        android:id="@+id/subscription12MonthView"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:recurringText="@string/twelve_months_one_time"
+                        app:gemCapText="50"
+                        app:isNonRecurring="true"
+                        app:flagText="@string/popular">
 
                 </com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView>
 
                 <Button
-                    android:text="@string/send_gift"
+                        android:text="@string/send_gift"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/subscription_button"
+                        style="@style/HabiticaButton.Purple.Small"
+                        android:textAllCaps="false"
+                        android:layout_marginTop="8dp" />
+            </LinearLayout>
+            <ImageView
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:id="@+id/subscription_button"
-                    style="@style/HabiticaButton.Purple.Small"
-                    android:textAllCaps="false"
-                    android:layout_marginTop="8dp"/>
-            </LinearLayout>
+                    android:src="@drawable/subscription_bg" />
             <LinearLayout
-                android:id="@+id/gift_subscription_container"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:background="@drawable/g1g1_menu_background"
-                android:paddingHorizontal="32dp"
-                android:paddingVertical="16dp"
-                android:gravity="center_horizontal"
-                android:orientation="vertical">
+                    android:id="@+id/gift_subscription_container"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:background="@drawable/g1g1_menu_background"
+                    android:paddingHorizontal="32dp"
+                    android:paddingVertical="16dp"
+                    android:gravity="center_horizontal"
+                    android:orientation="vertical">
+
                 <LinearLayout
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginBottom="8dp">
-                    <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:src="@drawable/g1g1_sparkle_left" />
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="@string/gift_one_get_one"
-                    android:gravity="center_horizontal"
-                    android:textColor="@color/white"
-                    android:textSize="17sp"
-                    android:layout_marginHorizontal="12dp"
-                    android:fontFamily="@string/font_family_medium"/>
+                        android:layout_marginBottom="8dp">
+
                     <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:src="@drawable/g1g1_sparkle_right" />
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:src="@drawable/g1g1_sparkle_left" />
+
+                    <TextView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/gift_one_get_one"
+                            android:gravity="center_horizontal"
+                            android:textColor="@color/white"
+                            android:textSize="17sp"
+                            android:layout_marginHorizontal="12dp"
+                            android:fontFamily="@string/font_family_medium" />
+
+                    <ImageView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:src="@drawable/g1g1_sparkle_right" />
                 </LinearLayout>
+
                 <TextView
-                    android:layout_width="300dp"
-                    android:layout_height="wrap_content"
-                    android:text="@string/gift_one_get_one_detailed_description"
-                    android:gravity="center_horizontal"
-                    android:textColor="@color/white"
-                    android:textSize="14sp"/>
+                        android:layout_width="300dp"
+                        android:layout_height="wrap_content"
+                        android:text="@string/gift_one_get_one_detailed_description"
+                        android:gravity="center_horizontal"
+                        android:textColor="@color/white"
+                        android:textSize="14sp" />
             </LinearLayout>
         </LinearLayout>
     </androidx.core.widget.NestedScrollView>
diff --git a/Habitica/res/layout/fragment_bottomsheet_subscription.xml b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
index ee5666b37..e0124d80b 100644
--- a/Habitica/res/layout/fragment_bottomsheet_subscription.xml
+++ b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
@@ -1,222 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    xmlns:tools="http://schemas.android.com/tools"
-    app:cardCornerRadius="28dp"
-    android:layout_height="match_parent"
-    app:cardBackgroundColor="@color/window_background">
-
-    <androidx.core.widget.NestedScrollView
-        android:id="@+id/scroll_view"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
+        app:cardCornerRadius="28dp"
         android:layout_height="match_parent"
-        android:scrollbarSize="3dp"
-        android:scrollbarThumbVertical="@color/scrollbarThumb"
-        android:scrollbars="vertical">
+        app:cardBackgroundColor="@color/brand_300">
 
-        <LinearLayout
+    <include
+            android:id="@+id/content"
+            layout="@layout/fragment_subscription_content"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="vertical">
-
-            <ImageView
-                android:layout_width="22dp"
-                android:layout_height="3dp"
-                android:layout_gravity="center_horizontal"
-                android:layout_margin="@dimen/spacing_large"
-                android:src="@color/offset_background"
-                android:importantForAccessibility="no" />
-
-            <com.google.android.material.card.MaterialCardView
-                android:id="@+id/subscriber_benefit_banner"
-                android:layout_width="match_parent"
-                android:layout_height="73dp"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"
-                android:layout_marginBottom="@dimen/spacing_medium"
-                app:cardBackgroundColor="@color/teal_1"
-                app:cardCornerRadius="24dp"
-                app:strokeWidth="0dp">
-
-                <RelativeLayout
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:clipChildren="true"
-                    android:clipToPadding="true">
-
-                    <ImageView
-                        android:id="@+id/banner_left_image"
-                        android:layout_width="wrap_content"
-                        android:layout_height="match_parent"
-                        android:layout_alignParentStart="true"
-                        android:layout_alignParentTop="true"
-                        android:layout_alignParentBottom="false"
-                        android:scaleType="centerCrop"
-                        android:src="@drawable/subscription_banner_image_left"
-                        android:importantForAccessibility="no" />
-
-                    <ImageView
-                        android:id="@+id/banner_right_image"
-                        android:layout_width="wrap_content"
-                        android:layout_height="match_parent"
-                        android:layout_alignParentTop="true"
-                        android:layout_alignParentEnd="true"
-                        android:scaleType="centerCrop"
-                        android:src="@drawable/subscription_banner_image_right"
-                        android:importantForAccessibility="no" />
-
-                    <LinearLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="match_parent"
-                        android:layout_toStartOf="@id/banner_right_image"
-                        android:layout_toEndOf="@id/banner_left_image"
-                        android:gravity="center"
-                        android:orientation="vertical">
-
-                        <TextView
-                            style="@style/Title1"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:fontFamily="sans-serif-medium"
-                            android:text="@string/buy_gems_with_gold"
-                            android:textColor="@color/white" />
-
-                        <TextView
-                            style="@style/Caption2.Regular"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:fontFamily="sans-serif-medium"
-                            android:text="@string/subscriber_benefit"
-                            android:textAllCaps="true"
-                            android:textColor="@color/white" />
-                    </LinearLayout>
-                </RelativeLayout>
-            </com.google.android.material.card.MaterialCardView>
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginBottom="100dp"
-                android:orientation="vertical"
-                android:paddingHorizontal="20dp">
-
-
-                <com.habitrpg.android.habitica.ui.views.DayNightTextView
-                    android:id="@+id/subscribe_benefits"
-                    style="@style/SubHeader1"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="@dimen/spacing_small"
-                    android:gravity="center"
-                    android:lineSpacingExtra="4dp"
-                    android:text="@string/subscribe_prompt_2"
-                    android:textColor="@color/gray700_gray10"
-                    />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="20dp"
-                    android:layout_marginBottom="20dp"
-                    android:src="@drawable/separator_fancy"
-                    android:importantForAccessibility="no" />
-
-
-                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriberBenefitView
-                    android:id="@+id/subscriber_benefits"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginTop="20dp"
-                    android:layout_marginBottom="12dp"
-                    android:src="@drawable/separator_fancy"
-                    android:importantForAccessibility="no" />
-
-                <ProgressBar
-                    android:id="@+id/loadingIndicator"
-                    style="?android:attr/progressBarStyle"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content" />
-
-                <LinearLayout
-                    android:id="@+id/subscriptionOptions"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:orientation="vertical">
-
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription1month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:gemCapText="25"
-                        app:recurringText="@string/month" />
-
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription3month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:gemCapText="25"
-                        app:recurringText="@string/three_months" />
-
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription12month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:flagText="@string/popular"
-                        app:gemCapText="50"
-                        app:recurringText="@string/twelve_months" />
-
-                    <Button
-                        android:id="@+id/subscribeButton"
-                        style="@style/HabiticaButton.Purple.Small"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_marginTop="8dp"
-                        android:text="@string/subscribe"
-                        android:textAllCaps="false" />
-
-                    <TextView
-                        android:id="@+id/subscription_disclaimer_view"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:textColor="@color/text_quad"
-                        android:textSize="14sp"
-                        android:layout_marginStart="@dimen/spacing_large"
-                        android:layout_marginEnd="@dimen/spacing_large"
-                        tools:text="This will contain text explaining subscriptions."
-                        android:layout_marginTop="8dp"
-                        android:layout_marginBottom="24dp"/>
-                </LinearLayout>
-
-                <TextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="@dimen/spacing_large"
-                    android:layout_marginEnd="@dimen/spacing_large"
-                    android:gravity="center_horizontal"
-                    android:text="@string/subscribe_title"
-                    android:textColor="@color/text_quad"
-                    android:textSize="12sp" />
-
-                <Button
-                    android:id="@+id/see_more_options"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="@color/transparent"
-                    android:text="@string/see_more_subscription_options"
-                    android:textAllCaps="false"
-                    android:textColor="@color/text_brand_neon" />
-            </LinearLayout>
-
-        </LinearLayout>
-
-    </androidx.core.widget.NestedScrollView>
-
+            android:layout_height="match_parent"
+            android:layout_marginTop="24dp" />
 </com.google.android.material.card.MaterialCardView>
diff --git a/Habitica/res/layout/fragment_subscription.xml b/Habitica/res/layout/fragment_subscription.xml
index dbf774f3f..a59aaa692 100644
--- a/Habitica/res/layout/fragment_subscription.xml
+++ b/Habitica/res/layout/fragment_subscription.xml
@@ -6,296 +6,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <androidx.core.widget.NestedScrollView
-        android:id="@+id/scroll_view"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scrollbarSize="3dp"
-        android:scrollbarThumbVertical="@color/scrollbarThumb"
-        android:scrollbars="vertical">
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="vertical">
-
-            <androidx.compose.ui.platform.ComposeView
-                android:id="@+id/promo_compose_view"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:visibility="gone" />
-
-            <RelativeLayout
-                android:id="@+id/promo_banner"
-                android:layout_width="match_parent"
-                android:layout_height="80dp"
-                android:layout_marginStart="10dp"
-                android:layout_marginEnd="10dp"
-                android:layout_marginBottom="8dp"
-                android:background="@drawable/g1g1_box"
-                android:clickable="true"
-                android:focusable="true"
-                android:clipChildren="true"
-                android:clipToOutline="true"
-                android:clipToPadding="true"
-                android:visibility="gone"
-                tools:visibility="visible">
-
-                <ImageView
-                    android:id="@+id/promo_banner_left_image"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_alignParentStart="true"
-                    android:layout_alignParentTop="true"
-                    android:layout_alignParentBottom="false"
-                    android:scaleType="center"
-                    android:importantForAccessibility="no" />
-
-                <ImageView
-                    android:id="@+id/promo_banner_right_image"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_alignParentTop="true"
-                    android:layout_alignParentEnd="true"
-                    android:scaleType="center"
-                    android:importantForAccessibility="no" />
-
-                <LinearLayout
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerInParent="true"
-                    android:gravity="center"
-                    android:orientation="vertical">
-
-                    <ImageView
-                        android:id="@+id/promo_banner_title_image"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_marginBottom="6dp" />
-
-                    <TextView
-                        android:id="@+id/promo_banner_title_text"
-                        style="@style/SubHeader1"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_marginStart="84dp"
-                        android:layout_marginEnd="84dp"
-                        android:layout_marginBottom="6dp"
-                        android:gravity="center"
-                        android:textColor="@color/white"
-                        android:visibility="gone" />
-
-                    <TextView
-                        android:id="@+id/promo_banner_duration_view"
-                        style="@style/Overline"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content" />
-                </LinearLayout>
-
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerInParent="true"
-                    android:layout_marginStart="60dp"
-                    android:layout_marginEnd="60dp"
-                    android:layout_marginBottom="12dp"
-                    android:fontFamily="@string/font_family_medium"
-                    android:gravity="center_horizontal"
-                    android:textColor="@color/white"
-                    android:textSize="16sp" />
-            </RelativeLayout>
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:padding="20dp">
-
-                <ImageView
-                    android:id="@+id/header_image_view"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginBottom="20dp"
-                    android:src="@drawable/subscribe_header"
-                    android:importantForAccessibility="no" />
-
-                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
-                    android:id="@+id/subscriptionDetails"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content" />
-
-                <com.habitrpg.android.habitica.ui.views.DayNightTextView
-                    android:id="@+id/subscribeBenefitsTitle"
-                    style="@style/SubHeader1"
-                    android:layout_width="250dp"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="8dp"
-                    android:gravity="center"
-                    android:lineSpacingExtra="4dp"
-                    android:text="@string/subscribe_prompt"
-                    app:dayTextColor="@color/text_brand"
-                    app:nightTextColor="@color/gray_400" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="20dp"
-                    android:layout_marginBottom="20dp"
-                    android:src="@drawable/separator_fancy"
-                    android:importantForAccessibility="no" />
-
-                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriberBenefitView
-                    android:id="@+id/subscriber_benefits"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginTop="20dp"
-                    android:layout_marginBottom="12dp"
-                    android:src="@drawable/separator_fancy"
-                    android:importantForAccessibility="no" />
-
-                <ProgressBar
-                    android:id="@+id/loadingIndicator"
-                    style="?android:attr/progressBarStyle"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content" />
-
-
-                <TextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:paddingTop="50dp"
-                    android:paddingBottom="10dp"
-                    android:text="@string/no_billing_subscriptions"
-                    android:visibility="gone" />
-
-                <Button
-                    style="@style/HabiticaButton.Purple"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginBottom="50dp"
-                    android:text="@string/visit_habitica_website"
-                    android:visibility="gone" />
-
-                <LinearLayout
-                    android:id="@+id/subscriptionOptions"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:orientation="vertical">
-
-                    <TextView
-                        style="@style/SubHeader1"
-                        android:layout_width="250dp"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="center_horizontal"
-                        android:layout_marginBottom="20dp"
-                        android:gravity="center_horizontal"
-                        android:text="@string/subscribe_options_title"
-                        android:textColor="@color/text_brand" />
-
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription1month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:gemCapText="25"
-                        app:recurringText="@string/month" />
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription3month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:gemCapText="25"
-                        app:recurringText="@string/three_months" />
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription6month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:gemCapText="25"
-                        app:recurringText="@string/six_months" />
-                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
-                        android:id="@+id/subscription12month"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        app:flagText="@string/popular"
-                        app:gemCapText="50"
-                        app:recurringText="@string/twelve_months" />
-                    <Button
-                        android:id="@+id/subscribeButton"
-                        style="@style/HabiticaButton.Purple.Small"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_marginTop="8dp"
-                        android:text="@string/subscribe"
-                        android:textAllCaps="false" />
-
-                    <TextView
-                        android:id="@+id/subscription_disclaimer_view"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:textColor="@color/text_quad"
-                        android:textSize="14sp"
-                        tools:text="This will contain text explaining subscriptions."
-                        android:layout_marginTop="8dp"
-                        android:layout_marginBottom="8dp"/>
-                </LinearLayout>
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="24dp"
-                    android:layout_marginBottom="6dp"
-                    android:src="@drawable/gift_sub_gift"
-                    android:importantForAccessibility="no" />
-
-                <TextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="@dimen/spacing_large"
-                    android:layout_marginEnd="@dimen/spacing_large"
-                    android:gravity="center_horizontal"
-                    android:text="@string/subscribe_gift_description"
-                    android:textColor="@color/text_quad" />
-
-                <Button
-                    android:id="@+id/gift_subscription_button"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="@color/transparent"
-                    android:text="@string/gift_subscription"
-                    android:textAllCaps="false"
-                    android:textColor="@color/text_brand_neon" />
-            </LinearLayout>
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:background="?attr/colorWindowBackground">
-
-                <TextView
-                    android:id="@+id/supportTextView"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:layout_marginTop="16dp"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:gravity="center"
-                    android:lineSpacingExtra="4dp"
-                    android:paddingStart="16dp"
-                    android:paddingTop="16dp"
-                    android:paddingEnd="16dp"
-                    android:paddingBottom="16dp"
-                    android:text="@string/subscribe_title"
-                    android:textColor="@color/text_quad"
-                    android:textSize="14sp" />
-            </LinearLayout>
-        </LinearLayout>
-    </androidx.core.widget.NestedScrollView>
+    <include
+            android:id="@+id/content"
+            layout="@layout/fragment_subscription_content" />
 </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
diff --git a/Habitica/res/layout/fragment_subscription_content.xml b/Habitica/res/layout/fragment_subscription_content.xml
new file mode 100644
index 000000000..7a89bd30b
--- /dev/null
+++ b/Habitica/res/layout/fragment_subscription_content.xml
@@ -0,0 +1,278 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:tools="http://schemas.android.com/tools"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:id="@+id/scroll_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scrollbarSize="3dp"
+        android:scrollbarThumbVertical="@color/scrollbarThumb"
+        android:background="@color/brand_300"
+        android:scrollbars="vertical">
+    <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+        <androidx.compose.ui.platform.ComposeView
+                android:id="@+id/promo_compose_view"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:visibility="gone" />
+
+        <RelativeLayout
+                android:id="@+id/promo_banner"
+                android:layout_width="match_parent"
+                android:layout_height="80dp"
+                android:layout_marginHorizontal="20dp"
+                android:layout_marginBottom="8dp"
+                android:background="@drawable/g1g1_box"
+                android:clickable="true"
+                android:focusable="true"
+                android:clipChildren="true"
+                android:clipToOutline="true"
+                android:clipToPadding="true"
+                android:visibility="gone"
+                tools:visibility="visible">
+
+            <ImageView
+                    android:id="@+id/promo_banner_left_image"
+                    android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:layout_alignParentStart="true"
+                    android:layout_alignParentTop="true"
+                    android:layout_alignParentBottom="false"
+                    android:scaleType="center"
+                    android:importantForAccessibility="no" />
+
+            <ImageView
+                    android:id="@+id/promo_banner_right_image"
+                    android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:layout_alignParentTop="true"
+                    android:layout_alignParentEnd="true"
+                    android:scaleType="center"
+                    android:importantForAccessibility="no" />
+
+            <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_centerInParent="true"
+                    android:gravity="center"
+                    android:orientation="vertical">
+
+                <ImageView
+                        android:id="@+id/promo_banner_title_image"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginBottom="6dp" />
+
+                <TextView
+                        android:id="@+id/promo_banner_title_text"
+                        style="@style/SubHeader1"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="84dp"
+                        android:layout_marginEnd="84dp"
+                        android:layout_marginBottom="6dp"
+                        android:gravity="center"
+                        android:textColor="@color/white"
+                        android:visibility="gone" />
+
+                <TextView
+                        android:id="@+id/promo_banner_duration_view"
+                        style="@style/Overline"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content" />
+            </LinearLayout>
+
+            <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_centerInParent="true"
+                    android:layout_marginStart="60dp"
+                    android:layout_marginEnd="60dp"
+                    android:layout_marginBottom="12dp"
+                    android:fontFamily="@string/font_family_medium"
+                    android:gravity="center_horizontal"
+                    android:textColor="@color/white"
+                    android:textSize="16sp" />
+        </RelativeLayout>
+
+        <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:padding="24dp">
+
+            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
+                    android:id="@+id/subscriptionDetails"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+
+            <ImageView
+                    android:id="@+id/header_image_view"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginBottom="20dp"
+                    android:src="@drawable/subscribe_header_dark"
+                    android:importantForAccessibility="no" />
+
+
+            <include
+                    android:id="@+id/gift_segment_subscribed"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    layout="@layout/gift_segment"
+                    android:visibility="gone" />
+
+            <TextView
+                    android:id="@+id/subscribeBenefitsTitle"
+                    style="@style/SubHeader1"
+                    android:layout_width="250dp"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginTop="8dp"
+                    android:gravity="center"
+                    android:lineSpacingExtra="4dp"
+                    android:text="@string/subscribe_prompt"
+                    android:textColor="@color/white" />
+
+            <include layout="@layout/separator_fancy" />
+
+            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriberBenefitView
+                    android:id="@+id/subscriber_benefits"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+
+            <TextView
+                    android:id="@+id/subscribeBenefitsFooter"
+                    style="@style/Title1"
+                    android:textSize="18sp"
+                    android:layout_height="wrap_content"
+                    android:layout_width="match_parent"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginTop="16dp"
+                    android:gravity="center"
+                    android:visibility="gone"
+                    android:text="@string/enjoy_benefits"
+                    android:textColor="@color/white" />
+
+            <ProgressBar
+                    android:id="@+id/loadingIndicator"
+                    style="?android:attr/progressBarStyle"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+
+            <TextView
+                    android:id="@+id/noBillingSubscriptions"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingTop="50dp"
+                    android:paddingBottom="10dp"
+                    android:textColor="@color/white"
+                    android:gravity="center"
+                    android:text="@string/no_billing_subscriptions"
+                    android:visibility="gone" />
+
+            <Button
+                    android:id="@+id/visitHabiticaWebsiteButton"
+                    style="@style/HabiticaButton.Yellow"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginBottom="50dp"
+                    android:text="@string/visit_habitica_website"
+                    android:visibility="gone" />
+
+            <LinearLayout
+                    android:id="@+id/subscriptionOptions"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:layout_marginTop="@dimen/spacing_large">
+
+                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription1month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:gemCapText="24"
+                        app:recurringText="@string/month" />
+
+                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription3month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:gemCapText="24"
+                        app:recurringText="@string/three_months" />
+
+                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription6month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:gemCapText="24"
+                        app:recurringText="@string/six_months" />
+
+                <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription12month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:flagText="@string/popular"
+                        app:gemCapText="50"
+                        app:recurringText="@string/twelve_months" />
+
+                <Button
+                        android:id="@+id/subscribeButton"
+                        style="@style/HabiticaButton"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="8dp"
+                        android:text="@string/subscribe"
+                        android:textColor="@color/brand_100"
+                        android:backgroundTint="@color/yellow_100"
+                        android:textAllCaps="false" />
+
+                <TextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:textColor="@color/white"
+                        android:textSize="13sp"
+                        android:textStyle="italic"
+                        android:gravity="center"
+                        android:text="@string/subscribe_title"
+                        android:layout_marginTop="6dp"
+                        android:layout_marginBottom="32dp" />
+            </LinearLayout>
+
+            <include
+                    android:id="@+id/gift_segment_unsubscribed"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    layout="@layout/gift_segment" />
+        </LinearLayout>
+
+        <ImageView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:src="@drawable/subscription_bg"
+                />
+        <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/brand_400"
+                android:orientation="vertical"
+                android:paddingTop="6dp"
+                android:paddingBottom="32dp"
+                android:paddingHorizontal="24dp">
+            <TextView
+                    android:id="@+id/subscription_disclaimer_view"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:textColor="@color/white"
+                    android:textSize="13sp"
+                    android:textStyle="italic"
+                    android:gravity="center"/>
+        </LinearLayout>
+    </LinearLayout>
+</androidx.core.widget.NestedScrollView>
diff --git a/Habitica/res/layout/gift_segment.xml b/Habitica/res/layout/gift_segment.xml
new file mode 100644
index 000000000..9755afe30
--- /dev/null
+++ b/Habitica/res/layout/gift_segment.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:orientation="vertical">
+    <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_horizontal"
+            android:layout_marginTop="16dp"
+            android:layout_marginBottom="2dp"
+            android:src="@drawable/gift_sub_gift"
+            android:importantForAccessibility="no" />
+
+    <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            style="@style/Headline6"
+            android:gravity="center_horizontal"
+            android:textSize="18sp"
+            android:text="@string/subscribe_gift_description"
+            android:layout_marginVertical="14dp"
+            android:textColor="@color/white" />
+
+    <Button
+            android:id="@+id/gift_subscription_button"
+            style="@style/HabiticaButton"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:backgroundTint="@color/brand_200"
+            android:text="@string/gift_subscription"
+            android:textAllCaps="false"
+            android:textColor="@color/white" />
+</LinearLayout>
diff --git a/Habitica/res/layout/purchase_subscription_view.xml b/Habitica/res/layout/purchase_subscription_view.xml
index b9aa68220..517537663 100644
--- a/Habitica/res/layout/purchase_subscription_view.xml
+++ b/Habitica/res/layout/purchase_subscription_view.xml
@@ -1,94 +1,136 @@
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:id="@+id/wrapper"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:orientation="horizontal" android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:background="@drawable/subscription_type_box_bg"
-    android:gravity="center"
-    android:minHeight="106dp"
-    android:layout_marginBottom="8dp">
-
-    <FrameLayout
-        android:layout_width="50dp"
-        android:layout_height="match_parent"
-        android:id="@+id/subscriptionSelectedFrameView">
-        <View
-            android:id="@+id/subscriptionSelectedView"
-            android:layout_width="16dp"
-            android:layout_height="16dp"
-            android:background="@drawable/subscription_unselected"
-            android:layout_gravity="center"/>
-    </FrameLayout>
-
-    <LinearLayout
-        android:orientation="vertical"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:id="@+id/wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="3dp"
-        android:layout_marginStart="@dimen/spacing_large"
-        android:layout_marginTop="8dp"
+        android:background="@drawable/subscription_type_box_bg"
+        android:clipChildren="true"
+        android:clipToPadding="true"
+        android:clipToOutline="true"
         android:layout_marginBottom="8dp">
 
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
-
-            <TextView
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:layout_height="wrap_content"
-                android:id="@+id/priceLabel"
-                android:textColor="@color/text_primary"
-                android:textSize="20sp"
-                android:fontFamily="@string/font_family_medium"
-                tools:text="$ 21" />
-            <ImageView
-                android:id="@+id/flag_flap"
-                android:layout_width="wrap_content"
-                android:layout_height="24dp"
-                android:src="@drawable/flag_flap"
-                android:layout_gravity="center_vertical"
-                android:importantForAccessibility="no" />
-            <TextView
-                android:id="@+id/flag_textview"
-                android:layout_width="wrap_content"
-                android:layout_height="24dp"
-                android:paddingEnd="@dimen/spacing_medium"
-                android:paddingStart="0dp"
-                android:background="@color/green_50"
-                android:textColor="@color/white"
-                style="@style/Caption2"
-                android:layout_gravity="center_vertical"
-                android:gravity="center_vertical"
-                tools:text="Save 20%"/>
-        </LinearLayout>
-        <TextView
+    <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:id="@+id/descriptionTextView"
-            tools:text="recurring every month"
-            />
+            android:orientation="vertical">
+
         <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
-            <TextView
-                android:id="@+id/gemCapTextView"
-                android:layout_width="wrap_content"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                tools:text="@string/subscribe1month_gemcap"
-                style="@style/Pill"
-                android:textSize="12sp"
-                android:layout_marginTop="4dp"
-                android:layout_marginEnd="8dp"/>
+                android:paddingVertical="12dp"
+                android:paddingStart="38dp"
+                android:paddingEnd="0dp"
+                android:orientation="vertical"
+                android:minHeight="126dp">
+
+            <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:gravity="center_vertical">
+
+                <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/priceLabel"
+                        android:textColor="@color/brand_600"
+                        android:textSize="22sp"
+                        android:fontFamily="@string/font_family_regular"
+                        android:textStyle="bold"
+                        tools:text="$21.99" />
+
+                <TextView
+                        android:id="@+id/sale_price_label"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:paddingStart="@dimen/spacing_medium"
+                        android:paddingEnd="0dp"
+                        android:textSize="15sp"
+                        android:fontFamily="@string/font_family_medium"
+                        android:textColor="@color/gray_400" />
+
+                <ImageView
+                        android:id="@+id/flag_flap"
+                        android:layout_width="wrap_content"
+                        android:layout_height="24dp"
+                        android:src="@drawable/flag_flap"
+                        android:layout_gravity="center_vertical"
+                        android:importantForAccessibility="no" />
+
+                <TextView
+                        android:id="@+id/flag_textview"
+                        android:layout_width="wrap_content"
+                        android:layout_height="24dp"
+                        android:paddingEnd="@dimen/spacing_medium"
+                        android:paddingStart="8dp"
+                        android:background="@drawable/flag_flap_background"
+                        android:textColor="@color/teal_1"
+                        style="@style/Caption2"
+                        android:layout_gravity="center_vertical"
+                        android:gravity="center_vertical"
+                        tools:text="Save 20%" />
+            </LinearLayout>
+
             <TextView
-                android:id="@+id/hourglassTextView"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                tools:text="+1 Mystic Hourglass"
-                style="@style/Pill"
-                android:textSize="12sp"
-                android:layout_marginTop="4dp"/>
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:id="@+id/descriptionTextView"
+                    android:textColor="@color/brand_600"
+                    android:textSize="13sp"
+                    android:textStyle="bold"
+                    tools:text="recurring every month" />
+
+            <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+
+                <TextView
+                        android:id="@+id/gemCapTextView"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        tools:text="@string/subscribe1month_gemcap"
+                        android:textSize="12sp"
+                        android:textColor="@color/brand_600"
+                        android:layout_marginTop="4dp"
+                        android:drawableStart="@drawable/sub_plus"
+                        android:drawableTint="@color/brand_400"
+                        android:drawablePadding="8dp" />
+
+                <TextView
+                        android:id="@+id/hourglassTextView"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        tools:text="+1 Mystic Hourglass"
+                        android:textColor="@color/brand_600"
+                        android:textSize="12sp"
+                        android:layout_marginTop="4dp"
+                        android:drawableStart="@drawable/sub_plus"
+                        android:drawableTint="@color/brand_400"
+                        android:drawablePadding="8dp" />
+            </LinearLayout>
         </LinearLayout>
+
+        <TextView
+                android:id="@+id/hourglass_promo_view"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:paddingHorizontal="16dp"
+                android:paddingVertical="12dp"
+                android:text="@string/get_12_mystic_hourglasses"
+                android:textColor="@color/teal_1"
+                android:textSize="15sp"
+                android:fontFamily="@string/font_family_medium"
+                android:gravity="center"
+                android:background="@drawable/promo_gradient"
+                android:textColorLink="@color/yellow_100"
+                android:visibility="gone"/>
     </LinearLayout>
 
-</LinearLayout>
+    <ImageView
+            android:id="@+id/selected_indicator"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:src="@drawable/subscription_selected_indicator"
+            android:visibility="gone" />
+</FrameLayout>
diff --git a/Habitica/res/layout/separator_fancy.xml b/Habitica/res/layout/separator_fancy.xml
new file mode 100644
index 000000000..de05e6ae1
--- /dev/null
+++ b/Habitica/res/layout/separator_fancy.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:layout_marginBottom="8dp"
+        android:orientation="horizontal"
+        android:gravity="center_vertical">
+    <FrameLayout
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_weight="1"
+            android:background="@color/brand_400"
+            android:importantForAccessibility="no" />
+    <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:src="@drawable/separator_fancy"
+            android:importantForAccessibility="no"
+            android:layout_marginHorizontal="10dp"/>
+    <FrameLayout
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_weight="1"
+            android:background="@color/brand_400"
+            android:importantForAccessibility="no" />
+</LinearLayout>
diff --git a/Habitica/res/layout/subscription_benefits.xml b/Habitica/res/layout/subscription_benefits.xml
index 201081719..c4b9074f1 100644
--- a/Habitica/res/layout/subscription_benefits.xml
+++ b/Habitica/res/layout/subscription_benefits.xml
@@ -1,210 +1,250 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:parentTag="android.widget.LinearLayout"
-    android:orientation="vertical">
-    <LinearLayout
-        android:id="@+id/benefit_gems_for_gold_wrapper"
+        xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+        android:layout_height="match_parent"
+        tools:parentTag="android.widget.LinearLayout"
+        android:orientation="vertical">
+
+    <LinearLayout
+            android:id="@+id/benefit_gems_for_gold_wrapper"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
 
         <ImageView
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center"
-            android:src="@drawable/sub_benefits_gems"
-            android:importantForAccessibility="no" />
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center"
+                android:src="@drawable/sub_benefits_gems"
+                android:importantForAccessibility="no" />
 
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem1"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
 
             <TextView
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem1_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitem1"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitem1_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
+
         <com.habitrpg.common.habitica.views.PixelArtView
-            android:id="@+id/sub_benefits_mystery_item_icon"
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center" />
+                android:id="@+id/sub_benefits_mystery_item_icon"
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center" />
+
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem3"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
+
             <TextView
-                android:id="@+id/sub_benefits_mystery_item_text"
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem3_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitem3"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    android:id="@+id/sub_benefits_mystery_item_text"
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitem3_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/benefit_hourglasses_wrapper"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+            android:id="@+id/benefit_hourglasses_wrapper"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
+
         <ImageView
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center"
-            android:src="@drawable/sub_benefits_hourglasses"
-            android:importantForAccessibility="no" />
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center"
+                android:src="@drawable/sub_benefits_hourglasses"
+                android:importantForAccessibility="no" />
+
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem2"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
+
             <TextView
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem2_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitem2"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitem2_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/benefit_faint_wrapper"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+            android:id="@+id/benefit_faint_wrapper"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
+
         <ImageView
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center"
-            android:src="@drawable/sub_benefits_faint"
-            android:importantForAccessibility="no" />
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center"
+                android:src="@drawable/sub_benefits_faint"
+                android:importantForAccessibility="no" />
+
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitemFaint"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
+
             <TextView
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitemFaint_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitemFaint"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitemFaint_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/benefit_armoire_wrapper"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+            android:id="@+id/benefit_armoire_wrapper"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
+
         <com.habitrpg.common.habitica.views.PixelArtView
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center"
-            android:src="@drawable/sub_benefits_armoire" />
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center"
+                android:src="@drawable/sub_benefits_armoire" />
+
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitemArmoire"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
+
             <TextView
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitemArmoire_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitemArmoire"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitemArmoire_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
-
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:layout_marginVertical="6dp">
         <ImageView
-            android:layout_width="68dp"
-            android:layout_height="68dp"
-            android:scaleType="center"
-            android:src="@drawable/sub_benefits_drops"
-            android:importantForAccessibility="no" />
+                android:layout_width="72dp"
+                android:layout_height="72dp"
+                android:background="@drawable/subscription_box_bg"
+                android:scaleType="center"
+                android:src="@drawable/sub_benefits_drops"
+                android:importantForAccessibility="no" />
 
         <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="12dp"
-                android:layout_marginVertical="6dp"
-            android:orientation="vertical">
-
-            <TextView
-                style="@style/Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem5"
-                android:textColor="@color/text_primary" />
+                android:layout_gravity="center_vertical"
+                android:layout_marginStart="12dp"
+                android:orientation="vertical">
 
             <TextView
-                style="@style/Caption2.Regular"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscribe_listitem5_description"
-                android:textColor="@color/gray100_gray400" />
+                    style="@style/Body1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscribe_listitem5"
+                    android:textSize="15sp"
+                    android:textColor="@color/white" />
+
+            <TextView
+                    style="@style/Caption2.Regular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textSize="13sp"
+                    android:text="@string/subscribe_listitem5_description"
+                    android:textColor="@color/white" />
         </LinearLayout>
     </LinearLayout>
 </merge>
diff --git a/Habitica/res/layout/subscription_details.xml b/Habitica/res/layout/subscription_details.xml
index 264a1fdd0..dbdd77410 100644
--- a/Habitica/res/layout/subscription_details.xml
+++ b/Habitica/res/layout/subscription_details.xml
@@ -1,313 +1,311 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/subscriptionDetails"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    tools:background="@color/content_background">
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:id="@+id/subscriptionDetails"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        tools:background="@color/content_background"
+        android:paddingBottom="16dp">
 
     <com.google.android.material.card.MaterialCardView
-        android:id="@+id/subscription_credit_card"
-        android:layout_width="match_parent"
-        android:layout_height="75dp"
-        android:layout_marginTop="8dp"
-        android:layout_marginBottom="8dp"
-        app:cardCornerRadius="8dp"
-        app:strokeColor="@color/green_50"
-        app:strokeWidth="1dp">
+            android:id="@+id/subscription_credit_card"
+            android:layout_width="match_parent"
+            android:layout_height="75dp"
+            android:layout_marginTop="8dp"
+            android:layout_marginBottom="8dp"
+            app:cardCornerRadius="8dp"
+            app:strokeColor="@color/green_50"
+            app:strokeWidth="1dp">
 
         <TextView
-            android:id="@+id/subscription_credit_text_view"
-            style="@style/subscriptionBoxText.Subtitle"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:gravity="center"
-            android:padding="4dp"
-            android:text="@string/subscription_credit_canceling"
-            android:textColor="@color/green_50" />
+                android:id="@+id/subscription_credit_text_view"
+                style="@style/subscriptionBoxText.Subtitle"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:gravity="center"
+                android:padding="4dp"
+                android:text="@string/subscription_credit_canceling"
+                android:textColor="@color/green_50" />
 
     </com.google.android.material.card.MaterialCardView>
+
     <LinearLayout
-        style="@style/subscriptionBox"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+            style="@style/subscriptionBox"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
 
         <LinearLayout
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            android:orientation="vertical">
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
 
             <TextView
-                style="@style/subscriptionBoxText.Title"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/subscription" />
+                    style="@style/subscriptionBoxText.Title"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/subscription" />
 
             <TextView
-                android:id="@+id/subscriptionDurationTextView"
-                style="@style/subscriptionBoxText.Subtitle"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                tools:text="Recurring every 3 months" />
+                    android:id="@+id/subscriptionDurationTextView"
+                    style="@style/subscriptionBoxText.Subtitle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    tools:text="Recurring every 3 months" />
         </LinearLayout>
 
         <TextView
-            android:id="@+id/subscriptionStatusActive"
-            style="@style/Pill.Selected.Green"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:text="@string/active" />
+                android:id="@+id/subscriptionStatusActive"
+                style="@style/Pill.Selected.Green"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:text="@string/active" />
 
         <TextView
-            android:id="@+id/subscriptionStatusNotRecurring"
-            style="@style/Pill.Selected.Yellow"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:text="@string/not_recurring"
-            android:visibility="gone" />
+                android:id="@+id/subscriptionStatusNotRecurring"
+                style="@style/Pill.Selected.Yellow"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:text="@string/not_recurring"
+                android:visibility="gone" />
 
         <TextView
-            android:id="@+id/subscriptionStatusInactive"
-            style="@style/Pill.Selected.Red"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:text="@string/inactive"
-            android:visibility="gone" />
+                android:id="@+id/subscriptionStatusInactive"
+                style="@style/Pill.Selected.Red"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:text="@string/inactive"
+                android:visibility="gone" />
 
         <TextView
-            android:id="@+id/subscriptionStatusCancelled"
-            style="@style/Pill.Selected.Red"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:text="@string/cancelled"
-            android:visibility="gone" />
+                android:id="@+id/subscriptionStatusCancelled"
+                style="@style/Pill.Selected.Red"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:text="@string/cancelled"
+                android:visibility="gone" />
 
         <TextView
-            android:id="@+id/subscription_status_group_plan"
-            style="@style/Pill.Selected"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:text="@string/group_plan"
-            android:visibility="gone" />
+                android:id="@+id/subscription_status_group_plan"
+                style="@style/Pill.Selected"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:text="@string/group_plan"
+                android:visibility="gone" />
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/payment_processor_wrapper"
-        style="@style/subscriptionBox"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+            android:id="@+id/payment_processor_wrapper"
+            style="@style/subscriptionBox"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
 
         <LinearLayout
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            android:orientation="vertical">
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
 
             <TextView
-                style="@style/subscriptionBoxText.Title"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/payment_method" />
+                    style="@style/subscriptionBoxText.Title"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/payment_method" />
 
             <TextView
-                android:id="@+id/subscription_payment_method_textview"
-                style="@style/subscriptionBoxText.Subtitle"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                tools:text="Recurring every 3 months" />
+                    android:id="@+id/subscription_payment_method_textview"
+                    style="@style/subscriptionBoxText.Subtitle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    tools:text="Recurring every 3 months" />
         </LinearLayout>
 
         <ImageView
-            android:id="@+id/paymentProcessorImageView"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical" />
+                android:id="@+id/paymentProcessorImageView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical" />
     </LinearLayout>
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <View
-            android:id="@+id/divider"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:visibility="invisible" />
-
-        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:baselineAligned="false">
-            <LinearLayout
-                android:id="@+id/months_subscribed_layout"
-                style="@style/subscriptionBox"
+            android:orientation="vertical">
+
+        <View
+                android:id="@+id/divider"
                 android:layout_width="0dp"
-                android:layout_weight="1"
-                android:layout_height="fill_parent"
-                android:orientation="vertical"
-                android:layout_marginEnd="@dimen/spacing_medium"
-                android:gravity="center">
+                android:layout_height="0dp"
+                android:visibility="invisible" />
+
+        <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:baselineAligned="false">
+
+            <LinearLayout
+                    android:id="@+id/months_subscribed_layout"
+                    style="@style/subscriptionBox"
+                    android:layout_width="0dp"
+                    android:layout_weight="1"
+                    android:layout_height="fill_parent"
+                    android:orientation="vertical"
+                    android:layout_marginEnd="@dimen/spacing_medium"
+                    android:gravity="center">
+
                 <TextView
-                    android:id="@+id/monthsSubscribedTextView"
-                    style="@style/subscriptionBoxCompactNumber"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:drawableStartCompat="@drawable/calendar_ic"
-                    android:drawablePadding="@dimen/spacing_small"
-                    android:gravity="center"
-                    tools:text="2" />
+                        android:id="@+id/monthsSubscribedTextView"
+                        style="@style/subscriptionBoxCompactNumber"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        app:drawableStartCompat="@drawable/calendar_ic"
+                        android:layout_marginBottom="2dp"
+                        android:drawablePadding="@dimen/spacing_small"
+                        android:gravity="center"
+                        tools:text="2" />
+
                 <TextView
-                    style="@style/subscriptionBoxCompactText"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="@string/months_subscribed"
-                    android:gravity="center"
-                    android:fontFamily="sans-serif"
-                    android:textStyle="bold"
-                    android:textSize="12sp"/>
+                        style="@style/subscriptionBoxCompactText"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/months_subscribed"
+                        android:gravity="center" />
             </LinearLayout>
 
             <LinearLayout
-                style="@style/subscriptionBox"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:layout_height="fill_parent"
-                android:orientation="vertical"
-                android:gravity="center">
+                    style="@style/subscriptionBox"
+                    android:layout_width="0dp"
+                    android:layout_weight="1"
+                    android:layout_height="fill_parent"
+                    android:orientation="vertical"
+                    android:gravity="center">
+
                 <TextView
-                    android:id="@+id/gemCapTextView"
-                    style="@style/subscriptionBoxCompactNumber"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:drawableStartCompat="@drawable/gem_ic"
-                    android:drawablePadding="@dimen/spacing_small"
-                    android:gravity="center"
-                    tools:text="2" />
+                        android:id="@+id/gemCapTextView"
+                        style="@style/subscriptionBoxCompactNumber"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        app:drawableStartCompat="@drawable/gem_ic"
+                        android:drawablePadding="@dimen/spacing_small"
+                        android:gravity="center"
+                        android:layout_marginBottom="2dp"
+                        tools:text="2" />
+
                 <TextView
-                    style="@style/subscriptionBoxCompactText"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="@string/monthly_gem_cap"
-                    android:gravity="center"
-                    android:fontFamily="sans-serif"
-                    android:textStyle="bold"
-                    android:textSize="12sp"/>
+                        style="@style/subscriptionBoxCompactText"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/monthly_gem_cap"
+                        android:gravity="center" />
             </LinearLayout>
         </LinearLayout>
 
 
         <RelativeLayout
-            android:id="@+id/next_hourglass_container"
-            style="@style/subscriptionBox"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
+                android:id="@+id/next_hourglass_container"
+                style="@style/subscriptionBox"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content">
 
             <ImageView
-                android:layout_width="53dp"
-                android:layout_height="53dp"
-                android:layout_centerVertical="true"
-                android:scaleType="center"
-                android:src="@drawable/hourglass_fancy_left" />
+                    android:layout_width="53dp"
+                    android:layout_height="53dp"
+                    android:layout_centerVertical="true"
+                    android:scaleType="center"
+                    android:src="@drawable/hourglass_fancy_left" />
 
             <ImageView
-                android:layout_width="53dp"
-                android:layout_height="53dp"
-                android:layout_alignParentEnd="true"
-                android:layout_centerVertical="true"
-                android:scaleType="center"
-                android:src="@drawable/hourglass_fancy_right" />
+                    android:layout_width="53dp"
+                    android:layout_height="53dp"
+                    android:layout_alignParentEnd="true"
+                    android:layout_centerVertical="true"
+                    android:scaleType="center"
+                    android:src="@drawable/hourglass_fancy_right" />
 
             <TextView
-                android:id="@+id/next_hourglass_textview"
-                style="@style/subscriptionBoxCompactTitle"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_centerHorizontal="true"
-                android:layout_marginTop="2dp"
-                tools:text="4" />
+                    android:id="@+id/next_hourglass_textview"
+                    style="@style/subscriptionBoxCompactTitle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_centerHorizontal="true"
+                    android:layout_marginTop="2dp"
+                    tools:text="4" />
 
             <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_below="@id/next_hourglass_textview"
-                android:layout_centerHorizontal="true"
-                android:text="@string/next_hourglass"
-                android:fontFamily="sans-serif"
-                android:textStyle="bold"
-                android:textSize="12sp"
-                android:textColor="@color/text_secondary"/>
+                    android:id="@+id/next_hourglass_label"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_below="@id/next_hourglass_textview"
+                    android:layout_centerHorizontal="true"
+                    android:text="@string/next_hourglass"
+                    android:fontFamily="sans-serif"
+                    android:textStyle="bold"
+                    android:textSize="12sp"
+                    android:textColor="@color/white" />
         </RelativeLayout>
 
     </LinearLayout>
 
     <TextView
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="4dp"
-        android:fontFamily="sans-serif"
-        android:gravity="center"
-        android:paddingStart="30dp"
-        android:paddingEnd="30dp"
-        android:visibility="gone"
-        android:text="@string/subscribers_mythic_hourglasses" />
-
-    <ImageView
-        android:id="@+id/heart_icon"
-        android:layout_width="20dp"
-        android:layout_height="20dp"
-        android:layout_gravity="center_horizontal"
-        android:layout_marginTop="12dp" />
-
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_horizontal"
-        android:layout_marginTop="4dp"
-        android:layout_marginBottom="12dp"
-        android:fontFamily="sans-serif-medium"
-        android:text="@string/thanks_for_supporting"
-        android:textColor="@color/text_quad" />
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="4dp"
+            android:fontFamily="sans-serif"
+            android:gravity="center"
+            android:paddingStart="30dp"
+            android:paddingEnd="30dp"
+            android:visibility="gone"
+            android:text="@string/subscribers_mythic_hourglasses" />
 
     <LinearLayout
-        android:id="@+id/change_subscription_wrapper"
-        style="@style/subscriptionBox"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/change_subscription_title"
-            style="@style/subscriptionBoxText.Title"
+            android:id="@+id/change_subscription_wrapper"
+            style="@style/subscriptionBox"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/cancel_subscription" />
+            android:orientation="vertical">
 
         <TextView
-            android:id="@+id/change_subscription_description"
-            style="@style/subscriptionBoxText.Subtitle"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="8dp"
-            android:layout_marginBottom="8dp"
-            android:text="@string/cancel_subscription_notgoogle_description" />
+                android:id="@+id/change_subscription_title"
+                style="@style/subscriptionBoxText.Title"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="@string/cancel_subscription" />
+
+        <TextView
+                android:id="@+id/change_subscription_description"
+                style="@style/subscriptionBoxText.Subtitle"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="8dp"
+                android:layout_marginBottom="8dp"
+                android:text="@string/cancel_subscription_notgoogle_description" />
 
         <Button
-            android:id="@+id/change_subscription_button"
-            style="@style/HabiticaButton.Yellow"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:layout_marginTop="@dimen/spacing_medium"/>
+                android:id="@+id/change_subscription_button"
+                style="@style/HabiticaButton.Yellow"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:textColor="@color/brand_100"
+                android:layout_marginTop="@dimen/spacing_medium" />
     </LinearLayout>
 
+    <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/subscription_details_footer"
+            android:textColor="@color/white"
+            android:textSize="13sp"
+            android:textStyle="italic"
+            android:layout_marginTop="4dp"
+            android:layout_marginHorizontal="16dp"
+            android:gravity="center" />
 </LinearLayout>
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index ce238d4eb..dc38fbc05 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -391,13 +391,13 @@
     <string name="belongs_to_challenge">Belongs to Challenge</string>
     <string name="has_reminder">Has Reminder</string>
     <string name="has_tag">Has Tag</string>
-    <string name="subscribe_title">Subscribing supports our small team and help keeps Habitica running, thank you!</string>
-    <string name="subscribe_prompt">Become a subscriber to receive these exclusive benefits!</string>
+    <string name="subscribe_title">Subscribing supports our small team and help keeps Habitica running</string>
+    <string name="subscribe_prompt">Stay motivated with even more rewards when you subscribe</string>
     <string name="subscribe_listitem1">Free Monthly Gems</string>
     <string name="subscribe_listitem2">Monthly Mystic Hourglass</string>
     <string name="subscribe_listitem3">Monthly Mystery Items</string>
     <string name="subscribe_listitem4">Special Subscriber Pet</string>
-    <string name="subscribe_listitemFaint">Hang on with 1 HP!</string>
+    <string name="subscribe_listitemFaint">Get a Second Chance</string>
     <string name="subscribe_listitem5">Special Pet &amp; More Drops</string>
     <string name="subscriptions">Subscriptions</string>
     <string name="subscription_duration">Recurring every %s</string>
@@ -408,7 +408,7 @@
     <string name="subscribe_listitem3_description">Subscribe now to get an exclusive set now and receive new items every month!</string>
     <string name="subscribe_listitem3_description_new">Subscribe now to get this %s and receive new items every month!</string>
     <string name="subscribe_listitem4_description">Receive the Royal Purple Jackalope pet when you become a new subscriber.</string>
-    <string name="subscribe_listitemFaint_description">You’ll have the option of a second chance when you run out of HP.</string>
+    <string name="subscribe_listitemFaint_description">Avoid losing your progress with an instant heal when you run out of HP once a day!</string>
     <string name="subscribe_listitem5_description">Get a Royal Purple Jackalope plus double the Eggs, Hatching Potions, and Food each day to grow your Pet collection!</string>
     <string name="subscribe1month_gemcap">25 Gems a month</string>
     <string name="subscribe3month_gemcap">30 Gems a month</string>
@@ -959,12 +959,14 @@
     <string name="cancelled">Cancelled</string>
     <string name="not_recurring">Not Recurring</string>
     <string name="ending_on">Ending on %s</string>
+    <string name="benefits_end">Benefits end %s</string>
     <string name="subscribe_options_title">Choose the Subscription length that works for you</string>
     <string name="thanks_for_supporting">Thanks for supporting Habitica</string>
     <string name="subscribers_mythic_hourglasses"><i>Subscribers receive Mystic Hourglasses within the first three days of the month.</i></string>
     <string name="renew_subscription">Renew Subscription</string>
     <string name="resubscribe">Resubscribe</string>
     <string name="resubscribe_description">Want to continue your benefits? You can start a new subscription before this one runs out to keep your benefits active.</string>
+    <string name="resubscribe_description_gift">Want to continue receiving subscription benefits? You can start a recurring subscription to keep your benefits active.</string>
     <string name="gifted">Gifted</string>
     <string name="save_20">Save 20%</string>
     <string name="subscription_credit">Subscription Credit</string>
@@ -1449,8 +1451,8 @@
     <string name="open_profile">Open Profile</string>
     <string name="customize_avatar">Customize Avatar</string>
     <string name="share_avatar">Share Avatar</string>
-    <string name="subscribe_listitemArmoire">Extra Armoire chances</string>
-    <string name="subscribe_listitemArmoire_description">Get two chances at new equipment from the Armoire for the price of one</string>
+    <string name="subscribe_listitemArmoire">Double Armoire Rewards</string>
+    <string name="subscribe_listitemArmoire_description">Get two chances to score new equipment each time you open the Enchanted Armoire!</string>
     <string name="subscribe_incentive_button_armoire">Subscribe to open again for free!</string>
     <string name="subscribe_incentive_text_armoire">Get an extra chance at the Armoire each time you buy it with a subscription</string>
     <string name="subscribe_second_armoire_open_text">Subscribers get extra chances at the Armoire and these other benefits!</string>
@@ -1534,11 +1536,20 @@
     <string name="clear_database">Clear Database</string>
     <string name="clear_cache_settings">Clear Cache</string>
     <string name="best_deal">Best Deal</string>
-    <string name="unlocks_x_gems_per_month">Unlocks %d Gold-purchasable Gems per month</string>
-    <string name="two_gems_per_month">+2 Gems each month</string>
+    <string name="unlocks_x_gems_per_month">Unlock %d Gems per month instantly</string>
+    <string name="x_gems">%d Gems</string>
+    <string name="two_gems_per_month">Earn +2 Gems every month you\'re subscribed</string>
+    <string name="plus_two_gems">+2 Gems</string>
     <string name="popular">Popular</string>
     <string name="choose_member">Choose Member</string>
     <string name="cleared_cache">Cleared Cache</string>
+    <string name="subscription_details_footer">Subscribers receive a Mystic Hourglass, a Mystery Gear Set, and Gems restocked in the Market within the first two days of the month</string>
+    <string name="enjoy_benefits">Enjoy all these exclusive benefits with your subscription</string>
+    <string name="resubscribe_for_hourglasses">Subscribe again to continue receiving Mystic Hourglasses</string>
+    <string name="max_gem_cap">Max Gem Cap</string>
+    <string name="gem_cap">Gem Cap</string>
+    <string name="get_12_mystic_hourglasses">Get 12 Mystic Hourglasses immediately after your first 12 month subscription!</string>
+    <string name="twelve_mystic_hourglasses">12 Mystic Hourglasses</string>
 
     <plurals name="you_x_others">
         <item quantity="zero">You</item>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index 02b4b4870..3776b09cc 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -611,6 +611,7 @@
         <item name="android:paddingStart">18dp</item>
         <item name="android:paddingEnd">18dp</item>
         <item name="android:layout_marginBottom">8dp</item>
+        <item name="textColor">@color/white</item>
     </style>
 
     <style name="subscriptionBoxText">
@@ -618,20 +619,20 @@
     </style>
 
     <style name="subscriptionBoxText.Title">
-        <item name="android:textSize">14sp</item>
+        <item name="android:textSize">15sp</item>
         <item name="android:fontFamily">
             @string/font_family_medium
         </item>
-        <item name="android:textColor">@color/text_primary</item>
+        <item name="android:textColor">@color/white</item>
         <item name="android:layout_marginBottom">4dp</item>
     </style>
 
     <style name="subscriptionBoxText.Subtitle">
-        <item name="android:textSize">14sp</item>
+        <item name="android:textSize">13sp</item>
         <item name="android:fontFamily">
             @string/font_family_regular
         </item>
-        <item name="android:textColor">@color/text_primary</item>
+        <item name="android:textColor">@color/white</item>
     </style>
 
     <style name="SubscriptionListDescription" parent="GemPurchaseListItemDescription">
@@ -647,19 +648,20 @@
     </style>
 
     <style name="subscriptionBoxCompactText">
-        <item name="android:fontFamily">sans-serif-black</item>
-        <item name="android:textSize">14sp</item>
+        <item name="android:textColor">@color/white</item>
+        <item name="android:fontFamily">sans-serif-medium</item>
+        <item name="android:textSize">13sp</item>
     </style>
 
     <style name="subscriptionBoxCompactTitle">
-        <item name="android:textColor">@color/text_primary</item>
+        <item name="android:textColor">@color/white</item>
         <item name="android:fontFamily">sans-serif</item>
-        <item name="android:textSize">20sp</item>
+        <item name="android:textSize">22sp</item>
         <item name="android:textStyle">bold</item>
     </style>
 
     <style name="subscriptionBoxCompactNumber">
-        <item name="android:textColor">@color/text_primary</item>
+        <item name="android:textColor">@color/white</item>
         <item name="android:fontFamily">sans-serif-black</item>
         <item name="android:textSize">20sp</item>
     </style>
@@ -833,7 +835,11 @@
     </style>
 
     <style name="HabiticaButton.Yellow" parent="HabiticaButton">
-        <item name="android:backgroundTint">@color/yellow_5</item>
+        <item name="android:backgroundTint">@color/yellow_100</item>
+    </style>
+
+    <style name="HabiticaButton.Yellow.Small" parent="HabiticaButton.Small">
+        <item name="android:backgroundTint">@color/yellow_100</item>
     </style>
 
     <style name="HabiticaButton.White" parent="HabiticaButton">
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/models/promotions/GiftOneGetOneHabiticaPromotion.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/models/promotions/GiftOneGetOneHabiticaPromotion.kt
index 5ff569577..a85c39def 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/models/promotions/GiftOneGetOneHabiticaPromotion.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/models/promotions/GiftOneGetOneHabiticaPromotion.kt
@@ -100,25 +100,25 @@ class GiftOneGetOneHabiticaPromotion(startDate: Date?, endDate: Date?) : Habitic
 
     override fun configurePurchaseBanner(binding: FragmentSubscriptionBinding) {
         val context = binding.root.context
-        binding.promoBanner.visibility = View.VISIBLE
-        binding.promoBanner.background = promoBackgroundDrawable(context)
-        binding.promoBannerLeftImage.setImageDrawable(
+        binding.content.promoBanner.visibility = View.VISIBLE
+        binding.content.promoBanner.background = promoBackgroundDrawable(context)
+        binding.content.promoBannerLeftImage.setImageDrawable(
             ContextCompat.getDrawable(
                 context,
                 R.drawable.g1g1_promo_left_small,
             ),
         )
-        binding.promoBannerRightImage.setImageDrawable(
+        binding.content.promoBannerRightImage.setImageDrawable(
             ContextCompat.getDrawable(
                 context,
                 R.drawable.g1g1_promo_right_small,
             ),
         )
-        binding.promoBannerTitleImage.visibility = View.GONE
-        binding.promoBannerDurationView.visibility = View.GONE
-        binding.promoBannerTitleText.visibility = View.VISIBLE
+        binding.content.promoBannerTitleImage.visibility = View.GONE
+        binding.content.promoBannerDurationView.visibility = View.GONE
+        binding.content.promoBannerTitleText.visibility = View.VISIBLE
         val formatter = SimpleDateFormat("MMM d", Locale.getDefault())
-        binding.promoBannerTitleText.text =
+        binding.content.promoBannerTitleText.text =
             context.getString(R.string.gift_one_get_one_purchase_banner, formatter.format(endDate))
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.kt
index 90adc6272..7948fcf7b 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.kt
@@ -25,7 +25,7 @@ open class SubscriptionPlan : RealmObject(), BaseObject {
     var consecutive: SubscriptionPlanConsecutive? = null
     var mysteryItemCount = 0
     var additionalData: AdditionalSubscriptionInfo? = null
-    var perkMonthCount: Int = 0
+    var hourglassPromoReceived: Date? = null
 
     @SerializedName("owner")
     var ownerID: String? = null
@@ -76,6 +76,11 @@ open class SubscriptionPlan : RealmObject(), BaseObject {
             return 1
         }
 
+    val isEligableForHourglassPromo: Boolean
+        get() {
+            return hourglassPromoReceived == null
+        }
+
     companion object {
         const val PLANID_BASIC = "basic"
         const val PLANID_BASICEARNED = "basic_earned"
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/BaseActivity.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/BaseActivity.kt
index 4a56b1e5b..4bda7572b 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/BaseActivity.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/BaseActivity.kt
@@ -6,6 +6,7 @@ import android.content.Intent
 import android.content.SharedPreferences
 import android.content.res.Configuration
 import android.graphics.Bitmap
+import android.graphics.Color
 import android.net.Uri
 import android.os.Build
 import android.os.Bundle
@@ -48,6 +49,7 @@ import java.util.Date
 import javax.inject.Inject
 
 abstract class BaseActivity : AppCompatActivity() {
+
     @Inject
     lateinit var notificationsManager: NotificationsManager
 
@@ -63,6 +65,8 @@ abstract class BaseActivity : AppCompatActivity() {
     open var overrideModernHeader: Boolean? = null
 
     internal var toolbar: Toolbar? = null
+    private var toolbarContentColor: Int? = null
+    private var toolbarBackgroundColor: Int? = null
 
     protected abstract fun getLayoutResId(): Int?
 
@@ -195,8 +199,10 @@ abstract class BaseActivity : AppCompatActivity() {
         }
     }
 
-    protected fun setupToolbar(toolbar: Toolbar?) {
+    protected fun setupToolbar(toolbar: Toolbar?, iconColor: Int? = null, backgroundColor: Int? = null) {
         this.toolbar = toolbar
+        this.toolbarContentColor = iconColor
+        this.toolbarBackgroundColor = backgroundColor
         if (toolbar != null) {
             setSupportActionBar(toolbar)
 
@@ -209,12 +215,12 @@ abstract class BaseActivity : AppCompatActivity() {
                 actionBar.setHomeButtonEnabled(true)
             }
         }
-        toolbar?.let { ToolbarColorHelper.colorizeToolbar(it, this) }
+        toolbar?.let { ToolbarColorHelper.colorizeToolbar(it, this, iconColor, backgroundColor) }
     }
 
     override fun onCreateOptionsMenu(menu: Menu): Boolean {
         val ret = super.onCreateOptionsMenu(menu)
-        toolbar?.let { ToolbarColorHelper.colorizeToolbar(it, this) }
+        toolbar?.let { ToolbarColorHelper.colorizeToolbar(it, this, this.toolbarContentColor, this.toolbarBackgroundColor) }
         return ret
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt
index 041ecbf77..a661e7ce2 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt
@@ -1,37 +1,48 @@
 package com.habitrpg.android.habitica.ui.activities
 
+import android.graphics.Color
 import android.os.Bundle
+import android.view.Menu
 import androidx.appcompat.widget.Toolbar
+import androidx.core.content.ContextCompat
 import androidx.fragment.app.Fragment
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.ui.fragments.purchases.GemsPurchaseFragment
 import com.habitrpg.android.habitica.ui.fragments.purchases.SubscriptionFragment
+import com.habitrpg.android.habitica.ui.helpers.ToolbarColorHelper
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class GemPurchaseActivity : PurchaseActivity() {
+    private var showSubscription: Boolean = false
+
     override fun getLayoutResId(): Int {
         return R.layout.activity_gem_purchase
     }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        showSubscription = !(intent.extras?.containsKey("openSubscription") == true && intent.extras?.getBoolean("openSubscription") == false)
 
         val toolbar = findViewById<Toolbar>(R.id.toolbar)
-        setSupportActionBar(toolbar)
+        setupToolbar(toolbar, Color.WHITE, ContextCompat.getColor(this, R.color.brand_300))
 
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
         supportActionBar?.setDisplayShowHomeEnabled(true)
         supportActionBar?.title = ""
 
-        if (intent.extras?.containsKey("openSubscription") == true) {
-            if (intent.extras?.getBoolean("openSubscription") == false) {
-                createFragment(false)
-            } else {
-                createFragment(true)
-            }
-        } else {
+        if (showSubscription) {
             createFragment(true)
+            toolbar.title = getString(R.string.subscription)
+        } else {
+            createFragment(false)
+        }
+    }
+
+    override fun onStart() {
+        super.onStart()
+        if (showSubscription) {
+            toolbar?.let { ToolbarColorHelper.colorizeToolbar(it, this,) }
         }
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/EventOutcomeSubscriptionBottomSheetFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/EventOutcomeSubscriptionBottomSheetFragment.kt
index babd73297..fd63050d1 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/EventOutcomeSubscriptionBottomSheetFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/EventOutcomeSubscriptionBottomSheetFragment.kt
@@ -19,31 +19,29 @@ class EventOutcomeSubscriptionBottomSheetFragment : SubscriptionBottomSheetFragm
             EVENT_GEMS_FOR_GOLD -> setGemsForGoldEventSubscriptionViews()
             EVENT_HOURGLASS_SHOP_OPENED -> setHourglassShopEventSubscriptionViews()
         }
+        binding.content.subscription3month.visibility = View.GONE
+        binding.content.subscription6month.visibility = View.GONE
     }
 
     private fun setArmoireEventSubscriptionViews() {
-        binding.subscriberBenefitBanner.visibility = View.GONE
-        binding.subscribeBenefits.text = getString(R.string.subscribe_second_armoire_open_text)
-        binding.subscriberBenefits.hideArmoireBenefit()
+        binding.content.subscribeBenefitsTitle.text = getString(R.string.subscribe_second_armoire_open_text)
+        binding.content.subscriberBenefits.hideArmoireBenefit()
     }
 
     private fun setDeathScreenEventSubscriptionViews() {
-        binding.subscriberBenefitBanner.visibility = View.GONE
-        binding.subscribeBenefits.text = getString(R.string.subscribe_second_chance_incentive_text)
-        binding.subscriberBenefits.hideDeathBenefit()
+        binding.content.subscribeBenefitsTitle.text = getString(R.string.subscribe_second_chance_incentive_text)
+        binding.content.subscriberBenefits.hideDeathBenefit()
     }
 
     private fun setGemsForGoldEventSubscriptionViews() {
-        binding.subscribeBenefits.text = getString(R.string.subscribe_gems_for_gold_incentive_text)
-        binding.subscriberBenefits.hideGemsForGoldBenefit()
-        binding.subscription3month.visibility = View.GONE
+        binding.content.subscribeBenefitsTitle.text = getString(R.string.subscribe_gems_for_gold_incentive_text)
+        binding.content.subscriberBenefits.hideGemsForGoldBenefit()
+        binding.content.subscription3month.visibility = View.GONE
     }
 
     private fun setHourglassShopEventSubscriptionViews() {
-        binding.subscriberBenefitBanner.visibility = View.GONE
-        binding.subscribeBenefits.text = getString(R.string.subscribe_hourglass_incentive_text)
-        binding.subscriberBenefits.hideMysticHourglassBenefit()
-        binding.subscription1month.visibility = View.GONE
+        binding.content.subscribeBenefitsTitle.text = getString(R.string.subscribe_hourglass_incentive_text)
+        binding.content.subscriberBenefits.hideMysticHourglassBenefit()
         skus.firstOrNull { buttonForSku(it)?.isVisible == true }?.let { selectSubscription(it) }
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
index 452276286..87a53c0a8 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
@@ -70,13 +70,9 @@ open class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
     ) {
         super.onViewCreated(view, savedInstanceState)
 
-        binding.subscriptionOptions.visibility = View.GONE
-        binding.seeMoreOptions.setOnClickListener {
-            dismiss()
-            MainNavigationController.navigate(R.id.subscriptionPurchaseActivity)
-        }
-        binding.subscribeButton.setOnClickListener { purchaseSubscription() }
-        binding.subscriptionDisclaimerView.setMarkdown("Once we’ve confirmed your purchase, the payment will be charged to your Google Account.\n\nSubscriptions automatically renew unless auto-renewal is turned off at least 24-hours before the end of the current period. If you have an active subscription, your account will be charged for renewal within 24-hours prior to the end of your current subscription period and you will be charged the same price you initially paid.\n\nBy continuing you accept the [Terms of Use](https://habitica.com/static/terms) and [Privacy Policy](https://habitica.com/static/privacy).")
+        binding.content.subscriptionOptions.visibility = View.GONE
+        binding.content.subscribeButton.setOnClickListener { purchaseSubscription() }
+        binding.content.subscriptionDisclaimerView.setMarkdown("Once we’ve confirmed your purchase, the payment will be charged to your Google Account.\n\nSubscriptions automatically renew unless auto-renewal is turned off at least 24-hours before the end of the current period. If you have an active subscription, your account will be charged for renewal within 24-hours prior to the end of your current subscription period and you will be charged the same price you initially paid.\n\nBy continuing you accept the [Terms of Use](https://habitica.com/static/terms) and [Privacy Policy](https://habitica.com/static/privacy).")
 
         lifecycleScope.launchCatching {
             userRepository.getUser().collect { user ->
@@ -156,7 +152,7 @@ open class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
         this.selectedSubscriptionSku = sku
         val subscriptionOptionButton = buttonForSku(this.selectedSubscriptionSku)
         subscriptionOptionButton?.setIsSelected(true)
-        binding.subscribeButton.isEnabled = true
+        binding.content.subscribeButton.isEnabled = true
     }
 
     internal fun buttonForSku(sku: ProductDetails?): SubscriptionOptionView? {
@@ -165,9 +161,9 @@ open class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
 
     private fun buttonForSku(sku: String?): SubscriptionOptionView? {
         return when (sku) {
-            PurchaseTypes.SUBSCRIPTION_1_MONTH -> binding.subscription1month
-            PurchaseTypes.SUBSCRIPTION_3_MONTH -> binding.subscription3month
-            PurchaseTypes.SUBSCRIPTION_12_MONTH -> binding.subscription12month
+            PurchaseTypes.SUBSCRIPTION_1_MONTH -> binding.content.subscription1month
+            PurchaseTypes.SUBSCRIPTION_3_MONTH -> binding.content.subscription3month
+            PurchaseTypes.SUBSCRIPTION_12_MONTH -> binding.content.subscription12month
             else -> null
         }
     }
@@ -189,11 +185,12 @@ open class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
 
     private fun updateSubscriptionInfo() {
         if (hasLoadedSubscriptionOptions) {
-            binding.subscriptionOptions.visibility = View.VISIBLE
-            binding.loadingIndicator.visibility = View.GONE
+            binding.content.subscriptionOptions.visibility = View.VISIBLE
+            binding.content.loadingIndicator.visibility = View.GONE
         }
         if (user != null) {
-            binding.loadingIndicator.visibility = View.GONE
+            binding.content.loadingIndicator.visibility = View.GONE
+            binding.content.subscription12month.showHourglassPromo(user?.purchased?.plan?.isEligableForHourglassPromo == true)
         }
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionFragment.kt
index 1fd302b6c..f31c0300c 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionFragment.kt
@@ -2,6 +2,7 @@ package com.habitrpg.android.habitica.ui.fragments.purchases
 
 import android.content.Context
 import android.content.Intent
+import android.net.Uri
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
@@ -79,11 +80,18 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
     ) {
         super.onViewCreated(view, savedInstanceState)
 
-        binding?.subscriptionOptions?.visibility = View.GONE
-        binding?.subscriptionDetails?.visibility = View.GONE
-        binding?.subscriptionDetails?.onShowSubscriptionOptions = { showSubscriptionOptions() }
+        binding?.content?.subscriptionOptions?.visibility = View.GONE
+        binding?.content?.subscriptionDetails?.visibility = View.GONE
+        binding?.content?.subscriptionDetails?.onShowSubscriptionOptions = { showSubscriptionOptions() }
 
-        binding?.giftSubscriptionButton?.setOnClickListener {
+        binding?.content?.giftSegmentSubscribed?.giftSubscriptionButton?.setOnClickListener {
+            context?.let { context ->
+                showGiftSubscriptionDialog(
+                    context,
+                )
+            }
+        }
+        binding?.content?.giftSegmentUnsubscribed?.giftSubscriptionButton?.setOnClickListener {
             context?.let { context ->
                 showGiftSubscriptionDialog(
                     context,
@@ -91,7 +99,12 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
             }
         }
 
-        binding?.subscribeButton?.setOnClickListener { purchaseSubscription() }
+        binding?.content?.subscribeButton?.setOnClickListener { purchaseSubscription() }
+
+        binding?.content?.visitHabiticaWebsiteButton?.setOnClickListener {
+            val url = context?.getString(R.string.base_url) + "/"
+            context?.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url)))
+        }
 
         lifecycleScope.launchCatching {
             userRepository.getUser().collect { user ->
@@ -104,7 +117,7 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
             binding?.let {
                 promo.configurePurchaseBanner(it)
             }
-            binding?.promoBanner?.setOnClickListener {
+            binding?.content?.promoBanner?.setOnClickListener {
                 val fragment = PromoInfoFragment()
                 parentFragmentManager
                     .beginTransaction()
@@ -112,12 +125,12 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
                     .commit()
             }
         } else {
-            binding?.promoBanner?.visibility = View.GONE
+            binding?.content?.promoBanner?.visibility = View.GONE
         }
 
         val birthdayEventEnd = appConfigManager.getBirthdayEvent()?.end
         if (birthdayEventEnd != null) {
-            binding?.promoComposeView?.setContent {
+            binding?.content?.promoComposeView?.setContent {
                 HabiticaTheme {
                     BirthdayBanner(
                         endDate = birthdayEventEnd,
@@ -128,12 +141,12 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
                     )
                 }
             }
-            binding?.promoComposeView?.isVisible = true
+            binding?.content?.promoComposeView?.isVisible = true
         }
 
         binding?.refreshLayout?.setOnRefreshListener { refresh() }
 
-        binding?.subscriptionDisclaimerView?.setMarkdown("Once we’ve confirmed your purchase, the payment will be charged to your Google Account.\n\nSubscriptions automatically renew unless auto-renewal is turned off at least 24-hours before the end of the current period. If you have an active subscription, your account will be charged for renewal within 24-hours prior to the end of your current subscription period and you will be charged the same price you initially paid.\n\nBy continuing you accept the [Terms of Use](https://habitica.com/static/terms) and [Privacy Policy](https://habitica.com/static/privacy).")
+        binding?.content?.subscriptionDisclaimerView?.setMarkdown("Once we’ve confirmed your purchase, the payment will be charged to your Google Account.\n\nSubscriptions automatically renew unless auto-renewal is turned off at least 24-hours before the end of the current period. If you have an active subscription, your account will be charged for renewal within 24-hours prior to the end of your current subscription period and you will be charged the same price you initially paid.\n\nBy continuing you accept the [Terms of Use](https://habitica.com/static/terms) and [Privacy Policy](https://habitica.com/static/privacy).")
 
         Analytics.sendNavigationEvent("subscription screen")
     }
@@ -159,6 +172,14 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
             val subscriptions = purchaseHandler.getAllSubscriptionProducts()
             skus = subscriptions
             withContext(Dispatchers.Main) {
+                if (subscriptions.isEmpty()) {
+                    binding?.content?.loadingIndicator?.visibility = View.GONE
+                    binding?.content?.noBillingSubscriptions?.visibility = View.VISIBLE
+                    binding?.content?.visitHabiticaWebsiteButton?.visibility = View.VISIBLE
+                    return@withContext
+                }
+                binding?.content?.noBillingSubscriptions?.visibility = View.GONE
+                binding?.content?.visitHabiticaWebsiteButton?.visibility = View.GONE
                 for (sku in subscriptions) {
                     updateButtonLabel(
                         sku,
@@ -198,8 +219,8 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
         this.selectedSubscriptionSku = sku
         val subscriptionOptionButton = buttonForSku(this.selectedSubscriptionSku)
         subscriptionOptionButton?.setIsSelected(true)
-        if (binding?.subscribeButton != null) {
-            binding?.subscribeButton?.isEnabled = true
+        if (binding?.content?.subscribeButton != null) {
+            binding?.content?.subscribeButton?.isEnabled = true
         }
     }
 
@@ -209,10 +230,10 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
 
     private fun buttonForSku(sku: String?): SubscriptionOptionView? {
         return when (sku) {
-            PurchaseTypes.SUBSCRIPTION_1_MONTH -> binding?.subscription1month
-            PurchaseTypes.SUBSCRIPTION_3_MONTH -> binding?.subscription3month
-            PurchaseTypes.SUBSCRIPTION_6_MONTH -> binding?.subscription6month
-            PurchaseTypes.SUBSCRIPTION_12_MONTH -> binding?.subscription12month
+            PurchaseTypes.SUBSCRIPTION_1_MONTH -> binding?.content?.subscription1month
+            PurchaseTypes.SUBSCRIPTION_3_MONTH -> binding?.content?.subscription3month
+            PurchaseTypes.SUBSCRIPTION_6_MONTH -> binding?.content?.subscription6month
+            PurchaseTypes.SUBSCRIPTION_12_MONTH -> binding?.content?.subscription12month
             else -> null
         }
     }
@@ -233,40 +254,38 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
 
     private fun updateSubscriptionInfo() {
         if (hasLoadedSubscriptionOptions) {
-            binding?.subscriptionOptions?.visibility = View.VISIBLE
-            binding?.loadingIndicator?.visibility = View.GONE
+            binding?.content?.subscriptionOptions?.visibility = View.VISIBLE
+            binding?.content?.loadingIndicator?.visibility = View.GONE
         }
         if (user != null) {
             val isSubscribed = user?.isSubscribed ?: false
 
-            if (binding?.subscriptionDetails == null) {
+            if (binding?.content?.subscriptionDetails == null) {
                 return
             }
 
             if (isSubscribed) {
-                if (context?.isUsingNightModeResources() == true) {
-                    binding?.headerImageView?.setImageResource(R.drawable.subscriber_banner_dark)
-                } else {
-                    binding?.headerImageView?.setImageResource(R.drawable.subscriber_header)
-                }
-                binding?.subscriptionDetails?.visibility = View.VISIBLE
-                binding?.subscriptionDetails?.currentUserID = user?.id
-                user?.purchased?.plan?.let { binding?.subscriptionDetails?.setPlan(it) }
-                binding?.subscribeBenefitsTitle?.setText(R.string.subscribe_prompt_thanks)
-                binding?.subscriptionOptions?.visibility = View.GONE
+                binding?.content?.headerImageView?.setImageResource(R.drawable.subscriber_banner_dark)
+                binding?.content?.subscriptionDetails?.visibility = View.VISIBLE
+                binding?.content?.subscriptionDetails?.currentUserID = user?.id
+                user?.purchased?.plan?.let { binding?.content?.subscriptionDetails?.setPlan(it) }
+                binding?.content?.subscriptionOptions?.visibility = View.GONE
+                binding?.content?.giftSegmentUnsubscribed?.root?.visibility = View.GONE
+                binding?.content?.subscribeBenefitsTitle?.visibility = View.GONE
             } else {
-                if (context?.isUsingNightModeResources() == true) {
-                    binding?.headerImageView?.setImageResource(R.drawable.subscribe_header_dark)
-                } else {
-                    binding?.headerImageView?.setImageResource(R.drawable.subscribe_header)
-                }
+                binding?.content?.headerImageView?.setImageResource(R.drawable.subscribe_header_dark)
                 if (!hasLoadedSubscriptionOptions) {
                     return
                 }
-                binding?.subscriptionDetails?.visibility = View.GONE
-                binding?.subscribeBenefitsTitle?.setText(R.string.subscribe_prompt)
+                binding?.content?.subscriptionDetails?.visibility = View.GONE
+                binding?.content?.subscribeBenefitsTitle?.setText(R.string.subscribe_prompt)
+                binding?.content?.subscribeBenefitsFooter?.visibility = View.GONE
+                binding?.content?.giftSegmentSubscribed?.root?.visibility = View.GONE
+
+                binding?.content?.subscription12month?.showHourglassPromo(user?.purchased?.plan?.isEligableForHourglassPromo == true)
+
             }
-            binding?.loadingIndicator?.visibility = View.GONE
+            binding?.content?.loadingIndicator?.visibility = View.GONE
         }
     }
 
@@ -286,10 +305,10 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
     }
 
     private fun showSubscriptionOptions() {
-        binding?.subscriptionOptions?.visibility = View.VISIBLE
-        binding?.subscriptionOptions?.postDelayed(
+        binding?.content?.subscriptionOptions?.visibility = View.VISIBLE
+        binding?.content?.subscriptionOptions?.postDelayed(
             {
-                binding?.scrollView?.smoothScrollTo(0, binding?.subscriptionOptions?.top ?: 0)
+                binding?.content?.scrollView?.smoothScrollTo(0, binding?.content?.subscriptionOptions?.top ?: 0)
             },
             500,
         )
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/helpers/ToolbarColorHelper.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/helpers/ToolbarColorHelper.kt
index c5de8e386..7d94d4704 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/helpers/ToolbarColorHelper.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/helpers/ToolbarColorHelper.kt
@@ -68,6 +68,7 @@ object ToolbarColorHelper {
 
                 is TextView -> {
                     v.setTextColor(toolbarIconsColor)
+                    v.setBackgroundColor(backgroundColor ?: activity.getThemeColor(R.attr.headerBackgroundColor))
                 }
             }
         }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriberBenefitView.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriberBenefitView.kt
index b96f8a4d8..474a691b5 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriberBenefitView.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriberBenefitView.kt
@@ -25,9 +25,9 @@ class SubscriberBenefitView
         context: Context,
         attrs: AttributeSet? = null,
     ) : LinearLayout(context, attrs) {
-        private val binding: SubscriptionBenefitsBinding
+        private val binding: SubscriptionBenefitsBinding = SubscriptionBenefitsBinding.inflate(context.layoutInflater, this)
 
-        @Inject
+    @Inject
         lateinit var configManager: AppConfigManager
 
         @Inject
@@ -42,7 +42,6 @@ class SubscriberBenefitView
         }
 
         init {
-            binding = SubscriptionBenefitsBinding.inflate(context.layoutInflater, this)
             orientation = VERTICAL
             val hiltEntryPoint =
                 EntryPointAccessors.fromApplication(context, ThisEntryPoint::class.java)
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionDetailsView.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionDetailsView.kt
index b435f4376..f57fc93e3 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionDetailsView.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionDetailsView.kt
@@ -39,12 +39,6 @@ class SubscriptionDetailsView : LinearLayout {
     private fun setupView() {
         binding = SubscriptionDetailsBinding.inflate(context.layoutInflater, this, true)
         binding.changeSubscriptionButton.setOnClickListener { changeSubscriptionButtonTapped() }
-        binding.heartIcon.setImageDrawable(
-            BitmapDrawable(
-                context.resources,
-                HabiticaIconsHelper.imageOfHeartLightBg(),
-            ),
-        )
     }
 
     fun setPlan(plan: SubscriptionPlan) {
@@ -83,7 +77,7 @@ class SubscriptionDetailsView : LinearLayout {
             plan.dateTerminated != null ->
                 binding.subscriptionDurationTextView.text =
                     resources.getString(
-                        R.string.ending_on,
+                        R.string.benefits_end,
                         DateFormat.getDateInstance().format(plan.dateTerminated ?: Date()),
                     )
         }
@@ -160,7 +154,9 @@ class SubscriptionDetailsView : LinearLayout {
             val nextHourglassMonth = nextHourglassDate.format(DateTimeFormatter.ofPattern(format))
             nextHourglassMonth?.let { binding.nextHourglassTextview.text = it }
         } else {
-            binding.nextHourglassTextview.text = "--"
+            binding.nextHourglassTextview.visibility = View.GONE
+            binding.nextHourglassLabel.visibility = View.VISIBLE
+            binding.nextHourglassLabel.text = resources.getString(R.string.resubscribe_for_hourglasses)
         }
 
         binding.changeSubscriptionButton.visibility = View.VISIBLE
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionOptionView.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionOptionView.kt
index bdde0f10a..2a8e16f13 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionOptionView.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionOptionView.kt
@@ -1,53 +1,78 @@
 package com.habitrpg.android.habitica.ui.views.subscriptions
 
 import android.content.Context
+import android.graphics.Color
+import android.graphics.LinearGradient
+import android.graphics.Shader
+import android.graphics.Typeface
+import android.os.Build
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.style.ForegroundColorSpan
+import android.text.style.StyleSpan
 import android.util.AttributeSet
 import android.view.View
 import android.widget.FrameLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.isVisible
+import androidx.core.widget.TextViewCompat
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.databinding.PurchaseSubscriptionViewBinding
 import com.habitrpg.common.habitica.extensions.layoutInflater
 
+
 class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayout(context, attrs) {
-    private val binding =
-        PurchaseSubscriptionViewBinding.inflate(context.layoutInflater, this, true)
+    private val binding = PurchaseSubscriptionViewBinding.inflate(context.layoutInflater, this, true)
 
     var sku: String? = null
+    private var isPromoted: Boolean = false
+    private var gemCap: Int = 24
 
     init {
-        val a =
-            context.theme.obtainStyledAttributes(
-                attrs,
-                R.styleable.SubscriptionOptionView,
-                0,
-                0,
-            )
+        val a = context.theme.obtainStyledAttributes(
+            attrs,
+            R.styleable.SubscriptionOptionView,
+            0,
+            0,
+        )
 
         if (a.getBoolean(R.styleable.SubscriptionOptionView_isNonRecurring, false)) {
-            binding.descriptionTextView.text =
-                context.getString(
-                    R.string.subscription_duration_norenew,
-                    a.getText(R.styleable.SubscriptionOptionView_recurringText),
-                )
+            binding.descriptionTextView.text = context.getString(
+                R.string.subscription_duration_norenew,
+                a.getText(R.styleable.SubscriptionOptionView_recurringText),
+            )
         } else {
-            binding.descriptionTextView.text =
-                context.getString(
-                    R.string.subscription_duration,
-                    a.getText(R.styleable.SubscriptionOptionView_recurringText),
-                )
+            binding.descriptionTextView.text = context.getString(
+                R.string.subscription_duration,
+                a.getText(R.styleable.SubscriptionOptionView_recurringText),
+            )
         }
 
-        val gemCap = a.getInteger(R.styleable.SubscriptionOptionView_gemCapText, 25)
-        binding.gemCapTextView.text = context.getString(R.string.unlocks_x_gems_per_month, gemCap)
+        gemCap = a.getInteger(R.styleable.SubscriptionOptionView_gemCapText, 24)
+        setGemCapText(false)
+        setAddtlGemText(false)
         setFlagText(a.getText(R.styleable.SubscriptionOptionView_flagText))
-        binding.hourglassTextView.visibility = View.VISIBLE
-        if (gemCap < 50) {
-            binding.hourglassTextView.visibility = View.VISIBLE
-            binding.hourglassTextView.text =
-                context.getString(R.string.two_gems_per_month)
+    }
+
+    private fun setGemCapText(isSelected: Boolean) {
+        binding.gemCapTextView.text = highlightText(context.getString(R.string.unlocks_x_gems_per_month, gemCap),
+            context.getString(R.string.x_gems, gemCap),
+            ContextCompat.getColor(context, if (isSelected) R.color.yellow_5 else R.color.white))
+    }
+
+    private fun setAddtlGemText(isSelected: Boolean) {
+        if (gemCap == 50) {
+            binding.hourglassTextView.text = highlightText(
+                context.getString(R.string.max_gem_cap),
+                context.getString(R.string.gem_cap),
+                ContextCompat.getColor(context, if (isSelected) R.color.yellow_5 else R.color.white)
+            )
         } else {
-            binding.hourglassTextView.visibility = View.GONE
+            binding.hourglassTextView.text = highlightText(
+                context.getString(R.string.two_gems_per_month),
+                context.getString(R.string.plus_two_gems),
+                ContextCompat.getColor(context, if (isSelected) R.color.yellow_5 else R.color.white)
+            )
         }
     }
 
@@ -55,74 +80,101 @@ class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayou
         this.setOnClickListener(listener)
     }
 
+    fun showHourglassPromo(show: Boolean) {
+        binding.hourglassPromoView.isVisible = show
+        binding.hourglassPromoView.text = highlightText(
+            context.getString(R.string.get_12_mystic_hourglasses),
+            context.getString(R.string.twelve_mystic_hourglasses),
+            ContextCompat.getColor(context, R.color.teal_1)
+        )
+    }
+
     fun setPriceText(text: String) {
         binding.priceLabel.text = text
+        if (isPromoted) {
+            val shader: Shader = LinearGradient(
+                0f, 0f, binding.priceLabel.paint.measureText(text), binding.priceLabel.lineHeight.toFloat(), Color.parseColor("#2995CD"), Color.parseColor("#24CC8F"), Shader.TileMode.REPEAT
+            )
+            binding.priceLabel.paint.setShader(shader)
+        }
+    }
+
+    fun setSalePrice(price: String) {
+        binding.salePriceLabel.text = price
     }
 
     fun setFlagText(text: CharSequence?) {
-        if ((text?.length ?: 0) == 0) {
-            binding.flagFlap.visibility = View.GONE
-            binding.flagTextview.visibility = View.GONE
-        } else {
+        isPromoted = text?.isNotBlank() ?: false
+        if (isPromoted) {
             binding.flagFlap.visibility = View.VISIBLE
             binding.flagTextview.visibility = View.VISIBLE
             binding.flagTextview.text = text
+        } else {
+            binding.flagFlap.visibility = View.GONE
+            binding.flagTextview.visibility = View.GONE
         }
     }
 
+    private fun highlightText(text: String, substring: String, color: Int): Spannable {
+        val spannable = SpannableString(text)
+        val start = text.indexOf(substring)
+        val end = start + substring.length
+        spannable.setSpan(ForegroundColorSpan(color), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+        spannable.setSpan(StyleSpan(Typeface.BOLD), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+        return spannable
+    }
+
     fun setIsSelected(purchased: Boolean) {
         if (purchased) {
-            binding.wrapper.setBackgroundResource(R.drawable.subscription_box_bg_selected)
-            binding.subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_selected)
-            binding.gemCapTextView.setBackgroundResource(R.drawable.pill_bg_purple_400)
-            binding.gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
-            binding.hourglassTextView.setBackgroundResource(R.drawable.pill_bg_purple_400)
-            binding.hourglassTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
-            binding.priceLabel.setTextColor(ContextCompat.getColor(context, R.color.text_brand))
-            binding.descriptionTextView.setTextColor(
-                ContextCompat.getColor(
-                    context,
-                    R.color.text_brand,
-                ),
-            )
+            binding.selectedIndicator.visibility = View.VISIBLE
+            binding.root.setBackgroundResource(R.drawable.subscription_box_bg_selected)
+            val textColor = if (isPromoted) {
+                ContextCompat.getColor(context, R.color.teal_1)
+            } else {
+                ContextCompat.getColor(context, R.color.brand_300)
+            }
+            binding.gemCapTextView.setTextColor(textColor)
+            setGemCapText(true)
+            binding.hourglassTextView.setTextColor(textColor)
+            setAddtlGemText(true)
+            if (!isPromoted) {
+                binding.priceLabel.setTextColor(textColor)
+            }
+            binding.descriptionTextView.setTextColor(textColor)
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+                TextViewCompat.setCompoundDrawableTintList(binding.gemCapTextView, ContextCompat.getColorStateList(context, R.color.yellow_100))
+                TextViewCompat.setCompoundDrawableTintList(binding.hourglassTextView, ContextCompat.getColorStateList(context, R.color.yellow_100))
+            }
         } else {
-            binding.wrapper.setBackgroundResource(R.drawable.subscription_type_box_bg)
-            binding.subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_unselected)
-            binding.gemCapTextView.setBackgroundResource(R.drawable.pill_bg_gray)
+            binding.selectedIndicator.visibility = View.GONE
+            binding.root.setBackgroundResource(R.drawable.subscription_type_box_bg)
             binding.gemCapTextView.setTextColor(
                 ContextCompat.getColor(
                     context,
-                    R.color.text_secondary,
+                    R.color.brand_600,
                 ),
             )
-            binding.hourglassTextView.setBackgroundResource(R.drawable.pill_bg_gray)
+            setGemCapText(false)
             binding.hourglassTextView.setTextColor(
                 ContextCompat.getColor(
                     context,
-                    R.color.text_secondary,
+                    R.color.brand_600,
                 ),
             )
-            binding.priceLabel.setTextColor(ContextCompat.getColor(context, R.color.text_ternary))
+            setAddtlGemText(false)
+            if (!isPromoted) {
+                binding.priceLabel.setTextColor(ContextCompat.getColor(context, if (isPromoted) R.color.promo_gradient else R.color.brand_600))
+            }
             binding.descriptionTextView.setTextColor(
                 ContextCompat.getColor(
                     context,
-                    R.color.text_ternary,
+                    R.color.brand_600,
                 ),
             )
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+                TextViewCompat.setCompoundDrawableTintList(binding.gemCapTextView, ContextCompat.getColorStateList(context, R.color.brand_400))
+                TextViewCompat.setCompoundDrawableTintList(binding.hourglassTextView, ContextCompat.getColorStateList(context, R.color.brand_400))
+            }
         }
-        val horizontalPadding = resources.getDimension(R.dimen.pill_horizontal_padding).toInt()
-        val verticalPadding = resources.getDimension(R.dimen.pill_vertical_padding).toInt()
-        binding.gemCapTextView.setPadding(
-            horizontalPadding,
-            verticalPadding,
-            horizontalPadding,
-            verticalPadding,
-        )
-        binding.hourglassTextView.setPadding(
-            horizontalPadding,
-            verticalPadding,
-            horizontalPadding,
-            verticalPadding,
-        )
     }
 }
diff --git a/wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/TaskResultActivity.kt b/wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/TaskResultActivity.kt
index 22d9a11e2..49b90775a 100644
--- a/wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/TaskResultActivity.kt
+++ b/wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/TaskResultActivity.kt
@@ -182,13 +182,6 @@ class TaskResultActivity : BaseActivity<ActivityTaskResultBinding, TaskResultVie
             layoutParams.columnSpec = GridLayout.spec(0, 3, GridLayout.CENTER)
             dropBinding.root.layoutParams = layoutParams
             val elements = mutableListOf<String>()
-            /* if ((viewModel.result?.questItemsFound?: 0) != 0) {
-                if (viewModel.result?.questItemsFound == 1) {
-                    elements.add(getString(R.string.one_quest_item))
-                } else {
-                    elements.add(getString(R.string.x_quest_item, viewModel.result?.questItemsFound))
-                }
-            }*/
             if (viewModel.result?.drop?.key != null) {
                 val type = viewModel.result?.drop?.type
                 val key = viewModel.result?.drop?.key