diff --git a/Habitica/res/drawable/circle_gray300.xml b/Habitica/res/drawable/circle_gray300.xml
new file mode 100644
index 000000000..ba3d669da
--- /dev/null
+++ b/Habitica/res/drawable/circle_gray300.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
+    <solid android:color="@color/gray_300" />
+</shape>
\ No newline at end of file
diff --git a/Habitica/res/layout/fragment_skills.xml b/Habitica/res/layout/fragment_skills.xml
index e10ba38a8..22d0a0906 100644
--- a/Habitica/res/layout/fragment_skills.xml
+++ b/Habitica/res/layout/fragment_skills.xml
@@ -5,5 +5,6 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scrollbarSize="3dp"
+    android:background="@color/white"
     android:scrollbarThumbVertical="@color/scrollbarThumb"
     android:scrollbars="vertical" />
diff --git a/Habitica/res/layout/skill_list_item.xml b/Habitica/res/layout/skill_list_item.xml
index 78f8dadef..9dc866268 100644
--- a/Habitica/res/layout/skill_list_item.xml
+++ b/Habitica/res/layout/skill_list_item.xml
@@ -1,17 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
-    style="@style/RowWrapper"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">
 
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@drawable/layout_rounded_bg_gray_700"
+        android:clipToPadding="true"
+        android:clipChildren="true"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="4dp">
+
         <com.facebook.drawee.view.SimpleDraweeView
             android:id="@+id/skill_image"
             android:layout_width="40dp"
             android:layout_height="40dp"
-            android:layout_gravity="center_vertical" />
-
+            android:layout_gravity="center_vertical"
+            android:layout_marginLeft="8dp"/>
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -20,7 +30,9 @@
             android:layout_marginRight="8dp"
             android:layout_weight="1"
             android:gravity="center_vertical"
-            android:orientation="vertical">
+            android:orientation="vertical"
+            android:layout_marginTop="12dp"
+            android:layout_marginBottom="12dp">
 
             <TextView
                 android:id="@+id/skill_text"
@@ -36,20 +48,33 @@
                 style="@style/Caption2.Regular"
                 tools:text="This is the spell description"/>
         </LinearLayout>
-    <Button
-        android:id="@+id/price_button"
-        android:layout_width="wrap_content"
-        android:layout_height="32dp"
-        android:minWidth="64dp"
-        android:layout_gravity="center_vertical"
-        android:gravity="left|center_vertical"
-        android:drawablePadding="5dp"
-        android:background="@drawable/rounded_purple_square"
-        android:paddingLeft="12dp"
-        android:paddingStart="12dp"
-        android:paddingRight="12dp"
-        android:paddingEnd="12dp"
+        <LinearLayout
+            android:id="@+id/button_wrapper"
+            android:layout_width="48dp"
+            android:layout_height="match_parent"
+            android:background="@color/blue_500"
+            android:orientation="vertical"
+            android:gravity="center">
+            <ImageView
+                android:id="@+id/button_icon_view"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content" />
+            <TextView
+                android:id="@+id/price_label"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content" />
+        </LinearLayout>
+    </LinearLayout>
+    <TextView
+        android:id="@+id/count_label"
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:layout_alignParentTop="true"
+        android:layout_alignParentStart="true"
+        android:layout_marginStart="13dp"
+        android:background="@drawable/circle_gray300"
+        tools:text="1"
         android:textColor="@color/white"
-        tools:text="150"
-        android:textSize="15sp" />
-</LinearLayout>
\ No newline at end of file
+        android:gravity="center"
+        />
+</RelativeLayout>
\ No newline at end of file
diff --git a/Habitica/res/values/colors.xml b/Habitica/res/values/colors.xml
index a3a799e93..295b8cd59 100644
--- a/Habitica/res/values/colors.xml
+++ b/Habitica/res/values/colors.xml
@@ -125,6 +125,7 @@
     <color name="black_20_alpha">#33000000</color>
     <color name="black_50_alpha">#89000000</color>
     <color name="gray_20_alpha">#331a181d</color>
+    <color name="blue_500_24">#3CA9DCF6</color>
     <color name="light_gray_bg">#F6F4F8</color>
 
     <color name="skin_ddc994">#ddc994</color>
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index b1a069c2d..07a4501fe 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -367,7 +367,7 @@
     <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>
     <string name="support_habitica">Support Habitica</string>
-    <string name="skill_transformation_use">use</string>
+    <string name="skill_transformation_use">Use</string>
     <string name="hatching_market_info">Not getting the right drops? Check out the Market!</string>
     <string name="feeding_market_info">Need different food? Buy more from the market!</string>
     <string name="open_market">Open Market</string>
@@ -941,4 +941,5 @@
     <string name="preference_email_subscription_reminder">Subscription Reminders</string>
     <string name="preference_email_kicked_group">Kicked from group</string>
     <string name="preference_email_onboarding">Guidance with setting up your Habitica Account</string>
