diff --git a/Habitica/res/drawable-hdpi/gems_21.png b/Habitica/res/drawable-hdpi/gems_21.png
new file mode 100644
index 000000000..185d714f4
Binary files /dev/null and b/Habitica/res/drawable-hdpi/gems_21.png differ
diff --git a/Habitica/res/drawable-hdpi/gems_4.png b/Habitica/res/drawable-hdpi/gems_4.png
new file mode 100644
index 000000000..f8d2047e7
Binary files /dev/null and b/Habitica/res/drawable-hdpi/gems_4.png differ
diff --git a/Habitica/res/drawable-hdpi/gems_42.png b/Habitica/res/drawable-hdpi/gems_42.png
new file mode 100644
index 000000000..bc76ed2ba
Binary files /dev/null and b/Habitica/res/drawable-hdpi/gems_42.png differ
diff --git a/Habitica/res/drawable-hdpi/gems_84.png b/Habitica/res/drawable-hdpi/gems_84.png
new file mode 100644
index 000000000..fcc2d5810
Binary files /dev/null and b/Habitica/res/drawable-hdpi/gems_84.png differ
diff --git a/Habitica/res/drawable-mdpi/gems_21.png b/Habitica/res/drawable-mdpi/gems_21.png
new file mode 100644
index 000000000..4e907ffeb
Binary files /dev/null and b/Habitica/res/drawable-mdpi/gems_21.png differ
diff --git a/Habitica/res/drawable-mdpi/gems_4.png b/Habitica/res/drawable-mdpi/gems_4.png
new file mode 100644
index 000000000..9aab9c34d
Binary files /dev/null and b/Habitica/res/drawable-mdpi/gems_4.png differ
diff --git a/Habitica/res/drawable-mdpi/gems_42.png b/Habitica/res/drawable-mdpi/gems_42.png
new file mode 100644
index 000000000..95da7c62b
Binary files /dev/null and b/Habitica/res/drawable-mdpi/gems_42.png differ
diff --git a/Habitica/res/drawable-mdpi/gems_84.png b/Habitica/res/drawable-mdpi/gems_84.png
new file mode 100644
index 000000000..c12b83730
Binary files /dev/null and b/Habitica/res/drawable-mdpi/gems_84.png differ
diff --git a/Habitica/res/drawable-xhdpi/gems_21.png b/Habitica/res/drawable-xhdpi/gems_21.png
new file mode 100644
index 000000000..6fc6af0df
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/gems_21.png differ
diff --git a/Habitica/res/drawable-xhdpi/gems_4.png b/Habitica/res/drawable-xhdpi/gems_4.png
new file mode 100644
index 000000000..7c3678a9f
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/gems_4.png differ
diff --git a/Habitica/res/drawable-xhdpi/gems_42.png b/Habitica/res/drawable-xhdpi/gems_42.png
new file mode 100644
index 000000000..287f3bb38
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/gems_42.png differ
diff --git a/Habitica/res/drawable-xhdpi/gems_84.png b/Habitica/res/drawable-xhdpi/gems_84.png
new file mode 100644
index 000000000..a935cf1e7
Binary files /dev/null and b/Habitica/res/drawable-xhdpi/gems_84.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gems_21.png b/Habitica/res/drawable-xxhdpi/gems_21.png
new file mode 100644
index 000000000..f422827f4
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/gems_21.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gems_4.png b/Habitica/res/drawable-xxhdpi/gems_4.png
new file mode 100644
index 000000000..84f5ecd3b
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/gems_4.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gems_42.png b/Habitica/res/drawable-xxhdpi/gems_42.png
new file mode 100644
index 000000000..affd585f1
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/gems_42.png differ
diff --git a/Habitica/res/drawable-xxhdpi/gems_84.png b/Habitica/res/drawable-xxhdpi/gems_84.png
new file mode 100644
index 000000000..9c8367d74
Binary files /dev/null and b/Habitica/res/drawable-xxhdpi/gems_84.png differ
diff --git a/Habitica/res/drawable/purchase_button_background.xml b/Habitica/res/drawable/purchase_button_background.xml
new file mode 100644
index 000000000..697ac5c1d
--- /dev/null
+++ b/Habitica/res/drawable/purchase_button_background.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid
+        android:color="@color/brand_300" >
+    </solid>
+    <corners
+        android:radius="8dp"   >
+    </corners>
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/layout/fragment_gem_purchase.xml b/Habitica/res/layout/fragment_gem_purchase.xml
index 5c719c1c4..a88e89edb 100644
--- a/Habitica/res/layout/fragment_gem_purchase.xml
+++ b/Habitica/res/layout/fragment_gem_purchase.xml
@@ -1,24 +1,116 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:orientation="vertical" android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <TextView android:layout_height="wrap_content"
-        android:layout_width="wrap_content"
-
-        android:text="@string/gem.purchase.support"
-        android:layout_gravity="center_horizontal"
-        android:layout_margin="5dp">
-
-    </TextView>
-
-    <Button
-        android:layout_width="wrap_content"
+<android.support.v4.widget.NestedScrollView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:scrollbarSize="3dp"
+    android:scrollbarThumbVertical="@color/md_grey_500"
+    android:scrollbars="vertical">
+    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:orientation="vertical" android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:text="+ 21"
-        android:id="@+id/btn.purchase.gems"
-        android:layout_gravity="center_horizontal"
-        android:drawableRight="@drawable/ic_header_gem"
-        android:drawablePadding="5dp"
-        android:textColor="@color/white"/>
-</LinearLayout>
\ No newline at end of file
+        android:padding="20dp">
+
+        <TextView android:layout_height="wrap_content"
+            android:layout_width="wrap_content"
+            android:paddingLeft="16dp"
+            android:paddingRight="16dp"
+            android:paddingBottom="20dp"
+            android:text="@string/gem.purchase.title"
+            android:layout_gravity="center_horizontal"
+            android:gravity="center"
+            android:textColor="@color/best_10"
+            android:drawableTop="@drawable/ic_header_heart"
+            android:textSize="14sp"
+            android:lineSpacingExtra="4dp" />
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:layout_marginBottom="16dp">
+                <com.habitrpg.android.habitica.ui.GemPurchaseOptionsView
+                    android:id="@+id/gems_4_view"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    app:gemAmount="4"
+                    app:gemDrawable="@drawable/gems_4"
+                    android:layout_marginRight="16dp"
+                    android:layout_marginEnd="16dp"
+                    />
+                <com.habitrpg.android.habitica.ui.GemPurchaseOptionsView
+                    android:id="@+id/gems_21_view"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    app:gemAmount="21"
+                    app:gemDrawable="@drawable/gems_21" />
+            </LinearLayout>
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:dividerPadding="16dp"
+                android:showDividers="middle"
+                android:divider="@android:color/white">
+                <com.habitrpg.android.habitica.ui.GemPurchaseOptionsView
+                    android:id="@+id/gems_42_view"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    app:gemAmount="42"
+                    app:gemDrawable="@drawable/gems_42"
+                    android:layout_marginRight="16dp"
+                    android:layout_marginEnd="16dp" />
+                <com.habitrpg.android.habitica.ui.GemPurchaseOptionsView
+                    android:id="@+id/gems_84_view"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    app:gemAmount="84"
+                    app:gemDrawable="@drawable/gems_84" />
+            </LinearLayout>
+        </LinearLayout>
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/gem.purchase.subtitle"
+            android:gravity="center"
+            android:textStyle="normal|bold"
+            android:textColor="@color/brand_100"
+            android:textSize="16sp"
+            android:lineSpacingExtra="4dp"
+            android:layout_marginTop="23dp"
+            android:layout_marginBottom="12dp"/>
+
+        <TextView
+            android:text="@string/gem.purchase.listitem1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/GemPurchaseListItem"
+            />
+        <TextView
+            android:text="@string/gem.purchase.listitem2"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/GemPurchaseListItem"
+            />
+        <TextView
+            android:text="@string/gem.purchase.listitem3"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/GemPurchaseListItem"
+            />
+        <TextView
+            android:text="@string/gem.purchase.listitem4"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/GemPurchaseListItem"
+            />
+    </LinearLayout>
+</android.support.v4.widget.NestedScrollView>
\ No newline at end of file
diff --git a/Habitica/res/layout/purchase_gem_view.xml b/Habitica/res/layout/purchase_gem_view.xml
new file mode 100644
index 000000000..9c08d9776
--- /dev/null
+++ b/Habitica/res/layout/purchase_gem_view.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="@color/gem_view_background"
+    android:gravity="center">
+    <ImageView
+        android:layout_width="match_parent"
+        android:layout_height="65dp"
+        android:scaleType="center"
+        android:id="@+id/gem_image"
+        tools:src="@drawable/gems_21"
+        android:layout_marginBottom="8dp"
+        android:contentDescription="@string/gems"
+        android:layout_marginTop="20dp"/>
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:id="@+id/gem_amount"
+        android:textColor="@color/best_10"
+        android:gravity="center"
+        android:textSize="36sp"
+        tools:text="21" />
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:text="@string/gems"
+        android:textColor="@color/best_10"
+        android:gravity="center" />
+
+    <Button
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:id="@+id/purchase_button"
+        android:background="@drawable/purchase_button_background"
+        android:textColor="@color/white"
+        android:layout_marginLeft="14dp"
+        android:layout_marginRight="14dp"
+        android:layout_marginBottom="14dp"
+        android:layout_marginTop="13dp"
+        tools:text="$ 4.99"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/Habitica/res/values/attrs_avatar_view.xml b/Habitica/res/values/attrs_avatar_view.xml
index 595b30f9d..0127fc1ae 100644
--- a/Habitica/res/values/attrs_avatar_view.xml
+++ b/Habitica/res/values/attrs_avatar_view.xml
@@ -4,4 +4,10 @@
         <attr name="showMount" format="boolean" />
         <attr name="showPet" format="boolean" />
     </declare-styleable>
