diff --git a/Habitica/res/drawable/support_info_lower_bg.xml b/Habitica/res/drawable/support_info_lower_bg.xml
index 709e8e69d..26a2c3030 100644
--- a/Habitica/res/drawable/support_info_lower_bg.xml
+++ b/Habitica/res/drawable/support_info_lower_bg.xml
@@ -5,11 +5,11 @@
 
     <!-- view background color -->
     <solid
-        android:color="@color/brand_300" >
+        android:color="@color/brand_400" >
     </solid>
 
     <!-- Here is the corner radius -->
-    <corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp">
+    <corners android:radius="8dp">
     </corners>
 
 </shape>
\ No newline at end of file
diff --git a/Habitica/res/layout/fragment_faq_detail.xml b/Habitica/res/layout/fragment_faq_detail.xml
new file mode 100644
index 000000000..a2a2f46de
--- /dev/null
+++ b/Habitica/res/layout/fragment_faq_detail.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.core.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/scrollbarThumb"
+    android:scrollbars="vertical">
+
+    <LinearLayout
+        android:orientation="vertical"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        >
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="?android:attr/textAppearanceLarge"
+            android:id="@+id/questionTextView"
+            android:layout_gravity="center_horizontal"
+            android:padding="@dimen/card_padding"/>
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:id="@+id/answerTextView"
+            android:layout_gravity="center_horizontal"
+            android:paddingLeft="@dimen/card_padding"
+            android:paddingStart="@dimen/card_padding"
+            android:paddingEnd="@dimen/card_padding"
+            android:paddingRight="@dimen/card_padding"
+            android:textAppearance="?android:attr/textAppearanceMedium"
+            />
+    </LinearLayout>
+</androidx.core.widget.NestedScrollView>
\ No newline at end of file
diff --git a/Habitica/res/layout/fragment_faq_overview.xml b/Habitica/res/layout/fragment_faq_overview.xml
index 025f232fe..94ec908d9 100644
--- a/Habitica/res/layout/fragment_faq_overview.xml
+++ b/Habitica/res/layout/fragment_faq_overview.xml
@@ -66,7 +66,7 @@
         android:layout_height="wrap_content"
         app:subtitle="@string/premium_currency"
         app:title="@string/gems"
-        app:titleColor="@color/teal_100"
+        app:titleColor="@color/green_10"
         android:layout_marginStart="@dimen/spacing_medium"
         android:layout_marginEnd="@dimen/spacing_medium"
         android:layout_marginBottom="@dimen/spacing_medium"
diff --git a/Habitica/res/layout/fragment_support_main.xml b/Habitica/res/layout/fragment_support_main.xml
index dcce5be30..aa87da7f2 100644
--- a/Habitica/res/layout/fragment_support_main.xml
+++ b/Habitica/res/layout/fragment_support_main.xml
@@ -25,36 +25,36 @@
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@string/using_habitica"
+                android:text="@string/habitica_questions"
                 android:layout_marginStart="@dimen/spacing_large"
                 android:layout_marginEnd="@dimen/spacing_large"
-                android:textSize="16sp"
-                android:textStyle="bold"
-                android:textColor="@color/brand_300"
+                style="@style/Subheader2"
+                android:textColor="@color/black"
                 />
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/using_habitica_description"
-                android:textSize="12sp"
-                android:textColor="@color/gray_300"
+                style="@style/Body2"
+                android:textColor="@color/gray_50"
                 android:layout_marginStart="40dp"
                 android:layout_marginEnd="40dp"
                 android:gravity="center"
-                android:layout_marginTop="4dp"
-                android:layout_marginBottom="10dp"
+                android:layout_marginTop="6dp"
+                android:layout_marginBottom="16dp"
                 />
 
             <TextView
                 android:layout_width="match_parent"
-                android:layout_height="40dp"
-                android:text="@string/lets_go"
+                android:layout_height="38dp"
+                android:text="@string/read_more"
                 android:gravity="center"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"
+                android:layout_marginStart="@dimen/spacing_medium"
+                android:layout_marginEnd="@dimen/spacing_medium"
+                android:layout_marginBottom="@dimen/spacing_medium"
                 android:background="@drawable/support_info_lower_bg"
                 android:textColor="@color/white"
-                android:textAllCaps="true"
+                android:textAllCaps="false"
                 android:textStyle="bold"
                 android:textSize="12sp"
                 />
@@ -76,33 +76,33 @@
                 android:text="@string/bugs_fixes"
                 android:layout_marginStart="@dimen/spacing_large"
                 android:layout_marginEnd="@dimen/spacing_large"
-                android:textSize="16sp"
-                android:textStyle="bold"
-                android:textColor="@color/brand_300"
+                style="@style/Subheader2"
+                android:textColor="@color/black"
                 />
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/bugs_fixes_description"
-                android:textSize="12sp"
-                android:textColor="@color/gray_300"
+                style="@style/Body2"
+                android:textColor="@color/gray_50"
                 android:layout_marginStart="40dp"
                 android:layout_marginEnd="40dp"
                 android:gravity="center"