+    <string name="skill_unlocks_at">Skill unlocks at level %d</string>
 </resources>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/data/local/implementation/RealmUserLocalRepository.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/data/local/implementation/RealmUserLocalRepository.kt
index 648f0e195..75ec17204 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/data/local/implementation/RealmUserLocalRepository.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/data/local/implementation/RealmUserLocalRepository.kt
@@ -132,7 +132,6 @@ class RealmUserLocalRepository(realm: Realm) : RealmBaseLocalRepository(realm),
         val habitClass = if (user.preferences?.disableClasses == true) "none" else user.stats?.habitClass
         return realm.where(Skill::class.java)
                 .equalTo("habitClass", habitClass)
-                .lessThanOrEqualTo("lvl", user.stats?.lvl ?: 0)
                 .findAll()
                 .asFlowable()
                 .filter { it.isLoaded }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/SkillsRecyclerViewAdapter.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/SkillsRecyclerViewAdapter.kt
index 80cfdc999..7f3334777 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/SkillsRecyclerViewAdapter.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/SkillsRecyclerViewAdapter.kt
@@ -5,7 +5,7 @@ import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
 import android.view.View
 import android.view.ViewGroup
-import android.widget.Button
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
@@ -13,6 +13,7 @@ import com.facebook.drawee.view.SimpleDraweeView
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.extensions.inflate
 import com.habitrpg.android.habitica.models.Skill
+import com.habitrpg.android.habitica.models.user.SpecialItems
 import com.habitrpg.android.habitica.ui.helpers.DataBindingUtils
 import com.habitrpg.android.habitica.ui.helpers.bindView
 import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
@@ -24,11 +25,21 @@ class SkillsRecyclerViewAdapter : RecyclerView.Adapter<SkillsRecyclerViewAdapter
     private val useSkillSubject = PublishSubject.create<Skill>()
     val useSkillEvents = useSkillSubject.toFlowable(BackpressureStrategy.DROP)
 
-    var mana: Double = 0.toDouble()
-     set(value) {
-         field = value
-         notifyDataSetChanged()
-     }
+    var mana: Double = 0.0
+        set(value) {
+            field = value
+            notifyDataSetChanged()
+        }
+    var level: Int = 0
+        set(value) {
+            field = value
+            notifyDataSetChanged()
+        }
+    var specialItems: SpecialItems? = null
+    set(value) {
+        field = value
+        notifyDataSetChanged()
+    }
     private var skillList: List<Skill> = emptyList()
 
     fun setSkillList(skillList: List<Skill>) {
@@ -51,18 +62,23 @@ class SkillsRecyclerViewAdapter : RecyclerView.Adapter<SkillsRecyclerViewAdapter
     inner class SkillViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener {
 
         private val magicDrawable: Drawable
+        private val lockDrawable: Drawable
         private val skillImageView: SimpleDraweeView by bindView(R.id.skill_image)
         private val skillNameTextView: TextView by bindView(R.id.skill_text)
         private val skillNotesTextView: TextView by bindView(R.id.skill_notes)
-        private val priceButton: Button by bindView(itemView, R.id.price_button)
+        private val buttonWrapper: ViewGroup by bindView(itemView, R.id.button_wrapper)
+        private val priceLabel: TextView by bindView(itemView, R.id.price_label)
+        private val buttonIconView: ImageView by bindView(itemView, R.id.button_icon_view)
+        private val countLabel: TextView by bindView(itemView, R.id.count_label)
 
         var skill: Skill? = null
 
         var context: Context = itemView.context
 
         init {
-            priceButton.setOnClickListener(this)
+            buttonWrapper.setOnClickListener(this)
             magicDrawable = BitmapDrawable(context.resources, HabiticaIconsHelper.imageOfMagic())
+            lockDrawable = BitmapDrawable(context.resources, HabiticaIconsHelper.imageOfLocked(ContextCompat.getColor(context, R.color.gray_400)))
         }
 
         fun bind(skill: Skill) {
@@ -70,31 +86,62 @@ class SkillsRecyclerViewAdapter : RecyclerView.Adapter<SkillsRecyclerViewAdapter
             skillNameTextView.text = skill.text
             skillNotesTextView.text = skill.notes
 
+            skillNameTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            skillNotesTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_200))
+            skillNotesTextView.visibility = View.VISIBLE
+            priceLabel.visibility = View.VISIBLE
+
             if ("special" == skill.habitClass) {
-                priceButton.setText(R.string.skill_transformation_use)
-
-                priceButton.setCompoundDrawables(null, null, null, null)
+                countLabel.visibility = View.VISIBLE
+                countLabel.text = getOwnedCount(skill.key).toString()
+                priceLabel.setText(R.string.skill_transformation_use)
+                priceLabel.setTextColor(ContextCompat.getColor(context, R.color.brand_400))
+                buttonIconView.setImageDrawable(null)
+                buttonWrapper.setBackgroundColor(ContextCompat.getColor(context, R.color.gray_600))
+                buttonIconView.alpha = 1.0f
+                priceLabel.alpha = 1.0f
             } else {
-                priceButton.text = skill.mana?.toString()
+                countLabel.visibility = View.GONE
+                priceLabel.text = skill.mana?.toString()
+                priceLabel.setTextColor(ContextCompat.getColor(context, R.color.blue_10))
+                buttonIconView.setImageDrawable(magicDrawable)
 
-                priceButton.setCompoundDrawablesWithIntrinsicBounds(magicDrawable, null, null, null)
+                if (skill.mana ?: 0 > mana) {
+                    buttonWrapper.setBackgroundColor(ContextCompat.getColor(context, R.color.gray_600))
+                    buttonIconView.alpha = 0.3f
+                    priceLabel.alpha = 0.3f
+                } else {
+                    buttonWrapper.setBackgroundColor(ContextCompat.getColor(context, R.color.blue_500_24))
+                    buttonIconView.alpha = 1.0f
+                    priceLabel.alpha = 1.0f
+                }
+                if ((skill.lvl ?: 0) > level) {
+                    buttonWrapper.setBackgroundColor(ContextCompat.getColor(context, R.color.gray_600))
+                    skillNameTextView.setTextColor(ContextCompat.getColor(context, R.color.task_gray))
+                    skillNameTextView.text = context.getString(R.string.skill_unlocks_at, skill.lvl)
+                    skillNotesTextView.visibility = View.GONE
+                    buttonIconView.setImageDrawable(lockDrawable)
+                    priceLabel.visibility = View.GONE
+                }
             }
             DataBindingUtils.loadImage(skillImageView, "shop_" + skill.key)
 
-            if (skill.mana ?: 0 > mana) {
-                priceButton.isEnabled = false
-                priceButton.setBackgroundResource(R.color.task_gray)
-                skillNameTextView.setTextColor(ContextCompat.getColor(context, R.color.task_gray))
-                skillNotesTextView.setTextColor(ContextCompat.getColor(context, R.color.task_gray))
-            } else {
-                skillNameTextView.setTextColor(ContextCompat.getColor(context, android.R.color.black))
-                skillNotesTextView.setTextColor(ContextCompat.getColor(context, android.R.color.black))
-                priceButton.isEnabled = true
-            }
         }
 
         override fun onClick(v: View) {
-            skill?.let { useSkillSubject.onNext(it) }
+            if ((skill?.lvl ?: 0) <= level) {
+                skill?.let { useSkillSubject.onNext(it) }
+            }
+        }
+
+        private fun getOwnedCount(key: String): Int {
+            return when (key) {
+                "snowball" -> specialItems?.snowball
+                "shinySeed" -> specialItems?.shinySeed
+                "seafoam" -> specialItems?.seafoam
+                "spookySparkles" -> specialItems?.spookySparkles
+                else -> 0
+            } ?: 0
         }
     }
 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/skills/SkillsFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/skills/SkillsFragment.kt
