diff --git a/Habitica/build.gradle b/Habitica/build.gradle
index ca803df03..f0698a0ba 100644
--- a/Habitica/build.gradle
+++ b/Habitica/build.gradle
@@ -115,10 +115,10 @@ dependencies {
     debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.2'
     releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.2'
     //Push Notifications
-    implementation 'com.google.firebase:firebase-core:17.2.0'
-    implementation 'com.google.firebase:firebase-messaging:20.0.0'
+    implementation 'com.google.firebase:firebase-core:17.2.1'
+    implementation 'com.google.firebase:firebase-messaging:20.0.1'
     implementation 'com.google.firebase:firebase-config:19.0.3'
-    implementation 'com.google.firebase:firebase-perf:19.0.1'
+    implementation 'com.google.firebase:firebase-perf:19.0.2'
     implementation 'com.google.android.gms:play-services-auth:17.0.0'
     implementation 'io.realm:android-adapters:3.1.0'
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
@@ -151,8 +151,8 @@ android {
         multiDexEnabled true
         resConfigs "en", "bg", "de", "en-rGB", "es", "fr", "hr-rHR", "in", "it", "iw", "ja", "ko", "lt", "nl", "pl", "pt-rBR", "pt-rPT", "ru", "tr", "zh", "zh-rTW"
 
-        versionCode 2299
-        versionName "2.3"
+        versionCode 2304
+        versionName "2.4"
     }
 
     viewBinding {
@@ -217,11 +217,6 @@ android {
             buildConfigField "String", "TESTING_LEVEL", "\"production\""
             dimension "buildType"
         }
-
-        amazon {
-            buildConfigField "String", "STORE", "\"amazon\""
-            dimension "buildType"
-        }
     }
 
     sourceSets {
diff --git a/Habitica/res/drawable-hdpi/gift_sub_gift.png b/Habitica/res/drawable-hdpi/gift_sub_gift.png
new file mode 100644
index 000000000..8d833af1a
Binary files /dev/null and b/Habitica/res/drawable-hdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_amazon.png b/Habitica/res/drawable-hdpi/payment_amazon.png
new file mode 100644
index 000000000..ab6c16e2f
Binary files /dev/null and b/Habitica/res/drawable-hdpi/payment_amazon.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_apple.png b/Habitica/res/drawable-hdpi/payment_apple.png
new file mode 100644
index 000000000..ce2259107
Binary files /dev/null and b/Habitica/res/drawable-hdpi/payment_apple.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_gift.png b/Habitica/res/drawable-hdpi/payment_gift.png
new file mode 100644
index 000000000..34b0235f7
Binary files /dev/null and b/Habitica/res/drawable-hdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_google.png b/Habitica/res/drawable-hdpi/payment_google.png
new file mode 100644
index 000000000..02d20d49a
Binary files /dev/null and b/Habitica/res/drawable-hdpi/payment_google.png differ
diff --git a/Habitica/res/drawable-hdpi/payment_stripe.png b/Habitica/res/drawable-hdpi/payment_stripe.png
new file mode 100644
index 000000000..2a81933e8
Binary files /dev/null and b/Habitica/res/drawable-hdpi/payment_stripe.png differ
diff --git a/Habitica/res/drawable-hdpi/separator_fancy.png b/Habitica/res/drawable-hdpi/separator_fancy.png
new file mode 100644
index 000000000..222c02a9a
Binary files /dev/null and b/Habitica/res/drawable-hdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-hdpi/sub_benefits_drops.png b/Habitica/res/drawable-hdpi/sub_benefits_drops.png
new file mode 100644
index 000000000..fdc843f53
Binary files /dev/null and b/Habitica/res/drawable-hdpi/sub_benefits_drops.png differ
diff --git a/Habitica/res/drawable-hdpi/sub_benefits_gems.png b/Habitica/res/drawable-hdpi/sub_benefits_gems.png
new file mode 100644
index 000000000..27b9f8f02
Binary files /dev/null and b/Habitica/res/drawable-hdpi/sub_benefits_gems.png differ
diff --git a/Habitica/res/drawable-hdpi/sub_benefits_hourglasses.png b/Habitica/res/drawable-hdpi/sub_benefits_hourglasses.png
new file mode 100644
index 000000000..1b6fa5709
Binary files /dev/null and b/Habitica/res/drawable-hdpi/sub_benefits_hourglasses.png differ
diff --git a/Habitica/res/drawable-hdpi/sub_benefits_pet.png b/Habitica/res/drawable-hdpi/sub_benefits_pet.png
new file mode 100644
index 000000000..e82416423
Binary files /dev/null and b/Habitica/res/drawable-hdpi/sub_benefits_pet.png differ
diff --git a/Habitica/res/drawable-hdpi/subscribe_header.png b/Habitica/res/drawable-hdpi/subscribe_header.png
new file mode 100644
index 000000000..d85ebffed
Binary files /dev/null and b/Habitica/res/drawable-hdpi/subscribe_header.png differ
diff --git a/Habitica/res/drawable-hdpi/subscriber_header.png b/Habitica/res/drawable-hdpi/subscriber_header.png
new file mode 100644
index 000000000..742cc2c61
Binary files /dev/null and b/Habitica/res/drawable-hdpi/subscriber_header.png differ
diff --git a/Habitica/res/drawable-mdpi/gift_sub_gift.png b/Habitica/res/drawable-mdpi/gift_sub_gift.png
new file mode 100644
index 000000000..56866a0f0
Binary files /dev/null and b/Habitica/res/drawable-mdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_amazon.png b/Habitica/res/drawable-mdpi/payment_amazon.png
new file mode 100644
index 000000000..282609505
Binary files /dev/null and b/Habitica/res/drawable-mdpi/payment_amazon.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_apple.png b/Habitica/res/drawable-mdpi/payment_apple.png
new file mode 100644
index 000000000..2a5fb5012
Binary files /dev/null and b/Habitica/res/drawable-mdpi/payment_apple.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_gift.png b/Habitica/res/drawable-mdpi/payment_gift.png
new file mode 100644
index 000000000..70e6204a2
Binary files /dev/null and b/Habitica/res/drawable-mdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_google.png b/Habitica/res/drawable-mdpi/payment_google.png
new file mode 100644
index 000000000..2c50f030f
Binary files /dev/null and b/Habitica/res/drawable-mdpi/payment_google.png differ
diff --git a/Habitica/res/drawable-mdpi/payment_stripe.png b/Habitica/res/drawable-mdpi/payment_stripe.png
new file mode 100644
index 000000000..9eafa4d31
Binary files /dev/null and b/Habitica/res/drawable-mdpi/payment_stripe.png differ
diff --git a/Habitica/res/drawable-mdpi/separator_fancy.png b/Habitica/res/drawable-mdpi/separator_fancy.png
new file mode 100644
index 000000000..cdb42e4e4
Binary files /dev/null and b/Habitica/res/drawable-mdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-mdpi/sub_benefits_drops.png b/Habitica/res/drawable-mdpi/sub_benefits_drops.png
new file mode 100644
index 000000000..79ca2ec06
Binary files /dev/null and b/Habitica/res/drawable-mdpi/sub_benefits_drops.png differ
diff --git a/Habitica/res/drawable-mdpi/sub_benefits_gems.png b/Habitica/res/drawable-mdpi/sub_benefits_gems.png
new file mode 100644
index 000000000..eed43a224
Binary files /dev/null and b/Habitica/res/drawable-mdpi/sub_benefits_gems.png differ
diff --git a/Habitica/res/drawable-mdpi/sub_benefits_hourglasses.png b/Habitica/res/drawable-mdpi/sub_benefits_hourglasses.png
new file mode 100644
index 000000000..b49dcda1b
Binary files /dev/null and b/Habitica/res/drawable-mdpi/sub_benefits_hourglasses.png differ
diff --git a/Habitica/res/drawable-mdpi/sub_benefits_pet.png b/Habitica/res/drawable-mdpi/sub_benefits_pet.png
new file mode 100644
index 000000000..95f4df379
Binary files /dev/null and b/Habitica/res/drawable-mdpi/sub_benefits_pet.png differ
diff --git a/Habitica/res/drawable-mdpi/subscribe_header.png b/Habitica/res/drawable-mdpi/subscribe_header.png
new file mode 100644
index 000000000..7d12f7721
Binary files /dev/null and b/Habitica/res/drawable-mdpi/subscribe_header.png differ
diff --git a/Habitica/res/drawable-mdpi/subscriber_header.png b/Habitica/res/drawable-mdpi/subscriber_header.png
new file mode 100644
index 000000000..01d387845
Binary files /dev/null and b/Habitica/res/drawable-mdpi/subscriber_header.png differ
diff --git a/Habitica/res/drawable-xhdpi/gift_sub_gift.png b/Habitica/res/drawable-xhdpi/gift_sub_gift.png
new file mode 100644
index 000000000..1c5545eec
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_amazon.png b/Habitica/res/drawable-xhdpi/payment_amazon.png
new file mode 100644
index 000000000..f4369b2af
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/payment_amazon.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_apple.png b/Habitica/res/drawable-xhdpi/payment_apple.png
new file mode 100644
index 000000000..ea88e2191
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/payment_apple.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_gift.png b/Habitica/res/drawable-xhdpi/payment_gift.png
new file mode 100644
index 000000000..19ccd6825
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_google.png b/Habitica/res/drawable-xhdpi/payment_google.png
new file mode 100644
index 000000000..ce04cdf0e
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/payment_google.png differ
diff --git a/Habitica/res/drawable-xhdpi/payment_stripe.png b/Habitica/res/drawable-xhdpi/payment_stripe.png
new file mode 100644
index 000000000..373e72d5d
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/payment_stripe.png differ
diff --git a/Habitica/res/drawable-xhdpi/separator_fancy.png b/Habitica/res/drawable-xhdpi/separator_fancy.png
new file mode 100644
index 000000000..d53d75b21
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-xhdpi/sub_benefits_drops.png b/Habitica/res/drawable-xhdpi/sub_benefits_drops.png
new file mode 100644
index 000000000..5a2b9560b
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/sub_benefits_drops.png differ
diff --git a/Habitica/res/drawable-xhdpi/sub_benefits_gems.png b/Habitica/res/drawable-xhdpi/sub_benefits_gems.png
new file mode 100644
index 000000000..c8abcb2a4
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/sub_benefits_gems.png differ
diff --git a/Habitica/res/drawable-xhdpi/sub_benefits_hourglasses.png b/Habitica/res/drawable-xhdpi/sub_benefits_hourglasses.png
new file mode 100644
index 000000000..39a8ceefc
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/sub_benefits_hourglasses.png differ
diff --git a/Habitica/res/drawable-xhdpi/sub_benefits_pet.png b/Habitica/res/drawable-xhdpi/sub_benefits_pet.png
new file mode 100644
index 000000000..bf7e56268
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/sub_benefits_pet.png differ
diff --git a/Habitica/res/drawable-xhdpi/subscribe_header.png b/Habitica/res/drawable-xhdpi/subscribe_header.png
new file mode 100644
index 000000000..f88f602f6
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/subscribe_header.png differ
diff --git a/Habitica/res/drawable-xhdpi/subscriber_header.png b/Habitica/res/drawable-xhdpi/subscriber_header.png
new file mode 100644
index 000000000..3df8a32f8
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/subscriber_header.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gift_sub_gift.png b/Habitica/res/drawable-xxhdpi/gift_sub_gift.png
new file mode 100644
index 000000000..9593bd7ed
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_amazon.png b/Habitica/res/drawable-xxhdpi/payment_amazon.png
new file mode 100644
index 000000000..d5bb8b689
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/payment_amazon.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_apple.png b/Habitica/res/drawable-xxhdpi/payment_apple.png
new file mode 100644
index 000000000..83964ae9b
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/payment_apple.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_gift.png b/Habitica/res/drawable-xxhdpi/payment_gift.png
new file mode 100644
index 000000000..35bd1cc3b
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_google.png b/Habitica/res/drawable-xxhdpi/payment_google.png
new file mode 100644
index 000000000..a2c1a1f92
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/payment_google.png differ
diff --git a/Habitica/res/drawable-xxhdpi/payment_stripe.png b/Habitica/res/drawable-xxhdpi/payment_stripe.png
new file mode 100644
index 000000000..70b7f477a
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/payment_stripe.png differ
diff --git a/Habitica/res/drawable-xxhdpi/separator_fancy.png b/Habitica/res/drawable-xxhdpi/separator_fancy.png
new file mode 100644
index 000000000..7c853feac
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-xxhdpi/sub_benefits_drops.png b/Habitica/res/drawable-xxhdpi/sub_benefits_drops.png
new file mode 100644
index 000000000..88fc52f7c
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/sub_benefits_drops.png differ
diff --git a/Habitica/res/drawable-xxhdpi/sub_benefits_gems.png b/Habitica/res/drawable-xxhdpi/sub_benefits_gems.png
new file mode 100644
index 000000000..2597b086b
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/sub_benefits_gems.png differ
diff --git a/Habitica/res/drawable-xxhdpi/sub_benefits_hourglasses.png b/Habitica/res/drawable-xxhdpi/sub_benefits_hourglasses.png
new file mode 100644
index 000000000..88aa17e3b
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/sub_benefits_hourglasses.png differ
diff --git a/Habitica/res/drawable-xxhdpi/sub_benefits_pet.png b/Habitica/res/drawable-xxhdpi/sub_benefits_pet.png
new file mode 100644
index 000000000..b462049dc
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/sub_benefits_pet.png differ
diff --git a/Habitica/res/drawable-xxhdpi/subscribe_header.png b/Habitica/res/drawable-xxhdpi/subscribe_header.png
new file mode 100644
index 000000000..3c814eb58
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/subscribe_header.png differ
diff --git a/Habitica/res/drawable-xxhdpi/subscriber_header.png b/Habitica/res/drawable-xxhdpi/subscriber_header.png
new file mode 100644
index 000000000..216db66e5
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/subscriber_header.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/gift_sub_gift.png b/Habitica/res/drawable-xxxhdpi/gift_sub_gift.png
new file mode 100644
index 000000000..956ed15dd
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/gift_sub_gift.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/payment_amazon.png b/Habitica/res/drawable-xxxhdpi/payment_amazon.png
new file mode 100644
index 000000000..7f723c9c4
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/payment_amazon.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/payment_apple.png b/Habitica/res/drawable-xxxhdpi/payment_apple.png
new file mode 100644
index 000000000..3aea96aa4
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/payment_apple.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/payment_gift.png b/Habitica/res/drawable-xxxhdpi/payment_gift.png
new file mode 100644
index 000000000..8ebd095aa
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/payment_gift.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/payment_google.png b/Habitica/res/drawable-xxxhdpi/payment_google.png
new file mode 100644
index 000000000..6304de4e3
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/payment_google.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/payment_stripe.png b/Habitica/res/drawable-xxxhdpi/payment_stripe.png
new file mode 100644
index 000000000..8f03f3fbe
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/payment_stripe.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/separator_fancy.png b/Habitica/res/drawable-xxxhdpi/separator_fancy.png
new file mode 100644
index 000000000..49a497f1c
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/separator_fancy.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/sub_benefits_drops.png b/Habitica/res/drawable-xxxhdpi/sub_benefits_drops.png
new file mode 100644
index 000000000..d980e1d29
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/sub_benefits_drops.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/sub_benefits_gems.png b/Habitica/res/drawable-xxxhdpi/sub_benefits_gems.png
new file mode 100644
index 000000000..06aab1c91
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/sub_benefits_gems.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/sub_benefits_hourglasses.png b/Habitica/res/drawable-xxxhdpi/sub_benefits_hourglasses.png
new file mode 100644
index 000000000..7992c08ee
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/sub_benefits_hourglasses.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/sub_benefits_pet.png b/Habitica/res/drawable-xxxhdpi/sub_benefits_pet.png
new file mode 100644
index 000000000..aa1887057
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/sub_benefits_pet.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/subscribe_header.png b/Habitica/res/drawable-xxxhdpi/subscribe_header.png
new file mode 100644
index 000000000..54b12e131
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/subscribe_header.png differ
diff --git a/Habitica/res/drawable-xxxhdpi/subscriber_header.png b/Habitica/res/drawable-xxxhdpi/subscriber_header.png
new file mode 100644
index 000000000..17fbaf9e5
Binary files /dev/null and b/Habitica/res/drawable-xxxhdpi/subscriber_header.png differ
diff --git a/Habitica/res/drawable/g1g1_box.xml b/Habitica/res/drawable/g1g1_box.xml
new file mode 100644
index 000000000..3c098bd65
--- /dev/null
+++ b/Habitica/res/drawable/g1g1_box.xml
@@ -0,0 +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"/>
+    <corners android:radius="8dip"/>
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/pill_bg_purple_400.xml b/Habitica/res/drawable/pill_bg_purple_400.xml
new file mode 100644
index 000000000..6d8163ecf
--- /dev/null
+++ b/Habitica/res/drawable/pill_bg_purple_400.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/brand_400"/>
+    <corners android:radius="20dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/pill_bg_yellow.xml b/Habitica/res/drawable/pill_bg_yellow.xml
new file mode 100644
index 000000000..188cc1ecf
--- /dev/null
+++ b/Habitica/res/drawable/pill_bg_yellow.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/yellow_5"/>
+    <corners android:radius="20dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/subscription_box_bg.xml b/Habitica/res/drawable/subscription_box_bg.xml
new file mode 100644
index 000000000..cc3311445
--- /dev/null
+++ b/Habitica/res/drawable/subscription_box_bg.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/gray_700"/>
+    <corners android:radius="8dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/subscription_box_bg_selected.xml b/Habitica/res/drawable/subscription_box_bg_selected.xml
new file mode 100644
index 000000000..3c5034039
--- /dev/null
+++ b/Habitica/res/drawable/subscription_box_bg_selected.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/gray_700"/>
+    <corners android:radius="8dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+    <stroke android:color="@color/brand_400" android:width="3dp" />
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/subscription_selected.xml b/Habitica/res/drawable/subscription_selected.xml
index 574a817f9..67dc338aa 100644
--- a/Habitica/res/drawable/subscription_selected.xml
+++ b/Habitica/res/drawable/subscription_selected.xml
@@ -5,14 +5,14 @@
     <item>
         <shape android:shape="oval">
             <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-            <solid android:color="@color/white" />
+            <solid android:color="@color/brand_400" />
             <stroke android:color="@color/transparent" android:width="5dp" />
         </shape>
     </item>
     <item>
         <shape android:shape="oval">
             <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-            <stroke android:color="@color/white" android:width="1dp" />
+            <stroke android:color="@color/brand_400" android:width="2dp" />
             <size android:height="16dp" android:width="16dp" />
         </shape>
     </item>
diff --git a/Habitica/res/drawable/subscription_unselected.xml b/Habitica/res/drawable/subscription_unselected.xml
index ce7b3e2bf..6b83228e1 100644
--- a/Habitica/res/drawable/subscription_unselected.xml
+++ b/Habitica/res/drawable/subscription_unselected.xml
@@ -2,7 +2,7 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
     <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-    <stroke android:color="?colorPrimary" android:width="1dp" />
+    <stroke android:color="@color/brand_400" android:width="2dp" />
     <size android:height="16dp" android:width="16dp" />
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
 </shape>
diff --git a/Habitica/res/layout/activity_gem_purchase.xml b/Habitica/res/layout/activity_gem_purchase.xml
index 5b3229913..aa1383e4c 100644
--- a/Habitica/res/layout/activity_gem_purchase.xml
+++ b/Habitica/res/layout/activity_gem_purchase.xml
@@ -1,64 +1,43 @@
 <FrameLayout 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"
-             tools:context=".ui.activities.MainActivity"
-             android:id="@+id/overlayFrameLayout">
+    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"
+    tools:context=".ui.activities.MainActivity"
+    android:id="@+id/overlayFrameLayout">
     <androidx.drawerlayout.widget.DrawerLayout
-            android:id="@+id/drawer_layout"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-                        android:gravity="center">
+        android:id="@+id/drawer_layout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center">
 
         <androidx.coordinatorlayout.widget.CoordinatorLayout
             android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:elevation="0dp"
-                tools:context=".ui.activities.MainActivity">
+            android:layout_height="match_parent"
+            android:elevation="0dp"
+            tools:context=".ui.activities.MainActivity">
 
             <FrameLayout
-                    android:id="@+id/fragment_container"
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:background="@android:color/white"
-                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
+                android:id="@+id/fragment_container"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@android:color/white"
+                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
             <com.google.android.material.appbar.AppBarLayout
-                    android:id="@+id/appbar"
+                android:id="@+id/appbar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fitsSystemWindows="false">
+
+                <androidx.appcompat.widget.Toolbar
+                    android:id="@+id/toolbar"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:fitsSystemWindows="false">
-
-                <com.google.android.material.appbar.CollapsingToolbarLayout
-                        android:id="@+id/collapsing_toolbar"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:fitsSystemWindows="false"
-                        app:titleEnabled="false"
-                        app:contentScrim="?attr/colorPrimary"
-                        app:expandedTitleMarginEnd="?attr/actionBarSize"
-                        app:expandedTitleMarginStart="0dp"
-                        app:layout_scrollFlags="scroll|exitUntilCollapsed">
-
-                    <ImageView
-                        android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:layout_marginTop="?attr/actionBarSize"
-                            app:layout_collapseMode="parallax"
-                            android:src="@drawable/support_habitica"
-                            android:paddingBottom="21dp"
-                            android:contentDescription="@string/support_habitica"/>
-
-                    <androidx.appcompat.widget.Toolbar
-                            android:id="@+id/toolbar"
-                            android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:minHeight="?attr/actionBarSize"
-                            android:theme="@style/Toolbar"
-                            app:layout_collapseMode="pin"
-                            app:popupTheme="@style/Theme.AppCompat.Light" />
-                </com.google.android.material.appbar.CollapsingToolbarLayout>
+                    android:minHeight="?attr/actionBarSize"
+                    android:background="@color/white"
+                    app:layout_collapseMode="pin"
+                    app:popupTheme="@style/Theme.AppCompat.Light" />
             </com.google.android.material.appbar.AppBarLayout>
 
         </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/Habitica/res/layout/fragment_subscription.xml b/Habitica/res/layout/fragment_subscription.xml
index e55d8cea5..e6ce68676 100644
--- a/Habitica/res/layout/fragment_subscription.xml
+++ b/Habitica/res/layout/fragment_subscription.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.core.widget.NestedScrollView
+    android:id="@+id/scroll_view"
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
@@ -16,33 +17,28 @@
         <RelativeLayout
             android:id="@+id/gift_subscription_container"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@color/teal_50">
+            android:layout_height="80dp"
+            android:background="@drawable/g1g1_box"
+            android:layout_marginStart="10dp"
+            android:layout_marginEnd="10dp"
+            android:layout_marginTop="10dp"
+            android:clipChildren="true"
+            android:clipToPadding="true">
             <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/presents1"
+                android:scaleType="center"
                 android:layout_alignParentTop="true"
                 android:layout_alignParentStart="true"
-                android:layout_marginTop="18dp"/>
+                android:layout_alignParentBottom="false"/>
             <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/presents2"
+                android:scaleType="center"
                 android:layout_alignParentTop="true"
-                android:layout_alignParentEnd="true"
-                android:layout_marginTop="18dp"/>
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:paddingTop="21dp"
-                android:paddingBottom="21dp"
-                android:orientation="vertical"
-                android:gravity="center_horizontal"
-                android:layout_alignParentEnd="true"
-                android:layout_alignParentStart="true"
-                android:layout_alignParentTop="true"
-                android:layout_alignParentBottom="true">
+                android:layout_alignParentEnd="true"/>
                 <TextView
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
@@ -53,18 +49,8 @@
                     android:textColor="@color/white"
                     android:textSize="16sp"
                     android:fontFamily="@string/font_family_medium"
-                    android:layout_marginBottom="12dp"/>
-                <Button
-                    android:id="@+id/gift_subscription_promo_button"
-                    android:layout_width="wrap_content"
-                    android:layout_height="40dp"
-                    android:text="@string/gift_subscription"
-                    android:background="@drawable/white_rounded_border"
-                    android:textColor="@color/white"
-                    android:textAllCaps="false"
-                    android:paddingLeft="12dp"
-                    android:paddingRight="12dp"/>
-            </LinearLayout>
+                    android:layout_marginBottom="12dp"
+                    android:layout_centerInParent="true"/>
         </RelativeLayout>
 
         <LinearLayout
@@ -72,134 +58,193 @@
             android:layout_height="wrap_content"
             android:padding="20dp">
 
+            <ImageView
+                android:id="@+id/header_image_view"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/subscribe_header"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginBottom="20dp"/>
+
+            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:id="@+id/subscriptionDetails"/>
+
             <TextView
                 android:id="@+id/subscribeBenefitsTitle"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/subscribe_prompt"
                 android:gravity="center"
-                android:textStyle="normal|bold"
-                android:textColor="?colorPrimary"
-                android:textSize="16sp"
+                style="@style/Subheader1"
+                android:textColor="@color/brand_300"
                 android:lineSpacingExtra="4dp"
                 android:layout_marginTop="8dp"
-                android:layout_marginBottom="16dp"
                 android:layout_marginLeft="26dp"
                 android:layout_marginRight="26dp"/>
 
-            <FrameLayout
-                android:id="@+id/subscribe_listitem1_box"
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/separator_fancy"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginTop="20dp"
+                android:layout_marginBottom="20dp"/>
+
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-
-                <TextView
-                    android:text="@string/subscribe_listitem1"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_gems"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem1_expand"
-                    android:layout_gravity="end"/>
-
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem1_description"
-                android:text="@string/subscribe_listitem1_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem1"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem1_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone"/>
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem2_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-                <TextView
-                    android:text="@string/subscribe_listitem2"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_hourglasses"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem2_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem2_description"
-                android:text="@string/subscribe_listitem2_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem2"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem2_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem3_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-                <TextView
-                    android:text="@string/subscribe_listitem3"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem3_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem3_description"
-                android:text="@string/subscribe_listitem3_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem3"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem3_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem4_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox"
-                android:layout_marginBottom="8dp">
-                <TextView
-                    android:text="@string/subscribe_listitem4"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_pet"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem4_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem4_description"
-                android:text="@string/subscribe_listitem4_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem4"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem4_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
+                android:orientation="horizontal">
+                <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_drops"
+                    android:scaleType="center"/>
+                <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem5"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem5_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/separator_fancy"
+                android:layout_gravity="center"
+                android:layout_marginTop="20dp"
+                android:layout_marginBottom="20dp"/>
 
             <ProgressBar
                 style="?android:attr/progressBarStyle"
@@ -232,6 +277,18 @@
                 android:layout_marginTop="24dp"
                 >
 
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:gravity="center_horizontal"
+                    style="@style/Subheader1"
+                    android:textColor="@color/brand_300"
+                    android:text="@string/subscribe_options_title"
+                    android:layout_marginStart="20dp"
+                    android:layout_marginEnd="20dp"
+                    android:layout_marginBottom="20dp"/>
+
                 <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
                     android:id="@+id/subscription1month"
                     android:layout_width="match_parent"
@@ -259,9 +316,7 @@
                     android:layout_height="wrap_content"
                     app:recurringText="@string/twelve_months"
                     app:gemCapText="@string/subscribe12month_gemcap"
-                    app:hourGlassCount="4" >
-
-                </com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView>
+                    app:hourGlassCount="4" />
 
                 <Button
                     android:text="@string/subscribe"
@@ -272,14 +327,13 @@
                     android:textAllCaps="false"
                     android:layout_marginTop="8dp"/>
             </LinearLayout>
-
-
-            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
-                android:layout_width="match_parent"
+            <ImageView
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:id="@+id/subscriptionDetails"
-                android:layout_marginTop="24dp"/>
-
+                android:layout_gravity="center_horizontal"
+                android:src="@drawable/gift_sub_gift"
+                android:layout_marginTop="24dp"
+                android:layout_marginBottom="2dp" />
             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
@@ -287,8 +341,7 @@
                 android:text="@string/subscribe_gift_description"
                 android:gravity="center_horizontal"
                 android:layout_marginLeft="@dimen/spacing_large"
-                android:layout_marginRight="@dimen/spacing_large"
-                android:layout_marginTop="@dimen/spacing_large"/>
+                android:layout_marginRight="@dimen/spacing_large"/>
             <Button
                 android:id="@+id/gift_subscription_button"
                 android:layout_width="match_parent"
@@ -297,7 +350,6 @@
                 android:background="@color/transparent"
                 android:textColor="?colorAccent"
                 android:textAllCaps="false"/>
-
         </LinearLayout>
         <LinearLayout
             android:layout_width="match_parent"
diff --git a/Habitica/res/layout/purchase_subscription_view.xml b/Habitica/res/layout/purchase_subscription_view.xml
index 224b040ef..4b9b728b7 100644
--- a/Habitica/res/layout/purchase_subscription_view.xml
+++ b/Habitica/res/layout/purchase_subscription_view.xml
@@ -1,8 +1,9 @@
  <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="@color/gem_view_background"
+    android:background="@drawable/subscription_box_bg"
     android:gravity="center"
     android:minHeight="80dp"
     android:layout_marginBottom="8dp">
@@ -10,7 +11,6 @@
     <FrameLayout
         android:layout_width="50dp"
         android:layout_height="match_parent"
-        android:background="@color/brand_700"
         android:id="@+id/subscriptionSelectedFrameView">
         <View
             android:id="@+id/subscriptionSelectedView"
@@ -25,9 +25,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginEnd="@dimen/spacing_medium"
-        android:layout_marginRight="@dimen/spacing_medium"
         android:layout_marginStart="@dimen/spacing_large"
-        android:layout_marginLeft="@dimen/spacing_large"
         android:layout_marginTop="8dp"
         android:layout_marginBottom="8dp">
 
@@ -35,7 +33,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:id="@+id/priceLabel"
-            android:textColor="?colorPrimary"
+            android:textColor="@color/gray_50"
             android:textSize="24sp"
             android:fontFamily="@string/font_family_medium"
             tools:text="$ 21" />
@@ -44,7 +42,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:id="@+id/descriptionTextView"
-            android:textColor="?colorPrimary"
+            android:textColor="@color/gray_50"
             tools:text="recurring every month"
             />
         <LinearLayout
@@ -57,7 +55,6 @@
                 tools:text="@string/subscribe1month.gemcap"
                 style="@style/Pill"
                 android:layout_marginTop="4dp"
-                android:layout_marginRight="8dp"
                 android:layout_marginEnd="8dp"/>
             <TextView
                 android:id="@+id/hourglassTextView"
diff --git a/Habitica/res/layout/subscription_details.xml b/Habitica/res/layout/subscription_details.xml
index 2ed42e21c..882a27c9c 100644
--- a/Habitica/res/layout/subscription_details.xml
+++ b/Habitica/res/layout/subscription_details.xml
@@ -6,6 +6,21 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:background="@color/white">
+    <ImageView
+        android:id="@+id/heart_icon"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        android:layout_gravity="center_horizontal"/>
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/thanks_for_subscribing"
+        style="@style/Body2"
+        android:textColor="@color/gray_300"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginBottom="12dp"
+        android:layout_marginTop="4dp"
+        />
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -19,7 +34,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/subscription"
-                style="@style/subscriptionBoxText.Title" />
+                style="@style/subscriptionBoxText.Title"/>
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
@@ -35,6 +50,14 @@
             style="@style/Pill.Selected.Green"
             android:id="@+id/subscriptionStatusActive"
             android:layout_gravity="center_vertical"/>
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/not_recurring"
+            style="@style/Pill.Selected.Yellow"
+            android:id="@+id/subscriptionStatusNotRecurring"
+            android:layout_gravity="center_vertical"
+            android:visibility="gone"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
@@ -43,22 +66,43 @@
             android:id="@+id/subscriptionStatusInactive"
             android:layout_gravity="center_vertical"
             android:visibility="gone"/>
-    </LinearLayout>
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        style="@style/subscriptionBox">
-        <TextView
-            android:layout_width="0dp"
-            android:layout_weight="1"
-            android:layout_height="wrap_content"
-            android:text="@string/payment_method"
-            style="@style/subscriptionBoxText.Title" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:id="@+id/paymentProcessorTextView"
-            tools:text="Google" />
+            android:text="@string/cancelled"
+            style="@style/Pill.Selected.Red"
+            android:id="@+id/subscriptionStatusCancelled"
+            android:layout_gravity="center_vertical"
+            android:visibility="gone"/>
+    </LinearLayout>
+    <LinearLayout
+        android:id="@+id/payment_processor_wrapper"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        style="@style/subscriptionBox">
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="vertical">
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/payment_method"
+                style="@style/subscriptionBoxText.Title" />
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:id="@+id/subscription_payment_method_textview"
+                tools:text="Recurring every 3 months"
+                style="@style/subscriptionBoxText.Subtitle" />
+        </LinearLayout>
+
+        <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:id="@+id/paymentProcessorImageView"
+            android:layout_gravity="center_vertical"/>
     </LinearLayout>
 
     <LinearLayout
@@ -125,17 +169,19 @@
     </LinearLayout>
 
     <LinearLayout
+        android:id="@+id/change_subscription_wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         style="@style/subscriptionBox"
         android:orientation="vertical">
         <TextView
+            android:id="@+id/change_subscription_title"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/cancel_subscription"
             style="@style/subscriptionBoxText.Title" />
         <TextView
-            android:id="@+id/cancelSubscriptionDescription"
+            android:id="@+id/change_subscription_description"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             style="@style/subscriptionBoxText.Subtitle"
@@ -143,12 +189,12 @@
             android:layout_marginTop="8dp"
             android:layout_marginBottom="8dp"/>
         <Button
-            android:id="@+id/visitWebsiteButton"
+            android:id="@+id/change_subscription_button"
             android:layout_width="match_parent"
             android:layout_height="32dp"
             android:text="@string/visit_website"
             android:layout_gravity="center"
-            style="@style/HabiticaButton.Purple.Small"/>
+            style="@style/HabiticaButton.Purple"/>
     </LinearLayout>
 
 </LinearLayout>
\ No newline at end of file
diff --git a/Habitica/res/values/colors.xml b/Habitica/res/values/colors.xml
index 24a4143d8..a3a799e93 100644
--- a/Habitica/res/values/colors.xml
+++ b/Habitica/res/values/colors.xml
@@ -16,13 +16,14 @@
     <color name="maroon_50">#C92B2B</color>
     <color name="maroon_10">#B01515</color>
     <color name="maroon_5">#7D0C0C</color>
+    <color name="maroon_1">#4C0001</color>
 
     <color name="red_500">#ffb6b8</color>
     <color name="red_100">#FF6165</color>
     <color name="red_50">#F74E52</color>
     <color name="red_10">#F23035</color>
     <color name="red_5">#BF262B</color>
-    <color name="red_1">#8C1C20</color>
+    <color name="red_1">#6C0406</color>
 
     <color name="orange_500">#ffc8a7</color>
     <color name="orange_100">#FF944C</color>
@@ -109,7 +110,7 @@
 
     <color name="widget_background">#c8432874</color>
 
-    <color name="gem_view_background">@color/habit_inactive_gray</color>
+    <color name="gem_view_background">@color/gray_700</color>
     <color name="task_border_gray">#1a000000</color>
     <color name="task_secondary_text">#B2B2B2</color>
     <color name="gem_icon_color">#24cc8f</color>
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index a6cb28e3c..2e0e80197 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -383,18 +383,20 @@
     <string name="has_tag">Has Tag</string>
     <string name="subscribe_title">Subscribing supports the developers and helps keep Habitica running</string>
     <string name="subscribe_prompt">Become a subscriber and you’ll get these useful benefits:</string>
-    <string name="subscribe_listitem1">Buy gems with gold</string>
-    <string name="subscribe_listitem2">Exclusive monthly items</string>
-    <string name="subscribe_listitem3">Retain additional history entries</string>
-    <string name="subscribe_listitem4">Daily drop-caps doubled</string>
+    <string name="subscribe_listitem1">Gold for Gems</string>
+    <string name="subscribe_listitem2">Mystic Hourglasses</string>
+    <string name="subscribe_listitem3">Monthly Mystery Items</string>
+    <string name="subscribe_listitem4">Special Subscriber Pet</string>
+    <string name="subscribe_listitem5">Double the Drops</string>
     <string name="subscriptions">Subscriptions</string>
     <string name="subscription_duration">Recurring every %s</string>
     <string name="subscription_duration_norenew">For %s</string>
     <string name="subscribe">Subscribe</string>
-    <string name="subscribe_listitem1_description">Alexander the Merchant will now sell you gems for 20 gold each!\n\nHis monthly shipments are initially capped at 25 Gems per month, but can increase based on your subscription length.\n\nThe cap increases by 5 Gems for every three months of consecutive subscription, up to a maximum of 50 Gems per month!</string>
-    <string name="subscribe_listitem2_description">Each month you will receive a unique cosmetic item for your avatar!\n\nPlus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.</string>
-    <string name="subscribe_listitem3_description">Makes completed To-Dos and task history available for longer.</string>
-    <string name="subscribe_listitem4_description">Double drop caps will let you receive more items from your completed tasks every day, helping you complete your stable faster!</string>
+    <string name="subscribe_listitem1_description">You’ll be able to buy Gems from the Market for 20 gold each!</string>
+    <string name="subscribe_listitem2_description">Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!</string>
+    <string name="subscribe_listitem3_description">Subscribe now to get an exclusive set now 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_listitem5_description">Discover even more items in Habitica with a 2x bonus daily drop rate.</string>
     <string name="subscribe1month_gemcap">25 Gem cap</string>
     <string name="subscribe3month_gemcap">30 Gem cap</string>
     <string name="subscribe6month_gemcap">35 Gem cap</string>
@@ -891,4 +893,13 @@
     <string name="apple_sign_in">Sign in with Apple</string>
     <string name="google">Google</string>
     <string name="send_invites">Send Invites</string>
+    <string name="cancelled">Cancelled</string>
+    <string name="not_recurring">Not Recurring</string>
+    <string name="ending_on">Ending on %s</string>
+    <string name="subscribe_options_title">Choose the Subscription length that works for you</string>
+    <string name="thanks_for_subscribing">Thanks for subscribing</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="gifted">Gifted</string>
 </resources>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index 71693e132..2ad0c35dc 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -69,19 +69,19 @@
     </style>
 
     <style name="MainAppTheme.Maroon">
-        <item name="colorPrimary">@color/maroon_10</item>
-        <item name="colorPrimaryDark">@color/maroon_5</item>
+        <item name="colorPrimary">@color/red_1</item>
+        <item name="colorPrimaryDark">@color/maroon_1</item>
         <item name="colorAccent">@color/maroon_100</item>
-        <item name="android:colorPrimary">@color/maroon_10</item>
-        <item name="android:colorPrimaryDark">@color/maroon_5</item>
+        <item name="android:colorPrimary">@color/red_1</item>
+        <item name="android:colorPrimaryDark">@color/maroon_1</item>
         <item name="android:colorAccent">@color/maroon_100</item>
-        <item name="colorPrimaryOffset">@color/maroon_50</item>
-        <item name="colorPrimaryDistinct">@color/maroon_500</item>
-        <item name="colorBadgeBackground">@color/maroon_100</item>
-        <item name="textColorSecondaryDark">@color/maroon_500</item>
+        <item name="colorPrimaryOffset">@color/red_1</item>
+        <item name="colorPrimaryDistinct">@color/red_500</item>
+        <item name="colorBadgeBackground">@color/red_10</item>
+        <item name="textColorSecondaryDark">@color/red_500</item>
         <item name="android:textColorLink">@color/maroon_100</item>
-        <item name="textColorPrimaryDark">@color/maroon_500</item>
-        <item name="barColor">@color/maroon_10</item>
+        <item name="textColorPrimaryDark">@color/red_500</item>
+        <item name="barColor">@color/red_1</item>
         <item name="taskFormTint">@color/maroon_100</item>
     </style>
 
@@ -377,14 +377,18 @@
         <item name="android:background">@drawable/pill_bg_green</item>
     </style>
 
+    <style name="Pill.Selected.Yellow">
+        <item name="android:background">@drawable/pill_bg_yellow</item>
+    </style>
+
     <style name="Pill.Selected.Red">
         <item name="android:background">@drawable/pill_bg_red</item>
     </style>
 
     <style name="subscriptionBox">
-        <item name="android:background">@color/habit_inactive_gray</item>
-        <item name="android:paddingTop">8dp</item>
-        <item name="android:paddingBottom">8dp</item>
+        <item name="android:background">@drawable/subscription_box_bg</item>
+        <item name="android:paddingTop">16dp</item>
+        <item name="android:paddingBottom">16dp</item>
         <item name="android:paddingLeft">18dp</item>
         <item name="android:paddingRight">18dp</item>
         <item name="android:layout_marginBottom">8dp</item>
@@ -396,10 +400,15 @@
 
     <style name="subscriptionBoxText.Title">
         <item name="android:textSize">14sp</item>
+        <item name="android:fontFamily" tools:targetApi="jelly_bean">
+            @string/font_family_medium
+        </item>
+        <item name="android:textColor">@color/black</item>
+        <item name="android:layout_marginBottom">4dp</item>
     </style>
 
     <style name="subscriptionBoxText.Subtitle">
-        <item name="android:textSize">11sp</item>
+        <item name="android:textSize">14sp</item>
         <item name="android:fontFamily" tools:targetApi="jelly_bean">
             @string/font_family_regular
         </item>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.java b/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.java
index fa4b844c7..827b7e48a 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.java
@@ -17,7 +17,7 @@ public class SubscriptionPlan extends RealmObject {
     public static String PLANID_BASIC12MONTH = "basic_12mo";
 
     @PrimaryKey
-    private String customerId;
+    public String customerId;
     public Date dateCreated;
     public Date dateUpdated;
     @Nullable
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 a04a7a8f0..fccf00917 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
@@ -51,7 +51,7 @@ class GemPurchaseActivity : BaseActivity() {
 
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
         supportActionBar?.setDisplayShowHomeEnabled(true)
-        supportActionBar?.setTitle(R.string.gem_purchase_toolbartitle)
+        supportActionBar?.title = ""
 
         purchaseHandler = PurchaseHandler(this, crashlyticsProxy)
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/NavigationDrawerFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/NavigationDrawerFragment.kt
index 35e674919..4760d534f 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/NavigationDrawerFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/NavigationDrawerFragment.kt
@@ -91,7 +91,7 @@ class NavigationDrawerFragment : DialogFragment() {
             questMenuView.visibility = View.GONE
             context?.let {
                 adapter.tintColor = it.getThemeColor(R.attr.colorPrimary)
-                adapter.backgroundTintColor = it.getThemeColor(R.attr.colorPrimaryOffset)
+                adapter.backgroundTintColor = it.getThemeColor(R.attr.colorPrimary)
             }
             adapter.items.filter { it.identifier == SIDEBAR_TAVERN }.forEach {
                 it.additionalInfo = null
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 f978a03d6..445e5a0b3 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
@@ -8,6 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.*
 import androidx.core.view.isVisible
+import androidx.core.widget.NestedScrollView
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.components.UserComponent
 import com.habitrpg.android.habitica.data.UserRepository
@@ -25,6 +26,7 @@ import com.habitrpg.android.habitica.ui.fragments.BaseFragment
 import com.habitrpg.android.habitica.ui.helpers.bindOptionalView
 import com.habitrpg.android.habitica.ui.helpers.bindView
 import com.habitrpg.android.habitica.ui.helpers.dismissKeyboard
+import com.habitrpg.android.habitica.ui.helpers.resetViews
 import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
 import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaAlertDialog
 import com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
@@ -45,24 +47,12 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
     @Inject
     lateinit var appConfigManager: AppConfigManager
 
+    private val scrollView: NestedScrollView? by bindView(R.id.scroll_view)
+
     private val giftOneGetOneContainer: ViewGroup? by bindView(R.id.gift_subscription_container)
-    private val giftOneGetOneButton: Button? by bindView(R.id.gift_subscription_promo_button)
     private val giftSubscriptionButton: Button? by bindView(R.id.gift_subscription_button)
 
-    private val subscribeListitem1Box: View? by bindView(R.id.subscribe_listitem1_box)
-    private val subscribeListitem2Box: View? by bindView(R.id.subscribe_listitem2_box)
-    private val subscribeListitem3Box: View? by bindView(R.id.subscribe_listitem3_box)
-    private val subscribeListitem4Box: View? by bindView(R.id.subscribe_listitem4_box)
-
-    private val subscribeListitem1Button: ImageView? by bindView(R.id.subscribe_listitem1_expand)
-    private val subscribeListitem2Button: ImageView? by bindView(R.id.subscribe_listitem2_expand)
-    private val subscribeListitem3Button: ImageView? by bindView(R.id.subscribe_listitem3_expand)
-    private val subscribeListitem4Button: ImageView? by bindView(R.id.subscribe_listitem4_expand)
-
-    private val subscribeListItem1Description: TextView? by bindView(R.id.subscribe_listitem1_description)
-    private val subscribeListItem2Description: TextView? by bindView(R.id.subscribe_listitem2_description)
-    private val subscribeListItem3Description: TextView? by bindView(R.id.subscribe_listitem3_description)
-    private val subscribeListItem4Description: TextView? by bindView(R.id.subscribe_listitem4_description)
+    private val headerImageView: ImageView? by bindView(R.id.header_image_view)
 
     private val loadingIndicator: ProgressBar? by bindOptionalView(R.id.loadingIndicator)
     private val subscriptionOptions: View? by bindView(R.id.subscriptionOptions)
@@ -103,10 +93,13 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
+        resetViews()
+
         subscriptionOptions?.visibility = View.GONE
         subscriptionDetailsView?.visibility = View.GONE
+        subscriptionDetailsView?.onShowSubscriptionOptions = { showSubscriptionOptions() }
 
-        giftOneGetOneButton?.setOnClickListener { showGiftSubscriptionDialog() }
+        giftOneGetOneContainer?.setOnClickListener { showGiftSubscriptionDialog() }
         giftSubscriptionButton?.setOnClickListener { showGiftSubscriptionDialog() }
 
         this.subscription1MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription1Month) })
@@ -114,11 +107,6 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         this.subscription6MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription6Month) })
         this.subscription12MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription12Month) })
 