-                android:layout_marginTop="4dp"
-                android:layout_marginBottom="10dp"
+                android:layout_marginTop="6dp"
+                android:layout_marginBottom="16dp"
                 />
 
             <TextView
                 android:layout_width="match_parent"
-                android:layout_height="40dp"
+                android:layout_height="38dp"
                 android:text="@string/get_help"
                 android:gravity="center"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"
+                android:layout_marginStart="@dimen/spacing_medium"
+                android:layout_marginEnd="@dimen/spacing_medium"
+                android:layout_marginBottom="@dimen/spacing_medium"
                 android:background="@drawable/support_info_lower_bg"
                 android:textColor="@color/white"
-                android:textAllCaps="true"
+                android:textAllCaps="false"
                 android:textStyle="bold"
                 android:textSize="12sp"
                 />
@@ -124,34 +124,34 @@
                 android:text="@string/suggestions_feedback"
                 android:layout_marginStart="@dimen/spacing_large"
                 android:layout_marginEnd="@dimen/spacing_large"
-                android:textSize="16sp"
-                android:textStyle="bold"
-                android:textColor="@color/brand_300"
+                style="@style/Subheader2"
+                android:textColor="@color/black"
                 />
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/suggestions_feedback_description"
-                android:textSize="12sp"
-                android:textColor="@color/gray_300"
+                style="@style/Body2"
+                android:textColor="@color/gray_50"
                 android:layout_marginStart="40dp"
                 android:layout_marginEnd="40dp"
                 android:gravity="center"
-                android:layout_marginTop="4dp"
-                android:layout_marginBottom="10dp"
+                android:layout_marginTop="6dp"
+                android:layout_marginBottom="16dp"
                 />
 
             <TextView
                 android:layout_width="match_parent"
-                android:layout_height="40dp"
+                android:layout_height="38dp"
                 android:text="@string/contact_us"
                 android:gravity="center"
-                android:layout_marginStart="@dimen/spacing_large"
-                android:layout_marginEnd="@dimen/spacing_large"
+                android:layout_marginStart="@dimen/spacing_medium"
+                android:layout_marginEnd="@dimen/spacing_medium"
+                android:layout_marginBottom="@dimen/spacing_medium"
                 android:background="@drawable/support_info_lower_bg"
                 android:textColor="@color/white"
                 android:textStyle="bold"
-                android:textAllCaps="true"
+                android:textAllCaps="false"
                 android:textSize="12sp"
                 />
         </LinearLayout>
@@ -164,7 +164,8 @@
         android:id="@+id/reset_tutorial_button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        style="@style/HabiticaButton.Blue"
+        style="@style/HabiticaButton.Gray.600"
+        android:textColor="@color/gray_50"
         android:text="@string/reset_walkthrough"
         android:layout_margin="@dimen/spacing_large"/>
 </LinearLayout>
\ No newline at end of file
diff --git a/Habitica/res/layout/support_collapsible_section.xml b/Habitica/res/layout/support_collapsible_section.xml
index d2a0216aa..db70187a9 100644
--- a/Habitica/res/layout/support_collapsible_section.xml
+++ b/Habitica/res/layout/support_collapsible_section.xml
@@ -26,15 +26,14 @@
                 android:id="@+id/title_view"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:textSize="14sp"
-                android:textStyle="bold"
+                style="@style/Body1"
                 tools:text="Title"/>
             <TextView
                 android:id="@+id/subtitle_view"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:textColor="@color/gray_200"
-                android:textSize="14sp"
+                style="@style/Body2"
                 tools:text="Subtitle" />
         </LinearLayout>
         <Space
diff --git a/Habitica/res/navigation/navigation.xml b/Habitica/res/navigation/navigation.xml
index 2ffe26ba0..3235fa47d 100644
--- a/Habitica/res/navigation/navigation.xml
+++ b/Habitica/res/navigation/navigation.xml
@@ -208,6 +208,17 @@
         android:name="com.habitrpg.android.habitica.ui.fragments.support.FAQOverviewFragment"
         android:label="@string/habitica_questions">
         <deepLink app:uri="habitica.com/static/faq" />
+        <action
+            android:id="@+id/openFAQDetail"
+            app:destination="@id/FAQDetailFragment" />
+    </fragment>
+    <fragment
+        android:id="@+id/FAQDetailFragment"
+        android:name="com.habitrpg.android.habitica.ui.fragments.support.FAQDetailFragment"
+        android:label="@string/sidebar_help" >
+        <argument
+            android:name="position"
+            app:argType="integer" />
     </fragment>
     <fragment
         android:id="@+id/aboutFragment"
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index fc6d791a1..027203d58 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -1004,4 +1004,5 @@
     <string name="avatar_headband">Headband</string>
     <string name="avatar_accent">Accent</string>
     <string name="buy_all">Buy All</string>
+    <string name="read_more">Read More</string>
 </resources>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/components/UserComponent.java b/Habitica/src/main/java/com/habitrpg/android/habitica/components/UserComponent.java