index b2ab0e10b..101dcd56a 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/skills/SkillsFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/skills/SkillsFragment.kt
@@ -67,8 +67,6 @@ class SkillsFragment : BaseMainFragment() {
 
         resetViews()
 
-        recyclerView.invalidateItemDecorations()
-        recyclerView.addItemDecoration(androidx.recyclerview.widget.DividerItemDecoration(getActivity(), androidx.recyclerview.widget.DividerItemDecoration.VERTICAL))
         recyclerView.layoutManager = androidx.recyclerview.widget.LinearLayoutManager(activity)
         recyclerView.adapter = adapter
         recyclerView.itemAnimator = SafeDefaultItemAnimator()
@@ -78,9 +76,12 @@ class SkillsFragment : BaseMainFragment() {
         if (user == null || adapter == null) {
             return
         }
-        adapter?.mana = this.user?.stats?.mp ?: 0.toDouble()
+        adapter?.mana = this.user?.stats?.mp ?: 0.0
+        adapter?.level = this.user?.stats?.lvl ?: 0
+        adapter?.specialItems = this.user?.items?.special
         user?.let { user ->
-            Observable.concat(userRepository.getSkills(user).firstElement().toObservable().flatMap { Observable.fromIterable(it) }, userRepository.getSpecialItems(user).firstElement().toObservable().flatMap { Observable.fromIterable(it) })
+            Observable.concat(userRepository.getSkills(user).firstElement().toObservable().flatMap { Observable.fromIterable(it) },
+                    userRepository.getSpecialItems(user).firstElement().toObservable().flatMap { Observable.fromIterable(it) })
                     .toList()
                     .subscribe(Consumer { skills -> adapter?.setSkillList(skills) }, RxErrorHandler.handleEmptyError())
         }
@@ -121,7 +122,6 @@ class SkillsFragment : BaseMainFragment() {
     }
 
 
-
     override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
         super.onActivityResult(requestCode, resultCode, data)
         if (data != null) {