diff --git a/Habitica/res/layout/fragment_gem_purchase.xml b/Habitica/res/layout/fragment_gem_purchase.xml
index f61491b8d..b58a5d865 100644
--- a/Habitica/res/layout/fragment_gem_purchase.xml
+++ b/Habitica/res/layout/fragment_gem_purchase.xml
@@ -300,7 +300,7 @@
         <View
                 android:id="@+id/bottom_spacing"
                 android:layout_width="match_parent"
-                android:layout_height="30dp"
+                android:layout_height="1dp"
                 android:background="@color/brand_400"/>
     </LinearLayout>
 </androidx.core.widget.NestedScrollView>
diff --git a/Habitica/res/layout/fragment_subscription_content.xml b/Habitica/res/layout/fragment_subscription_content.xml
index 497122fe0..e207785c2 100644
--- a/Habitica/res/layout/fragment_subscription_content.xml
+++ b/Habitica/res/layout/fragment_subscription_content.xml
@@ -400,7 +400,7 @@
                 android:background="@color/brand_400"
                 android:orientation="vertical"
                 android:paddingTop="6dp"
-                android:paddingBottom="32dp"
+                android:paddingBottom="10dp"
                 android:paddingHorizontal="24dp">
 
             <TextView
@@ -422,5 +422,10 @@
                     android:visibility="gone"
                 />
         </LinearLayout>
+        <View
+                android:id="@+id/bottom_spacing"
+                android:layout_width="match_parent"
+                android:layout_height="30dp"
+                android:background="@color/brand_400"/>
     </LinearLayout>
 </androidx.core.widget.NestedScrollView>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index 61e17c7c6..77007e147 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -1024,7 +1024,8 @@
 
     <style name="FlatCardView">
         <item name="android:background">@drawable/layout_rounded_bg_window</item>
-        <item name="android:layout_margin">@dimen/spacing_sides</item>
+        <item name="android:layout_marginHorizontal">@dimen/spacing_sides</item>
+        <item name="android:layout_marginVertical">@dimen/spacing_medium</item>
     </style>
 
     <style name="CountLabel">
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/FullProfileActivity.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/FullProfileActivity.kt
index f4d981927..1b676c89f 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/FullProfileActivity.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/FullProfileActivity.kt
@@ -119,7 +119,8 @@ class FullProfileActivity : BaseActivity() {
                     isMyProfile = false,
                     onMemberRowClicked = {},
                     onClassSelectionClicked = {},
-                    configManager = configManager
+                    configManager = configManager,
+                    useWindowInsets = false
                 )
             }
         }
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 779fb9ab7..ba13eb9fc 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt
@@ -1,13 +1,16 @@
 package com.habitrpg.android.habitica.ui.activities
 
 import android.graphics.Color
+import android.os.Build
 import android.os.Bundle
 import android.view.View
 import androidx.activity.SystemBarStyle
 import androidx.appcompat.widget.Toolbar
 import androidx.core.content.ContextCompat
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.Fragment
 import com.habitrpg.android.habitica.R
+import com.habitrpg.android.habitica.extensions.setNavigationBarDarkIcons
 import com.habitrpg.android.habitica.extensions.updateStatusBarColor
 import com.habitrpg.android.habitica.ui.fragments.purchases.GemsPurchaseFragment
 import com.habitrpg.android.habitica.ui.fragments.purchases.SubscriptionFragment
