diff --git a/components/src/main/kotlin/de/jeanlucmakiola/floret/components/SettingsRecipes.kt b/components/src/main/kotlin/de/jeanlucmakiola/floret/components/SettingsRecipes.kt
index 9f647da..aaebaa4 100644
--- a/components/src/main/kotlin/de/jeanlucmakiola/floret/components/SettingsRecipes.kt
+++ b/components/src/main/kotlin/de/jeanlucmakiola/floret/components/SettingsRecipes.kt
@@ -13,12 +13,10 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -41,6 +39,12 @@ data class AboutLink(val icon: ImageVector, val label: String, val url: String)
  * outlined buttons (e.g. source, licence) and an optional full-width
  * [highlightLink] tonal button (e.g. donate). Each link opens its URL in the
  * browser. The app supplies its own logo, strings and links.
+ *
+ * [position] lets the card join a grouped list instead of standing alone: with
+ * [Position.Top] it takes the group's top corners and the 2dp gap below, so a
+ * [GroupedRow] underneath continues the same container. Use that when the card's
+ * call to action reads better as a row of its own than as a button inside the
+ * card — the two then form one block rather than a card with a lid on it.
  */
 @Composable
 fun AboutCard(
@@ -49,15 +53,16 @@ fun AboutCard(
     author: String,
     primaryLinks: List<AboutLink>,
     highlightLink: AboutLink? = null,
+    position: Position = Position.Alone,
 ) {
     val context = LocalContext.current
     val open = { url: String ->
         runCatching { context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url))) }
         Unit
     }
-    Surface(
+    GroupedSurface(
+        position = position,
         color = MaterialTheme.colorScheme.surfaceContainerHigh,
-        shape = RoundedCornerShape(24.dp),
         modifier = Modifier.fillMaxWidth(),
     ) {
         Column(Modifier.fillMaxWidth().padding(16.dp)) {