+
+    <declare-styleable name="GemPurchaseOptionsView">
+        <attr name="gemAmount" format="integer" />
+        <attr name="priceText" format="string" />
+        <attr name="gemDrawable" format="integer" />
+    </declare-styleable>
 </resources>
diff --git a/Habitica/res/values/colors.xml b/Habitica/res/values/colors.xml
index 66b3c488b..fa8d37cc1 100644
--- a/Habitica/res/values/colors.xml
+++ b/Habitica/res/values/colors.xml
@@ -3,10 +3,10 @@
 
     <color name="brand_50">#36205D</color>
     <color name="brand_100">#432874</color>
-    <color name="brand_200">#4F2A93</color>
+    <color name="brand_200">#4f2a93</color>
     <color name="brand_300">#6133B4</color>
     <color name="brand_400">#9A62FF</color>
-    <color name="brand_500">#BDA8FF</color>
+    <color name="brand_500">#bda8ff</color>
     <color name="brand_700">#ede7f6</color>
     <color name="brand">@color/brand_100</color>
 
@@ -37,7 +37,7 @@
 
     <color name="best_100">#50B5E9</color>
     <color name="best_50">#46A7D9</color>
-    <color name="best_10">#2995CD</color>
+    <color name="best_10">#2995cd</color>
 
     <color name="completed">#D9D9D9</color>
     <color name="completed_btn">#989898</color>