@@ -22,6 +25,7 @@ class GemPurchaseActivity : PurchaseActivity() {
     }
 
     override fun onCreate(savedInstanceState: Bundle?) {
+        navigationBarStyle = SystemBarStyle.dark(ContextCompat.getColor(this, R.color.brand_200))
         showSubscription = !(intent.extras?.containsKey("openSubscription") == true && intent.extras?.getBoolean("openSubscription") == false)
         super.onCreate(savedInstanceState)
 
@@ -46,8 +50,16 @@ class GemPurchaseActivity : PurchaseActivity() {
 
     override fun onResume() {
         super.onResume()
+        val controller = WindowCompat.getInsetsController(window, window.decorView)
+        controller.isAppearanceLightNavigationBars = false
+
         if (showSubscription) {
-            window.updateStatusBarColor(ContextCompat.getColor(this, R.color.brand_300), false)
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                controller.isAppearanceLightStatusBars = false
+                window.setNavigationBarDarkIcons(false)
+            } else {
+                window.updateStatusBarColor(ContextCompat.getColor(this, R.color.brand_300), false)
+            }
             findViewById<View>(R.id.appbar).setBackgroundColor(ContextCompat.getColor(this, R.color.brand_300))
         }
     }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/AvatarOverviewFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/AvatarOverviewFragment.kt
index f2510fce1..5912fdb59 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/AvatarOverviewFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/AvatarOverviewFragment.kt
@@ -9,15 +9,24 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.AdapterView
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.rememberScrollableState
+import androidx.compose.foundation.gestures.scrollable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsIgnoringVisibility
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,15 +36,19 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.core.content.ContextCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.map
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.data.InventoryRepository
+import com.habitrpg.android.habitica.databinding.FragmentComposeBinding
 import com.habitrpg.android.habitica.databinding.FragmentComposeScrollingBinding
 import com.habitrpg.android.habitica.helpers.AppConfigManager
 import com.habitrpg.android.habitica.interactors.ShareAvatarUseCase
@@ -58,7 +71,7 @@ import javax.inject.Inject
 
 @AndroidEntryPoint
 open class AvatarOverviewFragment :
-    BaseMainFragment<FragmentComposeScrollingBinding>(),
+    BaseMainFragment<FragmentComposeBinding>(),
     AdapterView.OnItemSelectedListener {
     @Inject
     lateinit var userViewModel: MainUserViewModel
@@ -69,7 +82,7 @@ open class AvatarOverviewFragment :
     @Inject
     lateinit var appConfigManager: AppConfigManager
 
-    override var binding: FragmentComposeScrollingBinding? = null
+    override var binding: FragmentComposeBinding? = null
 
     protected var showCustomization = true
 
@@ -79,10 +92,11 @@ open class AvatarOverviewFragment :
     override fun createBinding(
         inflater: LayoutInflater,
         container: ViewGroup?
-    ): FragmentComposeScrollingBinding {
-        return FragmentComposeScrollingBinding.inflate(inflater, container, false)
+    ): FragmentComposeBinding {
+        return FragmentComposeBinding.inflate(inflater, container, false)
     }
 
+    @OptIn(ExperimentalLayoutApi::class)
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -96,38 +110,41 @@ open class AvatarOverviewFragment :
                 HabiticaTheme {
                     val avatar by userViewModel.user.observeAsState()
                     Column {
-                        Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.background(colorResource(R.color.window_background))) {
+                        Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth().background(colorResource(R.color.window_background))) {
                             ComposableAvatarView(
                                 avatar = avatar,
                                 configManager = appConfigManager,
                                 modifier =
                                 Modifier
-                                    .padding(top = 6.dp, bottom = 24.dp)
+                                    .padding(bottom = 24.dp)
                                     .size(140.dp, 147.dp)
                             )
-                            Box(
-                                Modifier
-                                    .background(colorResource(R.color.content_background), RoundedCornerShape(topStart = 22.dp, topEnd = 22.dp))
-                                    .fillMaxWidth()
-                                    .height(22.dp)
-                            )
                         }
-                        AvatarOverviewView(
-                            userViewModel,
-                            showCustomization,
-                            !showCustomization,
-                            battleGearWeapon.value?.twoHanded == true,
-                            costumeWeapon.value?.twoHanded == true,
-                            { type, category ->
-                                displayCustomizationFragment(type, category)
-                            },
-                            { type, category ->
-                                displayAvatarEquipmentFragment(type, category)
-                            },
-                            { type, equipped, isCostume ->
-                                displayEquipmentFragment(type, equipped, isCostume)
-                            }
-                        )
+                        Column(modifier = Modifier
+                            .background(colorResource(R.color.window_background))
+                            .clip(RoundedCornerShape(topStart = 22.dp, topEnd = 22.dp))
+                            .background(colorResource(R.color.content_background))
+                            .verticalScroll(rememberScrollState())
+                            .padding(top = 12.dp)
+                            ) {
+                            AvatarOverviewView(
+                                userViewModel,
+                                showCustomization,
+                                !showCustomization,
+                                battleGearWeapon.value?.twoHanded == true,
+                                costumeWeapon.value?.twoHanded == true,
+                                { type, category ->
+                                    displayCustomizationFragment(type, category)
+                                },
+                                { type, category ->
+                                    displayAvatarEquipmentFragment(type, category)
+                                },
+                                { type, equipped, isCostume ->
+                                    displayEquipmentFragment(type, equipped, isCostume)
+                                }
+                            )
+                            Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBarsIgnoringVisibility))
+                        }
                     }
                 }
             }
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 76b0dd3fa..24cfd17da 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
@@ -12,7 +12,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.isVisible
+import androidx.core.view.updateLayoutParams
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.replace
 import androidx.lifecycle.lifecycleScope