index 125a3a599..92774ceee 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/components/UserComponent.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/components/UserComponent.java
@@ -93,6 +93,7 @@ import com.habitrpg.android.habitica.ui.fragments.social.party.PartyDetailFragme
 import com.habitrpg.android.habitica.ui.fragments.social.party.PartyFragment;
 import com.habitrpg.android.habitica.ui.fragments.social.party.PartyInviteFragment;
 import com.habitrpg.android.habitica.ui.fragments.support.BugFixFragment;
+import com.habitrpg.android.habitica.ui.fragments.support.FAQDetailFragment;
 import com.habitrpg.android.habitica.ui.fragments.support.FAQOverviewFragment;
 import com.habitrpg.android.habitica.ui.fragments.support.SupportMainFragment;
 import com.habitrpg.android.habitica.ui.fragments.tasks.TaskRecyclerViewFragment;
@@ -337,4 +338,6 @@ public interface UserComponent {
     void inject(@NotNull BugFixFragment bugFixFragment);
 
     void inject(@NotNull AvatarEquipmentFragment avatarEquipmentFragment);
+
+    void inject(@NotNull FAQDetailFragment faqDetailFragment);
 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQDetailFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQDetailFragment.kt
new file mode 100644
index 000000000..e73f034d9
--- /dev/null
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQDetailFragment.kt
@@ -0,0 +1,53 @@
+package com.habitrpg.android.habitica.ui.fragments.support
+
+import android.os.Bundle
+import android.text.method.LinkMovementMethod
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import com.habitrpg.android.habitica.R
+import com.habitrpg.android.habitica.components.UserComponent
+import com.habitrpg.android.habitica.data.FAQRepository
+import com.habitrpg.android.habitica.extensions.inflate
+import com.habitrpg.android.habitica.helpers.RxErrorHandler
+import com.habitrpg.android.habitica.ui.fragments.BaseMainFragment
+import com.habitrpg.android.habitica.ui.helpers.MarkdownParser
+import com.habitrpg.android.habitica.ui.helpers.bindOptionalView
+import com.habitrpg.android.habitica.ui.helpers.resetViews
+import io.reactivex.functions.Consumer
+import javax.inject.Inject
+
+class FAQDetailFragment : BaseMainFragment() {
+    @Inject
+    lateinit var faqRepository: FAQRepository
+
+    private val questionTextView: TextView? by bindOptionalView(R.id.questionTextView)
+    private val answerTextView: TextView? by bindOptionalView(R.id.answerTextView)
+
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+        hidesToolbar = true
+        super.onCreateView(inflater, container, savedInstanceState)
+        return container?.inflate(R.layout.fragment_faq_detail)
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        resetViews()
+
+        arguments?.let {
+            val args = FAQDetailFragmentArgs.fromBundle(it)
+            compositeSubscription.add(faqRepository.getArticle(args.position).subscribe(Consumer { faq ->
+                this.questionTextView?.text = faq.question
+                this.answerTextView?.text = MarkdownParser.parseMarkdown(faq.answer)
+            }, RxErrorHandler.handleEmptyError()))
+        }
+
+        this.answerTextView?.movementMethod = LinkMovementMethod.getInstance()
+    }
+
+    override fun injectFragment(component: UserComponent) {
+        component.inject(this)
+    }
+}
\ No newline at end of file
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQOverviewFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQOverviewFragment.kt
index d2e9171e1..cdfa5d49b 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQOverviewFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/support/FAQOverviewFragment.kt
@@ -12,14 +12,12 @@ import com.habitrpg.android.habitica.components.UserComponent
 import com.habitrpg.android.habitica.data.FAQRepository
 import com.habitrpg.android.habitica.databinding.FragmentFaqOverviewBinding
 import com.habitrpg.android.habitica.databinding.SupportFaqItemBinding
-import com.habitrpg.android.habitica.extensions.addCloseButton
 import com.habitrpg.android.habitica.extensions.layoutInflater
 import com.habitrpg.android.habitica.helpers.MainNavigationController
 import com.habitrpg.android.habitica.helpers.RxErrorHandler
 import com.habitrpg.android.habitica.ui.fragments.BaseMainFragment
 import com.habitrpg.android.habitica.ui.helpers.setMarkdown
 import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
-import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaAlertDialog
 import io.reactivex.functions.Consumer
 import javax.inject.Inject
 
@@ -71,11 +69,7 @@ class FAQOverviewFragment : BaseMainFragment() {
                 val binding = SupportFaqItemBinding.inflate(context.layoutInflater, binding.faqLinearLayout, true)
                 binding.textView.text = article.question
                 binding.root.setOnClickListener {
-                    val dialog = HabiticaAlertDialog(binding.root.context)
-                    dialog.setTitle(article.question)
-                    dialog.setMessage(article.answer)
-                    dialog.addCloseButton()
-                    dialog.show()
+                    MainNavigationController.navigate(FAQOverviewFragmentDirections.openFAQDetail(article.position ?: 0))
                 }
             }
         }, RxErrorHandler.handleEmptyError()))