@@ -96,10 +96,12 @@
     <!-- Preferences -->
     <color name="preference_fallback_accent_color">@color/colorAccent</color>
     <!-- buttons -->
-    <color name="btn_success">#ff5cb85c</color>
-    <color name="btn_warning">#fff0ad4e</color>
-    <color name="btn_danger">#ffd9534f</color>
+    <color name="btn_success">@color/good_10</color>
+    <color name="btn_warning">@color/neutral_10</color>
+    <color name="btn_danger">@color/worse_10</color>
 
     <color name="widget_background">#c8432874</color>
 
+    <color name="gem_view_background">#10bda8ff</color>
+
 </resources>
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index f455eafcc..3231628bc 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -414,5 +414,11 @@ To start, which parts of your life do you want to improve?</string>
     <string name="widget_dailies">Habitica Dailies</string>
     <string name="widget_add_task">Habitica Add Task</string>
     <string name="google_services_missing">Google play services could not be found.</string>
+    <string name="gem.purchase.title">Buying gems supports the developers and helps keep Habitica running</string>
+    <string name="gem.purchase.subtitle">Gems allow you to buy fun extras for you account, including:</string>
+    <string name="gem.purchase.listitem1">Cool costumes for your avatar</string>
+    <string name="gem.purchase.listitem2">Awesome backgrounds</string>
+    <string name="gem.purchase.listitem3">Quests that reward you with pet eggs</string>
+    <string name="gem.purchase.listitem4">The ability to change your class before level 100</string>
 
 </resources>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index 826cef312..8bcd4ec8d 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -182,4 +182,13 @@
         <item name="android:layout_marginRight">8dp</item>
         <item name="android:layout_gravity">center</item>
     </style>