@@ -22,6 +25,7 @@ import com.habitrpg.android.habitica.data.InventoryRepository
 import com.habitrpg.android.habitica.data.UserRepository
 import com.habitrpg.android.habitica.databinding.FragmentSubscriptionBinding
 import com.habitrpg.android.habitica.extensions.addCancelButton
+import com.habitrpg.android.habitica.extensions.consumeWindowInsetsAbove30
 import com.habitrpg.android.habitica.helpers.Analytics
 import com.habitrpg.android.habitica.helpers.AppConfigManager
 import com.habitrpg.android.habitica.helpers.PurchaseHandler
@@ -33,6 +37,7 @@ import com.habitrpg.android.habitica.ui.fragments.PromoInfoFragment
 import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaAlertDialog
 import com.habitrpg.android.habitica.ui.views.promo.BirthdayBanner
 import com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+import com.habitrpg.common.habitica.extensions.dpToPx
 import com.habitrpg.common.habitica.extensions.layoutInflater
 import com.habitrpg.common.habitica.helpers.ExceptionHandler
 import com.habitrpg.common.habitica.helpers.launchCatching
@@ -149,6 +154,19 @@ class SubscriptionFragment : BaseFragment<FragmentSubscriptionBinding>() {
 
         binding?.content?.subscriptionDisclaimerView?.setMarkdown("Once we’ve confirmed your purchase, the payment will be charged to your Google Account.\n\nSubscriptions automatically renew unless auto-renewal is turned off at least 24-hours before the end of the current period. If you have an active subscription, your account will be charged for renewal within 24-hours prior to the end of your current subscription period and you will be charged the same price you initially paid.\n\nBy continuing you accept the [Terms of Use](https://habitica.com/static/terms) and [Privacy Policy](https://habitica.com/static/privacy).")
 
+        binding?.content?.bottomSpacing?.let {
+            ViewCompat.setOnApplyWindowInsetsListener(it) { v, insets ->
+                val bars = insets.getInsets(
+                    WindowInsetsCompat.Type.systemBars()
+                            or WindowInsetsCompat.Type.displayCutout()
+                )
+                v.updateLayoutParams {
+                    height = bars.bottom
+                }
+                consumeWindowInsetsAbove30(insets)
+            }
+        }
+
         Analytics.sendNavigationEvent("subscription screen")
     }
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/AppHeaderView.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/AppHeaderView.kt
index 87a349215..6d7a9245f 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/AppHeaderView.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/AppHeaderView.kt
@@ -134,11 +134,16 @@ fun AppHeaderView(
     onAvatarClicked: (() -> Unit)? = null,
     onMemberRowClicked: () -> Unit,
     onClassSelectionClicked: () -> Unit,
-    configManager: AppConfigManager? = null
+    configManager: AppConfigManager? = null,
+    useWindowInsets: Boolean = true
 ) {
     val isPlayerOptedOutOfClass = user?.preferences?.disableClasses ?: false
-    Column(modifier
-        .windowInsetsPadding(WindowInsets.systemBarsIgnoringVisibility)) {
+    var wrapperModifier = modifier
+    if (useWindowInsets) {
+        wrapperModifier = wrapperModifier
+            .windowInsetsPadding(WindowInsets.systemBarsIgnoringVisibility)
+    }
+    Column(modifier = wrapperModifier) {
         Row {
             ComposableAvatarView(
                 user,