diff --git a/app/src/main/java/org/mozilla/fenix/compose/Image.kt b/app/src/main/java/org/mozilla/fenix/compose/Image.kt
index 99238e9f95..b7a35881fc 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/Image.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/Image.kt
@@ -17,6 +17,7 @@ import androidx.compose.ui.unit.dp
 import mozilla.components.support.images.compose.loader.ImageLoader
 import mozilla.components.support.images.compose.loader.WithImage
 import org.mozilla.fenix.components.components
+import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
  * A composable that lays out and draws the image from a given URL while showing a default placeholder
@@ -75,8 +76,10 @@ fun Image(
 @Composable
 @Preview
 private fun ImagePreview() {
-    Image(
-        "https://mozilla.com",
-        Modifier.height(100.dp).width(200.dp)
-    )
+    FirefoxTheme {
+        Image(
+            url = "https://mozilla.com",
+            modifier = Modifier.height(100.dp).width(200.dp)
+        )
+    }
 }
diff --git a/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt b/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt
index e60fb4ef78..cfd3d6657b 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt
@@ -5,7 +5,6 @@
 package org.mozilla.fenix.compose
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -17,7 +16,7 @@ import androidx.compose.ui.unit.dp
 import mozilla.components.support.images.compose.loader.Fallback
 import mozilla.components.support.images.compose.loader.ImageLoaderScope
 import mozilla.components.support.images.compose.loader.Placeholder
-import mozilla.components.ui.colors.PhotonColors
+import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
  * Renders the app default image placeholder while the image is still getting loaded.
@@ -68,20 +67,17 @@ internal fun DefaultImagePlaceholder(
     modifier: Modifier,
     contentDescription: String? = null
 ) {
-    val color = when (isSystemInDarkTheme()) {
-        true -> PhotonColors.DarkGrey30
-        false -> PhotonColors.LightGrey30
-    }
-
-    Image(ColorPainter(color), contentDescription, modifier)
+    Image(ColorPainter(FirefoxTheme.colors.layer2), contentDescription, modifier)
 }
 
 @Composable
 @Preview
 private fun DefaultImagePlaceholderPreview() {
-    DefaultImagePlaceholder(
-        Modifier
-            .size(200.dp, 100.dp)
-            .clip(RoundedCornerShape(8.dp))
-    )
+    FirefoxTheme {
+        DefaultImagePlaceholder(
+            Modifier
+                .size(200.dp, 100.dp)
+                .clip(RoundedCornerShape(8.dp))
+        )
+    }
 }