diff --git a/app/src/main/java/org/mozilla/fenix/compose/button/Button.kt b/app/src/main/java/org/mozilla/fenix/compose/button/Button.kt
index 302b24179e..f1e522d7a6 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/button/Button.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/button/Button.kt
@@ -23,7 +23,6 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
@@ -70,8 +69,7 @@ fun Button(
         Text(
             text = text,
             color = textColor,
-            fontSize = 14.sp,
-            letterSpacing = 0.25.sp,
+            style = FirefoxTheme.typography.button,
             maxLines = 1,
         )
     }
diff --git a/app/src/main/java/org/mozilla/fenix/compose/button/TextButton.kt b/app/src/main/java/org/mozilla/fenix/compose/button/TextButton.kt
index d5b59394a1..435385e7a6 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/button/TextButton.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/button/TextButton.kt
@@ -11,10 +11,7 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 import java.util.Locale
@@ -40,13 +37,8 @@ fun TextButton(
     ) {
         Text(
             text = text.uppercase(Locale.getDefault()),
-            style = TextStyle(
-                color = textColor,
-                fontSize = 14.sp,
-                fontWeight = FontWeight.Medium,
-                letterSpacing = 0.25.sp,
-                lineHeight = 14.sp,
-            ),
+            color = textColor,
+            style = FirefoxTheme.typography.button,
             maxLines = 1,
         )
     }
diff --git a/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt b/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt
index d5f286098e..33f43b1f6e 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt
@@ -15,17 +15,14 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.Icon
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.R
-import org.mozilla.fenix.compose.PrimaryText
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 
@@ -64,10 +61,10 @@ fun ExpandableListHeader(
                 .padding(horizontal = 16.dp, vertical = 8.dp),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            PrimaryText(
+            Text(
                 text = headerText,
-                fontSize = 14.sp,
-                fontFamily = FontFamily(Font(R.font.metropolis_semibold)),
+                color = FirefoxTheme.colors.textPrimary,
+                style = FirefoxTheme.typography.headline8,
                 maxLines = 1,
             )
 
diff --git a/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt b/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt
index 7b489d428f..ea6831b4bd 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt
@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -23,11 +24,8 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.Favicon
-import org.mozilla.fenix.compose.PrimaryText
-import org.mozilla.fenix.compose.SecondaryText
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 
@@ -228,16 +226,18 @@ private fun ListItem(
                 .padding(horizontal = 16.dp, vertical = 6.dp)
                 .weight(1f),
         ) {
-            PrimaryText(
+            Text(
                 text = label,
-                fontSize = 16.sp,
+                color = FirefoxTheme.colors.textPrimary,
+                style = FirefoxTheme.typography.subtitle1,
                 maxLines = 1,
             )
 
             description?.let {
-                SecondaryText(
+                Text(
                     text = description,
-                    fontSize = 14.sp,
+                    color = FirefoxTheme.colors.textSecondary,
+                    style = FirefoxTheme.typography.body2,
                     maxLines = maxDescriptionLines,
                 )
             }