-        this.subscribeListitem1Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem1Button, this.subscribeListItem1Description) }
-        this.subscribeListitem2Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem2Button, this.subscribeListItem2Description) }
-        this.subscribeListitem3Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem3Button, this.subscribeListItem3Description) }
-        this.subscribeListitem4Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem4Button, this.subscribeListItem4Description) }
-
         val heartDrawable = BitmapDrawable(resources, HabiticaIconsHelper.imageOfHeartLarge())
         supportTextView?.setCompoundDrawablesWithIntrinsicBounds(null, null, null, heartDrawable)
 
@@ -127,16 +115,6 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         giftOneGetOneContainer?.isVisible = appConfigManager.enableGiftOneGetOne()
     }
 
-    private fun toggleDescriptionView(button: ImageView?, descriptionView: TextView?) {
-        if (descriptionView?.visibility == View.VISIBLE) {
-            descriptionView.visibility = View.GONE
-            button?.setImageResource(R.drawable.ic_keyboard_arrow_down_black_24dp)
-        } else {
-            descriptionView?.visibility = View.VISIBLE
-            button?.setImageResource(R.drawable.ic_keyboard_arrow_up_black_24dp)
-        }
-    }
-
     override fun injectFragment(component: UserComponent) {
         component.inject(this)
     }
@@ -219,26 +197,35 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         if (user != null) {
             val isSubscribed = user?.isSubscribed ?: false
 
-            if (this.subscriptionDetailsView == null) {
+            if (subscriptionDetailsView == null) {
                 return
             }
 
             if (isSubscribed) {
-                this.subscriptionDetailsView?.visibility = View.VISIBLE
+                headerImageView?.setImageResource(R.drawable.subscriber_header)
+                subscriptionDetailsView?.visibility = View.VISIBLE
                 user?.purchased?.plan?.let { this.subscriptionDetailsView?.setPlan(it) }
-                this.subscribeBenefitsTitle?.setText(R.string.subscribe_prompt_thanks)
-                this.subscriptionOptions?.visibility = View.GONE
+                subscribeBenefitsTitle?.setText(R.string.subscribe_prompt_thanks)
+                subscriptionOptions?.visibility = View.GONE
             } else {
+                headerImageView?.setImageResource(R.drawable.subscribe_header)
                 if (!hasLoadedSubscriptionOptions) {
                     return
                 }
-                this.subscriptionOptions?.visibility = View.VISIBLE
-                this.subscriptionDetailsView?.visibility = View.GONE
+                subscriptionOptions?.visibility = View.VISIBLE
+                subscriptionDetailsView?.visibility = View.GONE
             }
-            this.loadingIndicator?.visibility = View.GONE
+            loadingIndicator?.visibility = View.GONE
         }
     }
 