+
+    <style name="GemPurchaseListItem">
+        <item name="android:textColor">@color/brand_100</item>
+        <item name="android:gravity">center_horizontal</item>
+        <item name="android:textSize">12sp</item>
+        <item name="android:drawableLeft">@drawable/ic_check</item>
+        <item name="android:layout_gravity">center_horizontal</item>
+        <item name="android:paddingTop">12dp</item>
+    </style>
 </resources>
\ No newline at end of file
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/GemPurchaseOptionsView.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/GemPurchaseOptionsView.java
new file mode 100644
index 000000000..77d9d0472
--- /dev/null
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/GemPurchaseOptionsView.java
@@ -0,0 +1,48 @@
+package com.habitrpg.android.habitica.ui;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.graphics.drawable.Drawable;
+import android.util.AttributeSet;
+import android.widget.Button;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import com.habitrpg.android.habitica.R;
+
+import butterknife.BindView;
+import butterknife.ButterKnife;
+
+
+public class GemPurchaseOptionsView extends FrameLayout {
+
+    @BindView(R.id.gem_image)
+    ImageView gemImageView;
+
+    @BindView(R.id.gem_amount)
+    TextView gemAmountTextView;
+
+    @BindView(R.id.purchase_button)
+    Button purchaseButton;
+
+    public GemPurchaseOptionsView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+
+        inflate(context, R.layout.purchase_gem_view, this);
+
+        ButterKnife.bind(this);
+
+        TypedArray a = context.getTheme().obtainStyledAttributes(
+                attrs,
+                R.styleable.GemPurchaseOptionsView,
+                0, 0);
+
+        gemAmountTextView.setText(a.getText(R.styleable.GemPurchaseOptionsView_gemAmount));
+
+        Drawable iconRes = a.getDrawable(R.styleable.GemPurchaseOptionsView_gemDrawable);
+        if (iconRes != null) {
+            gemImageView.setImageDrawable(iconRes);
+        }
+    }
+}
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/GemsPurchaseFragment.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/GemsPurchaseFragment.java
index 43eb1e4b0..88be40981 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/GemsPurchaseFragment.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/GemsPurchaseFragment.java
@@ -34,7 +34,6 @@ import io.fabric.sdk.android.Fabric;
 public class GemsPurchaseFragment extends BaseMainFragment {
 
     private static final int GEMS_TO_ADD = 21;
-    @BindView(R.id.btn_purchase_gems)
     Button btnPurchaseGems;
     private Listener listener;
     private BillingRequests billingRequests;
@@ -64,11 +63,8 @@ public class GemsPurchaseFragment extends BaseMainFragment {
     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
         super.onViewCreated(view, savedInstanceState);
 
-        btnPurchaseGems.setEnabled(false);
-        ViewHelper.SetBackgroundTint(btnPurchaseGems, ContextCompat.getColor(getContext(), R.color.brand));
-
         final ActivityCheckout checkout = listener.getActivityCheckout();
-
+        /*
         if (checkout != null) {
             checkout.destroyPurchaseFlow();
 
@@ -126,7 +122,7 @@ public class GemsPurchaseFragment extends BaseMainFragment {
 
                 }
             });
-        }
+        }*/
     }
 
     private void updateBuyButtonText(String price) {
@@ -165,7 +161,6 @@ public class GemsPurchaseFragment extends BaseMainFragment {
         });
     }
 
-    @OnClick(R.id.btn_purchase_gems)
     public void doPurchaseGems(Button button) {
         // check if the user already bought and if it hasn't validated yet
         billingRequests.isPurchased(ProductTypes.IN_APP, HabiticaApplication.Purchase20Gems, new RequestListener<Boolean>() {