diff --git a/README.md b/README.md
index 289ccb5d..01f429a8 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,19 @@ from [Now in Android](https://github.com/android/nowinandroid). **The developmen
 # Screenshots
 <div style="width:100%; display:flex; justify-content:space-between;">
 
-[<img src="docs/images/1.jpg" width=19% alt="1">](docs/images/1.jpg)
-[<img src="docs/images/2.jpg" width=19% alt="2">](docs/images/2.jpg)
-[<img src="docs/images/3.jpg" width=19% alt="3">](docs/images/3.jpg)
-[<img src="docs/images/4.jpg" width=19% alt="4">](docs/images/4.jpg)
-[<img src="docs/images/5.jpg" width=19% alt="5">](docs/images/5.jpg)
-[<img src="docs/images/5.jpg" width=19% alt="6">](docs/images/6.jpg)
+[<img src="docs/images/1.jpg" width=19% alt="1">](docs/images/1.webp)
+[<img src="docs/images/2.jpg" width=19% alt="2">](docs/images/2.webp)
+[<img src="docs/images/3.jpg" width=19% alt="3">](docs/images/3.webp)
+[<img src="docs/images/4.jpg" width=19% alt="4">](docs/images/4.webp)
+[<img src="docs/images/5.jpg" width=19% alt="5">](docs/images/5.webp)
+[<img src="docs/images/5.jpg" width=19% alt="6">](docs/images/6.webp)
 </div>
+
+# Firebase
+
+<div style="width:100%; display:flex; justify-content:space-between;">
+
+[<img src="docs/images/1.jpg" width=19% alt="1">](docs/images/7.webp)
+[<img src="docs/images/2.jpg" width=19% alt="2">](docs/images/8.webp)
+[<img src="docs/images/3.jpg" width=19% alt="3">](docs/images/9.webp)
+</div>
\ No newline at end of file
diff --git a/core/design-system/src/main/kotlin/com/android/socialworkreviewer/core/designsystem/component/SwrLoadingWheel.kt b/core/design-system/src/main/kotlin/com/android/socialworkreviewer/core/designsystem/component/SwrLoadingWheel.kt
index 11f819da..18097281 100644
--- a/core/design-system/src/main/kotlin/com/android/socialworkreviewer/core/designsystem/component/SwrLoadingWheel.kt
+++ b/core/design-system/src/main/kotlin/com/android/socialworkreviewer/core/designsystem/component/SwrLoadingWheel.kt
@@ -17,6 +17,7 @@
  */
 package com.android.socialworkreviewer.core.designsystem.component
 
+import androidx.annotation.IntRange
 import androidx.compose.animation.animateColor
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.FastOutSlowInEasing
@@ -55,14 +56,16 @@ import kotlinx.coroutines.launch
 fun SwrLoadingWheel(
     contentDescription: String,
     modifier: Modifier = Modifier,
+    @IntRange(from = 5, to = 12) numberOfLines: Int = 10,
+    @IntRange(from = 5000, to = 20000) rotationTime: Int = 12000,
 ) {
     val infiniteTransition = rememberInfiniteTransition(label = "wheel transition")
 
     // Specifies the float animation for slowly drawing out the lines on entering
     val startValue = if (LocalInspectionMode.current) 0F else 1F
-    val floatAnimValues = (0 until NUM_OF_LINES).map { remember { Animatable(startValue) } }
+    val floatAnimValues = (0 until numberOfLines).map { remember { Animatable(startValue) } }
     LaunchedEffect(floatAnimValues) {
-        (0 until NUM_OF_LINES).map { index ->
+        (0 until numberOfLines).map { index ->
             launch {
                 floatAnimValues[index].animateTo(
                     targetValue = 0F,
@@ -81,7 +84,7 @@ fun SwrLoadingWheel(
         initialValue = 0F,
         targetValue = 360F,
         animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = ROTATION_TIME, easing = LinearEasing),
+            animation = tween(durationMillis = rotationTime, easing = LinearEasing),
         ),
         label = "wheel rotation animation",
     )
@@ -90,18 +93,18 @@ fun SwrLoadingWheel(
     val baseLineColor = MaterialTheme.colorScheme.onBackground
     val progressLineColor = MaterialTheme.colorScheme.inversePrimary
 
-    val colorAnimValues = (0 until NUM_OF_LINES).map { index ->
+    val colorAnimValues = (0 until numberOfLines).map { index ->
         infiniteTransition.animateColor(
             initialValue = baseLineColor,
             targetValue = baseLineColor,
             animationSpec = infiniteRepeatable(
                 animation = keyframes {
-                    durationMillis = ROTATION_TIME / 2
-                    progressLineColor at ROTATION_TIME / NUM_OF_LINES / 2 using LinearEasing
-                    baseLineColor at ROTATION_TIME / NUM_OF_LINES using LinearEasing
+                    durationMillis = rotationTime / 2
+                    progressLineColor at rotationTime / numberOfLines / 2 using LinearEasing
+                    baseLineColor at rotationTime / numberOfLines using LinearEasing
                 },
                 repeatMode = RepeatMode.Restart,
-                initialStartOffset = StartOffset(ROTATION_TIME / NUM_OF_LINES / 2 * index),
+                initialStartOffset = StartOffset(rotationTime / numberOfLines / 2 * index),
             ),
             label = "wheel color animation",
         )
@@ -109,16 +112,20 @@ fun SwrLoadingWheel(
 
     // Draws out the LoadingWheel Canvas composable and sets the animations
     Canvas(
-        modifier = modifier.size(48.dp).padding(8.dp).graphicsLayer { rotationZ = rotationAnim }
-            .semantics { this.contentDescription = contentDescription }.testTag("loadingWheel"),
+        modifier = modifier
+            .size(48.dp)
+            .padding(8.dp)
+            .graphicsLayer { rotationZ = rotationAnim }
+            .semantics { this.contentDescription = contentDescription }
+            .testTag("loadingWheel"),
     ) {
-        repeat(NUM_OF_LINES) { index ->
-            rotate(degrees = index * 30f) {
+        repeat(numberOfLines) { index ->
+            rotate(degrees = 360f / numberOfLines * index) {
                 drawLine(
                     color = colorAnimValues[index].value,
                     // Animates the initially drawn 1 pixel alpha from 0 to 1
                     alpha = if (floatAnimValues[index].value < 1f) 1f else 0f,
-                    strokeWidth = 4F,
+                    strokeWidth = 6F,
                     cap = StrokeCap.Round,
                     start = Offset(size.width / 2, size.height / 4),
                     end = Offset(size.width / 2, floatAnimValues[index].value * size.height / 4),
@@ -128,6 +135,54 @@ fun SwrLoadingWheel(
     }
 }
 
+@Composable
+fun SwrIosLoadingWheel(
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+    @IntRange(from = 5, to = 12) numberOfLines: Int = 10,
+    @IntRange(from = 5000, to = 20000) rotationTime: Int = 12000,
+) {
+    val infiniteTransition = rememberInfiniteTransition(label = "wheel transition")
+
+    val progressLineColor = MaterialTheme.colorScheme.inversePrimary
+
+    val colorAnimValues = (0 until numberOfLines).map { index ->
+        infiniteTransition.animateColor(
+            initialValue = progressLineColor.copy(alpha = 0.1f),
+            targetValue = progressLineColor.copy(alpha = 0.1f),
+            animationSpec = infiniteRepeatable(
+                animation = keyframes {
+                    durationMillis = rotationTime / 2
+                    progressLineColor.copy(alpha = 1f) at rotationTime / numberOfLines / 2 using LinearEasing
+                },
+                repeatMode = RepeatMode.Restart,
+                initialStartOffset = StartOffset(rotationTime / numberOfLines / 2 * index),
+            ),
+            label = "wheel color animation",
+        )
+    }
+
+    Canvas(
+        modifier = modifier
+            .size(48.dp)
+            .padding(8.dp)
+            .semantics { this.contentDescription = contentDescription }
+            .testTag("loadingWheel"),
+    ) {
+        repeat(numberOfLines) { index ->
+            rotate(degrees = 360f / numberOfLines * index) {
+                drawLine(
+                    color = colorAnimValues[index].value,
+                    strokeWidth = 6F,
+                    cap = StrokeCap.Round,
+                    start = Offset(size.width / 2, 0f),
+                    end = Offset(size.width / 2, size.height / 4),
+                )
+            }
+        }
+    }
+}
+
 @Composable
 fun SwrOverlayLoadingWheel(
     contentDescription: String,
@@ -155,6 +210,16 @@ private fun SwrLoadingWheelPreview() {
     }
 }
 
+@ThemePreviews
+@Composable
+private fun SwrIosLoadingWheelPreview() {
+    SwrTheme {
+        Surface {
+            SwrIosLoadingWheel(contentDescription = "SocialWorkReviewerOverlayLoadingWheel")
+        }
+    }
+}
+
 @ThemePreviews
 @Composable
 private fun SwrOverlayLoadingWheelPreview() {
@@ -164,6 +229,3 @@ private fun SwrOverlayLoadingWheelPreview() {
         }
     }
 }
-
-private const val ROTATION_TIME = 12000
-private const val NUM_OF_LINES = 12
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_1000.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_1000.png
index 3388670d..b8bbd856 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_1000.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_1000.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_115.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_115.png
index ee500e90..2fd2c818 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_115.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_115.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_20.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_20.png
index 5c9f0e51..67e731a1 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_20.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_20.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_724.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_724.png
index 05171537..b7e1eb19 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_724.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_animation_724.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_androidTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_androidTheme_notDynamic.png
index e6171872..81d29f05 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_androidTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_androidTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_dynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_dynamic.png
index 55dd863d..f7f77ba5 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_dynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_dynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_notDynamic.png
index 3123ab43..6bfd8b21 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_dark_defaultTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_androidTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_androidTheme_notDynamic.png
index f04e7cbb..7912946d 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_androidTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_androidTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_dynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_dynamic.png
index 0dcc25a8..23538750 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_dynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_dynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_notDynamic.png
index 79b982f4..bf71e0b5 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/LoadingWheel_light_defaultTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_androidTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_androidTheme_notDynamic.png
index 2b4050b9..ef5827be 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_androidTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_androidTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_dynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_dynamic.png
index f4f478cc..2e67035c 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_dynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_dynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_notDynamic.png
index a516a558..06d40bf5 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_dark_defaultTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_androidTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_androidTheme_notDynamic.png
index cea88ddd..f2e7a7a9 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_androidTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_androidTheme_notDynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_dynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_dynamic.png
index 2a5d017a..fc58146f 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_dynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_dynamic.png differ
diff --git a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_notDynamic.png b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_notDynamic.png
index 5b0b9a1b..58a63154 100644
Binary files a/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_notDynamic.png and b/core/design-system/src/test/screenshots/LoadingWheel/OverlayLoadingWheel_light_defaultTheme_notDynamic.png differ
diff --git a/docs/images/1.jpg b/docs/images/1.jpg
deleted file mode 100644
index ee73a2c5..00000000
Binary files a/docs/images/1.jpg and /dev/null differ
diff --git a/docs/images/1.webp b/docs/images/1.webp
new file mode 100644
index 00000000..7734ad4c
Binary files /dev/null and b/docs/images/1.webp differ
diff --git a/docs/images/2.jpg b/docs/images/2.jpg
deleted file mode 100644
index fd8914b9..00000000
Binary files a/docs/images/2.jpg and /dev/null differ
diff --git a/docs/images/2.webp b/docs/images/2.webp
new file mode 100644
index 00000000..780b981f
Binary files /dev/null and b/docs/images/2.webp differ
diff --git a/docs/images/3.jpg b/docs/images/3.jpg
deleted file mode 100644
index 3da16295..00000000
Binary files a/docs/images/3.jpg and /dev/null differ
diff --git a/docs/images/3.webp b/docs/images/3.webp
new file mode 100644
index 00000000..c68825fc
Binary files /dev/null and b/docs/images/3.webp differ
diff --git a/docs/images/4.jpg b/docs/images/4.jpg
deleted file mode 100644
index f23b099f..00000000
Binary files a/docs/images/4.jpg and /dev/null differ
diff --git a/docs/images/4.webp b/docs/images/4.webp
new file mode 100644
index 00000000..43ffed2f
Binary files /dev/null and b/docs/images/4.webp differ
diff --git a/docs/images/5.jpg b/docs/images/5.jpg
deleted file mode 100644
index 21ea1373..00000000
Binary files a/docs/images/5.jpg and /dev/null differ
diff --git a/docs/images/5.webp b/docs/images/5.webp
new file mode 100644
index 00000000..751ed799
Binary files /dev/null and b/docs/images/5.webp differ
diff --git a/docs/images/6.jpg b/docs/images/6.jpg
deleted file mode 100644
index 1b355042..00000000
Binary files a/docs/images/6.jpg and /dev/null differ
diff --git a/docs/images/6.webp b/docs/images/6.webp
new file mode 100644
index 00000000..73415ba4
Binary files /dev/null and b/docs/images/6.webp differ
diff --git a/docs/images/7.webp b/docs/images/7.webp
new file mode 100644
index 00000000..a97987bf
Binary files /dev/null and b/docs/images/7.webp differ
diff --git a/docs/images/8.webp b/docs/images/8.webp
new file mode 100644
index 00000000..efc2bf61
Binary files /dev/null and b/docs/images/8.webp differ
diff --git a/docs/images/9.webp b/docs/images/9.webp
new file mode 100644
index 00000000..e8f2487c
Binary files /dev/null and b/docs/images/9.webp differ
diff --git a/feature/question/src/main/kotlin/com/android/socialworkreviewer/feature/question/screen/LoadingScreen.kt b/feature/question/src/main/kotlin/com/android/socialworkreviewer/feature/question/screen/LoadingScreen.kt
index 737879af..7968bf01 100644
--- a/feature/question/src/main/kotlin/com/android/socialworkreviewer/feature/question/screen/LoadingScreen.kt
+++ b/feature/question/src/main/kotlin/com/android/socialworkreviewer/feature/question/screen/LoadingScreen.kt
@@ -25,7 +25,7 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import com.android.socialworkreviewer.core.designsystem.component.SwrLoadingWheel
+import com.android.socialworkreviewer.core.designsystem.component.SwrIosLoadingWheel
 
 @Composable
 internal fun LoadingScreen(modifier: Modifier = Modifier) {
@@ -36,9 +36,9 @@ internal fun LoadingScreen(modifier: Modifier = Modifier) {
                 .consumeWindowInsets(paddingValues)
                 .padding(paddingValues),
         ) {
-            SwrLoadingWheel(
+            SwrIosLoadingWheel(
                 modifier = Modifier.align(Alignment.Center),
-                contentDescription = "SocialWorkReviewerLoadingWheel",
+                contentDescription = "SwrIosLoadingWheel",
             )
         }
     }
diff --git a/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable.png b/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable.png
index db687464..50c1e536 100644
Binary files a/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable.png and b/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable.png differ
diff --git a/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable_dark.png b/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable_dark.png
index 9765685d..ba30e2fa 100644
Binary files a/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable_dark.png and b/feature/settings/src/test/screenshots/SettingsScreenLoading_foldable_dark.png differ