+    private fun showSubscriptionOptions() {
+        subscriptionOptions?.visibility = View.VISIBLE
+        subscriptionOptions?.postDelayed({
+            scrollView?.smoothScrollTo(0, subscriptionOptions?.top ?: 0)
+        }, 500)
+    }
+
     private fun subscribeUser() {
         purchaseSubscription()
     }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/NoPartyFragmentFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/NoPartyFragmentFragment.kt
index eb0337f7c..d4bb074f8 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/NoPartyFragmentFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/NoPartyFragmentFragment.kt
@@ -23,7 +23,6 @@ import com.habitrpg.android.habitica.helpers.RxErrorHandler
 import com.habitrpg.android.habitica.models.members.Member
 import com.habitrpg.android.habitica.models.user.User
 import com.habitrpg.android.habitica.ui.activities.GroupFormActivity
-import com.habitrpg.android.habitica.ui.activities.MainActivity
 import com.habitrpg.android.habitica.ui.fragments.BaseMainFragment
 import com.habitrpg.android.habitica.ui.helpers.DataBindingUtils
 import com.habitrpg.android.habitica.ui.helpers.setMarkdown
@@ -72,7 +71,7 @@ class NoPartyFragmentFragment : BaseMainFragment() {
             val clipboard = context?.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager
             val clip = ClipData.newPlainText(context?.getString(R.string.username), user?.username)
             clipboard?.setPrimaryClip(clip)
-            val activity = activity as? MainActivity
+            val activity = activity
             if (activity != null) {
                 HabiticaSnackbar.showSnackbar(activity.snackbarContainer, getString(R.string.username_copied), HabiticaSnackbar.SnackbarDisplayType.NORMAL)
             }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/party/PartyFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/party/PartyFragment.kt
index 84880768d..609c5cdce 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/party/PartyFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/party/PartyFragment.kt
@@ -119,7 +119,7 @@ class PartyFragment : BaseMainFragment() {
                 return true
             }
             R.id.menu_guild_leave -> {
-                (detailFragment as? PartyDetailFragment)?.leaveParty()
+                detailFragment?.leaveParty()
                 return true
             }
             R.id.menu_guild_refresh -> {
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/social/ChatBarView.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/social/ChatBarView.kt
index 1d66da404..97be64169 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/social/ChatBarView.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/social/ChatBarView.kt
@@ -73,7 +73,7 @@ class ChatBarView : LinearLayout {
 
         HabiticaBaseApplication.userComponent?.inject(this)
 
-        chatEditText.addTextChangedListener(OnChangeTextWatcher { s, _, _, _ ->
+        chatEditText.addTextChangedListener(OnChangeTextWatcher { _, _, _, _ ->
                 setSendButtonEnabled(chatEditText.text.isNotEmpty() && chatEditText.text.length <= maxChatLength)
                 updateTextIndicator(chatEditText.text.toString())
         })
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 0f1aa028b..786344112 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
@@ -3,31 +3,27 @@ package com.habitrpg.android.habitica.ui.views.subscriptions
 
 import android.content.Context
 import android.content.Intent
+import android.graphics.drawable.BitmapDrawable
 import android.net.Uri
 import android.util.AttributeSet
 import android.view.View
-import android.widget.Button
 import android.widget.LinearLayout
-import android.widget.TextView
 import com.habitrpg.android.habitica.R
-import com.habitrpg.android.habitica.extensions.inflate
+import com.habitrpg.android.habitica.databinding.SubscriptionDetailsBinding
+import com.habitrpg.android.habitica.extensions.layoutInflater
 import com.habitrpg.android.habitica.models.user.SubscriptionPlan
-import com.habitrpg.android.habitica.ui.helpers.bindView
+import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
+import java.text.DateFormat
+import java.util.*
 
 class SubscriptionDetailsView : LinearLayout {
 
-    internal val subscriptionDurationTextView: TextView by bindView(R.id.subscriptionDurationTextView)
-    internal val subscriptionStatusActive: TextView by bindView(R.id.subscriptionStatusActive)
-    private val getSubscriptionStatusInactive: TextView by bindView(R.id.subscriptionStatusInactive)
-    internal val paymentProcessorTextView: TextView by bindView(R.id.paymentProcessorTextView)
-    internal val monthsSubscribedTextView: TextView by bindView(R.id.monthsSubscribedTextView)
-    internal val gemCapTextView: TextView by bindView(R.id.gemCapTextView)
-    internal val currentHourglassesTextView: TextView by bindView(R.id.currentHourglassesTextView)
-    private val cancelSubscripnDescription: TextView by bindView(R.id.cancelSubscriptionDescription)
-    internal val visitWebsiteButton: Button by bindView(R.id.visitWebsiteButton)
+    lateinit var binding: SubscriptionDetailsBinding
 
     private var plan: SubscriptionPlan? = null
 
+    var onShowSubscriptionOptions: (() -> Unit)? = null
+
     constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {
         setupView()
     }
@@ -37,20 +33,33 @@ class SubscriptionDetailsView : LinearLayout {
     }
 
     private fun setupView() {
-        inflate(R.layout.subscription_details, true)
-
-        visitWebsiteButton.setOnClickListener { openSubscriptionWebsite() }
+        binding = SubscriptionDetailsBinding.inflate(context.layoutInflater, this, true)
+        binding.changeSubscriptionButton.setOnClickListener { changeSubscriptionButtonTapped() }
+        binding.heartIcon.setImageDrawable(BitmapDrawable(context.resources, HabiticaIconsHelper.imageOfHeartLightBg()))
     }
 
     fun setPlan(plan: SubscriptionPlan) {
         this.plan = plan
 
         if (plan.isActive) {
-            subscriptionStatusActive.visibility = View.VISIBLE
-            getSubscriptionStatusInactive.visibility = View.GONE
+            if (plan.dateTerminated != null) {
+                if (plan.customerId == "Gift") {
+                    binding.subscriptionStatusNotRecurring.visibility = View.VISIBLE
+                    binding.subscriptionStatusCancelled.visibility = View.GONE
+                } else {
+                    binding.subscriptionStatusNotRecurring.visibility = View.GONE
+                    binding.subscriptionStatusCancelled.visibility = View.VISIBLE
+                }
+                binding.subscriptionStatusActive.visibility = View.GONE
+            } else {
+                binding.subscriptionStatusActive.visibility = View.VISIBLE
+                binding.subscriptionStatusNotRecurring.visibility = View.GONE
+            }
+            binding.subscriptionStatusInactive.visibility = View.GONE
         } else {
-            subscriptionStatusActive.visibility = View.GONE
-            getSubscriptionStatusInactive.visibility = View.VISIBLE
+            binding.subscriptionStatusActive.visibility = View.GONE
+            binding.subscriptionStatusInactive.visibility = View.VISIBLE
+            binding.subscriptionStatusNotRecurring.visibility = View.GONE
         }
 
         var duration: String? = null
@@ -68,31 +77,52 @@ class SubscriptionDetailsView : LinearLayout {
         }
 
         if (duration != null) {
-            subscriptionDurationTextView.text = resources.getString(R.string.subscription_duration, duration)
+            binding.subscriptionDurationTextView.text = resources.getString(R.string.subscription_duration, duration)
+        } else if (plan.dateTerminated != null) {
+            binding.subscriptionDurationTextView.text = resources.getString(R.string.ending_on, DateFormat.getDateInstance().format(plan.dateTerminated ?: Date()))
         }
 
-        paymentProcessorTextView.text = plan.paymentMethod
+        when (plan.paymentMethod) {
+            "Amazon" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_amazon)
+            "Apple" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_apple)
+            "Google" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_google)
+            "Stripe" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_stripe)
+             else -> {
+                 if (plan.customerId == "Gift") {
+                     binding.paymentProcessorImageView.setImageResource(R.drawable.payment_gift)
+                     binding.subscriptionPaymentMethodTextview.text = context.getString(R.string.gifted)
+                 } else {
+                     binding.paymentProcessorWrapper.visibility = View.GONE
+                 }
+             }
+        }
 
         if (plan.consecutive?.count == 1) {
-            monthsSubscribedTextView.text = resources.getString(R.string.one_month)
+            binding.monthsSubscribedTextView.text = resources.getString(R.string.one_month)
         } else {
-            monthsSubscribedTextView.text = resources.getString(R.string.x_months, plan.consecutive?.count ?: 0)
+            binding.monthsSubscribedTextView.text = resources.getString(R.string.x_months, plan.consecutive?.count ?: 0)
         }
-        gemCapTextView.text = plan.totalNumberOfGems().toString()
-        currentHourglassesTextView.text = plan.consecutive?.trinkets.toString()
+        binding.gemCapTextView.text = plan.totalNumberOfGems().toString()
+        binding.currentHourglassesTextView.text = plan.consecutive?.trinkets.toString()
 
         if (plan.paymentMethod != null) {
+            binding.changeSubscriptionTitle.setText(R.string.cancel_subscription)
             if (plan.paymentMethod == "Google") {
-                cancelSubscripnDescription.setText(R.string.cancel_subscription_google_description)
-                visitWebsiteButton.setText(R.string.open_in_store)
+                binding.changeSubscriptionDescription.setText(R.string.cancel_subscription_google_description)
+                binding.changeSubscriptionButton.setText(R.string.open_in_store)
             } else {
-                cancelSubscripnDescription.setText(R.string.cancel_subscription_notgoogle_description)
-                visitWebsiteButton.setText(R.string.visit_habitica_website)
+                binding.changeSubscriptionDescription.setText(R.string.cancel_subscription_notgoogle_description)
+                binding.changeSubscriptionButton.setText(R.string.visit_habitica_website)
             }
         }
+        if (plan.dateTerminated != null) {
+            binding.changeSubscriptionTitle.setText(R.string.resubscribe)
+            binding.changeSubscriptionDescription.setText(R.string.resubscribe_description)
+            binding.changeSubscriptionButton.setText(R.string.renew_subscription)
+        }
     }
 
-    private fun openSubscriptionWebsite() {
+    private fun changeSubscriptionButtonTapped() {
         if (plan?.paymentMethod != null) {
             val url = if (plan?.paymentMethod == "Google") {
                 "https://play.google.com/store/account/subscriptions"
@@ -100,6 +130,8 @@ class SubscriptionDetailsView : LinearLayout {
                 context.getString(R.string.base_url) + "/"
             }
             context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url)))
+        } else if (plan?.dateTerminated != null) {
+            onShowSubscriptionOptions?.invoke()
         }
     }
 }
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 fd2e2474c..8491765f3 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,48 +1,40 @@
 package com.habitrpg.android.habitica.ui.views.subscriptions
 
 import android.content.Context
