diff --git a/app/src/main/java/org/wikipedia/compose/components/WikiButtons.kt b/app/src/main/java/org/wikipedia/compose/components/WikiButtons.kt
index 6cd0f859e65..2a56195a198 100644
--- a/app/src/main/java/org/wikipedia/compose/components/WikiButtons.kt
+++ b/app/src/main/java/org/wikipedia/compose/components/WikiButtons.kt
@@ -1,7 +1,10 @@
 package org.wikipedia.compose.components
 
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -9,10 +12,15 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.wikipedia.compose.ComposeColors
+import org.wikipedia.compose.theme.BaseTheme
 import org.wikipedia.compose.theme.WikipediaTheme
 
 @Composable
@@ -115,27 +123,57 @@ fun ThemeColorCircularButton(
     onClick: () -> Unit,
     text: String = "Aa",
     modifier: Modifier = Modifier,
-    backgroundColor: Color,
-    borderColor: Color
+    size: Dp = 40.dp,
+    defaultBackgroundColor: Color = WikipediaTheme.colors.paperColor,
+    selectedBackgroundColor: Color = WikipediaTheme.colors.backgroundColor,
+    borderColor: Color = WikipediaTheme.colors.progressiveColor,
+    textColor: Color = WikipediaTheme.colors.primaryColor,
+    rippleColor: Color = Color.Transparent,
+    isSelected: Boolean = false
 ) {
     Button(
         onClick = onClick,
-        modifier = modifier.border(
-            width = 2.dp,
-            color = borderColor,
-            shape = CircleShape
-        ).size(40.dp),
+        modifier = modifier
+            .border(
+                width = 2.dp,
+                color = if (isSelected) borderColor else Color.Transparent,
+                shape = CircleShape
+            )
+            .size(size),
         colors = ButtonDefaults.buttonColors(
-            containerColor = backgroundColor
+            containerColor = if (isSelected) defaultBackgroundColor else selectedBackgroundColor,
+            contentColor = rippleColor
         ),
         contentPadding = PaddingValues(0.dp)
     ) {
         Text(
             text = text,
             style = WikipediaTheme.typography.h3.copy(
-                color = WikipediaTheme.colors.primaryColor,
+                color = textColor,
                 letterSpacing = 0.sp
             )
         )
     }
 }
+
+@Preview(showSystemUi = true)
+@Composable
+private fun SepiaThemeColorButton() {
+    BaseTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            ThemeColorCircularButton(
+                isSelected = true,
+                defaultBackgroundColor = ComposeColors.Beige300,
+                selectedBackgroundColor = ComposeColors.Beige300,
+                rippleColor = ComposeColors.Beige300,
+                textColor = ComposeColors.Gray700,
+                onClick = {}
+            )
+        }
+    }
+}