-import androidx.core.content.ContextCompat
 import android.util.AttributeSet
 import android.view.View
 import android.widget.FrameLayout
-import android.widget.TextView
+import androidx.core.content.ContextCompat
 import com.habitrpg.android.habitica.R
-import com.habitrpg.android.habitica.ui.helpers.bindView
-import com.habitrpg.android.habitica.extensions.inflate
+import com.habitrpg.android.habitica.databinding.PurchaseSubscriptionViewBinding
+import com.habitrpg.android.habitica.extensions.layoutInflater
 
 
 class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayout(context, attrs) {
 
-    private val priceTextView: TextView by bindView(R.id.priceLabel)
-    internal val descriptionTextView: TextView by bindView(R.id.descriptionTextView)
-    internal val subscriptionSelectedView: View by bindView(R.id.subscriptionSelectedView)
-    internal val subscriptionSelectedFrameView: View by bindView(R.id.subscriptionSelectedFrameView)
-    internal val gemCapTextView: TextView by bindView(R.id.gemCapTextView)
-    private val hourGlassTextView: TextView by bindView(R.id.hourglassTextView)
+    private val binding = PurchaseSubscriptionViewBinding.inflate(context.layoutInflater, this, true)
 
     var sku: String? = null
 
     init {
-        inflate(R.layout.purchase_subscription_view, true)
-
         val a = context.theme.obtainStyledAttributes(
                 attrs,
                 R.styleable.SubscriptionOptionView,
                 0, 0)
 
         if (a.getBoolean(R.styleable.SubscriptionOptionView_isNonRecurring, false)) {
-            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 {
-            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))
         }
 
-        gemCapTextView.text = a.getText(R.styleable.SubscriptionOptionView_gemCapText)
+        binding.gemCapTextView.text = a.getText(R.styleable.SubscriptionOptionView_gemCapText)
         val hourGlassCount = a.getInteger(R.styleable.SubscriptionOptionView_hourGlassCount, 0)
         if (hourGlassCount != 0) {
-            hourGlassTextView.text = context.getString(R.string.subscription_hourglasses, hourGlassCount)
-            hourGlassTextView.visibility = View.VISIBLE
+            binding.hourglassTextView.text = context.getString(R.string.subscription_hourglasses, hourGlassCount)
+            binding.hourglassTextView.visibility = View.VISIBLE
         } else {
-            hourGlassTextView.visibility = View.GONE
+            binding.hourglassTextView.visibility = View.GONE
         }
 
     }
@@ -52,28 +44,32 @@ class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayou
     }
 
     fun setPriceText(text: String) {
-        this.priceTextView.text = text
+        binding.priceLabel.text = text
     }
 
     fun setIsPurchased(purchased: Boolean) {
         if (purchased) {
-            subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_selected)
-            subscriptionSelectedFrameView.setBackgroundResource(R.color.brand_300)
-            gemCapTextView.setBackgroundResource(R.drawable.pill_bg_green)
-            gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
-            hourGlassTextView.setBackgroundResource(R.drawable.pill_bg_green)
-            hourGlassTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
+            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.brand_300))
+            binding.descriptionTextView.setTextColor(ContextCompat.getColor(context, R.color.brand_300))
         } else {
-            subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_unselected)
-            subscriptionSelectedFrameView.setBackgroundResource(R.color.brand_700)
-            gemCapTextView.setBackgroundResource(R.drawable.pill_bg)
-            gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
-            hourGlassTextView.setBackgroundResource(R.drawable.pill_bg)
-            hourGlassTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.wrapper.setBackgroundResource(R.drawable.subscription_box_bg)
+            binding.subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_unselected)
+            binding.gemCapTextView.setBackgroundResource(R.drawable.pill_bg)
+            binding.gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.hourglassTextView.setBackgroundResource(R.drawable.pill_bg)
+            binding.hourglassTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.priceLabel.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.descriptionTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
         }
         val horizontalPadding = resources.getDimension(R.dimen.pill_horizontal_padding).toInt()
         val verticalPadding = resources.getDimension(R.dimen.pill_vertical_padding).toInt()
-        gemCapTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
-        hourGlassTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+        binding.gemCapTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+        binding.hourglassTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
     }
 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/userpicture/BitmapUtils.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/userpicture/BitmapUtils.kt
index fb7ccbfb2..22cc2964a 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/userpicture/BitmapUtils.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/userpicture/BitmapUtils.kt
@@ -6,15 +6,15 @@ import java.io.FileOutputStream
 
 object BitmapUtils {
     fun saveToShareableFile(directory: String, filename: String, bmp: Bitmap): File? {
-        var filename = filename
+        var name = filename
         try {
-            filename = "$directory/$filename"
+            name = "$directory/$name"
 
-            val out = FileOutputStream(filename)
+            val out = FileOutputStream(name)
             bmp.compress(Bitmap.CompressFormat.PNG, 100, out)
             out.flush()
             out.close()
-            return File(filename)
+            return File(name)
         } catch (ignored: Exception) {
         }