diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
new file mode 100644
index 0000000..488a812
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -0,0 +1,51 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.material.Surface
+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.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import dev.chrisbanes.accompanist.coil.CoilImage
+
+@Composable
+fun AnimationRow(
+    title: String,
+    previewUrl: String,
+    previewBackgroundColor: Color,
+    onClick: () -> Unit
+) {
+    Surface(
+        modifier = Modifier.clickable(onClick = onClick)
+    ) {
+        Row(
+            verticalGravity = Alignment.CenterVertically,
+            modifier = Modifier
+                .padding(8.dp)
+                .fillMaxWidth()
+        ) {
+            CoilImage(
+                data = previewUrl,
+                modifier = Modifier
+                    .preferredSize(40.dp)
+                    .background(color = previewBackgroundColor)
+                    .padding(end = 16.dp)
+            )
+            Text(
+                title,
+                fontSize = 16.sp,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt
new file mode 100644
index 0000000..ee35bdc
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt
@@ -0,0 +1,19 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.sample.compose.R
+
+@Composable
+fun Loader(
+    modifier: Modifier = Modifier
+) {
+    LottieAnimation(
+        LottieAnimationSpec.RawRes(R.raw.loading),
+        modifier = Modifier
+            .preferredSize(100.dp)
+            .then(modifier)
+    )
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt
new file mode 100644
index 0000000..8ab28bd
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt
@@ -0,0 +1,23 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.airbnb.lottie.sample.compose.ui.textColorDark
+
+@Composable
+fun Marquee(text: String) {
+    Text(
+        text,
+        fontSize = 32.sp,
+        color = textColorDark,
+        fontWeight = FontWeight.Bold,
+        modifier = Modifier
+            .padding(vertical = 24.dp, horizontal = 16.dp)
+    )
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
index 691bb1b..6589a23 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
@@ -3,14 +3,27 @@
 import android.content.Context
 import android.util.Log
 import android.view.View
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Icon
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.BottomAppBar
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Providers
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.res.vectorResource
 import androidx.fragment.app.Fragment
+import androidx.navigation.NavOptions
+import androidx.navigation.NavOptionsBuilder
 import androidx.navigation.fragment.findNavController
 import com.airbnb.lottie.sample.compose.NavControllerAmbient
+import com.airbnb.lottie.sample.compose.R
 import com.airbnb.lottie.sample.compose.ui.LottieTheme
 
 fun Fragment.LottieComposeScaffoldView(context: Context, Content: @Composable () -> Unit): View {
@@ -18,11 +31,39 @@
         setContent {
             Providers(NavControllerAmbient provides findNavController()) {
                 LottieTheme {
-                    Surface(color = MaterialTheme.colors.background) {
+                    Scaffold(
+                        bottomBar = {
+                            BottomAppBar{
+                                Row(
+                                    horizontalArrangement = Arrangement.SpaceAround,
+                                    modifier = Modifier.fillMaxWidth()
+                                ) {
+                                    BottomBarButton(R.drawable.ic_showcase) {
+                                        findNavController().navigate(R.id.showcase)
+                                    }
+
+                                    BottomBarButton(R.drawable.ic_lottie_files) {
+                                        findNavController().navigate(R.id.lottie_files)
+                                    }
+                                    BottomBarButton(R.drawable.ic_device) {
+                                    }
+                                    BottomBarButton(R.drawable.ic_learn) {
+                                    }
+                                }
+                            }
+                        }
+                    ){
                         Content()
                     }
                 }
             }
         }
     }
+}
+
+@Composable
+fun BottomBarButton(@DrawableRes iconRes: Int, onClick: () -> Unit) {
+    IconButton(onClick = onClick) {
+        Icon(vectorResource(iconRes))
+    }
 }
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
new file mode 100644
index 0000000..af39716
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
@@ -0,0 +1,120 @@
+package com.airbnb.lottie.sample.compose.lottiefiles
+
+import android.graphics.drawable.shapes.RoundRectShape
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.StringRes
+import androidx.compose.foundation.Box
+import androidx.compose.foundation.ScrollableColumn
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredHeight
+import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.onPositioned
+import androidx.compose.ui.platform.ConfigurationAmbient
+import androidx.compose.ui.platform.DensityAmbient
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.fragment.app.Fragment
+import com.airbnb.lottie.sample.compose.R
+import com.airbnb.lottie.sample.compose.composables.LottieComposeScaffoldView
+import com.airbnb.lottie.sample.compose.composables.Marquee
+
+class LottieFilesFragment : Fragment() {
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+        return LottieComposeScaffoldView(requireContext()) {
+            LottieFilesPage()
+        }
+    }
+}
+
+enum class LottieFilesTab(@StringRes val stringRes: Int) {
+    Recent(R.string.tab_recent),
+    Popular(R.string.tab_popular),
+    Search(R.string.tab_search)
+}
+
+@Composable
+fun LottieFilesPage() {
+    val tab = remember { mutableStateOf(LottieFilesTab.Recent) }
+
+    ScrollableColumn {
+        Marquee("LottieFiles")
+        LottieFilesTabBar(
+            selectedTab = tab.value,
+            onTabSelected = { tab.value = it },
+        )
+    }
+
+}
+
+@Composable
+fun LottieFilesTabBar(
+    selectedTab: LottieFilesTab,
+    onTabSelected: (LottieFilesTab) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = Modifier.fillMaxWidth().then(modifier),
+        horizontalArrangement = Arrangement.Start
+    ) {
+        for (tab in LottieFilesTab.values()) {
+            LottieFilesTabBarTab(
+                text = stringResource(tab.stringRes),
+                isSelected = tab == selectedTab,
+                onClick = { onTabSelected(tab) }
+            )
+        }
+    }
+}
+
+@Composable
+fun LottieFilesTabBarTab(
+    text: String,
+    isSelected: Boolean,
+    onClick: () -> Unit
+) {
+    val textWidth = remember { mutableStateOf(0) }
+    val pxRatio = with(DensityAmbient.current) { 1.dp.toPx() }
+    Column(
+        modifier = Modifier
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        Text(
+            text,
+            maxLines = 1,
+            modifier = Modifier
+                .onPositioned { textWidth.value = it.size.width }
+                .wrapContentWidth()
+        )
+        if (isSelected) {
+            Box(
+                modifier = Modifier
+                    .preferredHeight(3.dp)
+                    .background(MaterialTheme.colors.primary)
+                    .preferredWidth((textWidth.value / pxRatio).dp)
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
index 21de3de..d2872ab 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
@@ -9,7 +9,6 @@
 import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.Divider
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Providers
 import androidx.compose.runtime.ambientOf
@@ -17,22 +16,13 @@
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.viewinterop.viewModel
 import androidx.fragment.app.Fragment
 import androidx.ui.tooling.preview.Preview
 import com.airbnb.lottie.sample.compose.R
-import com.airbnb.lottie.sample.compose.api.FeaturedAnimationsResponse
-import com.airbnb.lottie.sample.compose.composables.LottieAnimation
-import com.airbnb.lottie.sample.compose.composables.LottieAnimationSpec
-import com.airbnb.lottie.sample.compose.composables.LottieComposeScaffoldView
+import com.airbnb.lottie.sample.compose.composables.*
 import com.airbnb.lottie.sample.compose.findNavController
 import com.airbnb.lottie.sample.compose.ui.LottieTheme
-import com.airbnb.lottie.sample.compose.ui.textColorDark
 import com.airbnb.mvrx.*
-import dev.chrisbanes.accompanist.coil.CoilImage
 
 val ShowcaseStateAmbient = ambientOf { ShowcaseState() }
 
@@ -83,62 +73,6 @@
     }
 }
 
-@Composable
-fun Marquee(text: String) {
-    Text(
-        text,
-        fontSize = 16.sp,
-        color = textColorDark,
-        modifier = Modifier
-            .padding(vertical = 24.dp, horizontal = 16.dp)
-    )
-}
-
-@Composable
-fun Loader(
-    modifier: Modifier = Modifier
-) {
-    LottieAnimation(
-        LottieAnimationSpec.RawRes(R.raw.loading),
-        modifier = Modifier
-            .preferredSize(100.dp)
-            .then(modifier)
-    )
-}
-
-@Composable
-fun AnimationRow(
-    title: String,
-    previewUrl: String,
-    previewBackgroundColor: Color,
-    onClick: () -> Unit
-) {
-    Surface(
-        modifier = Modifier.clickable(onClick = onClick)
-    ) {
-        Row(
-            verticalGravity = Alignment.CenterVertically,
-            modifier = Modifier
-                .padding(8.dp)
-                .fillMaxWidth()
-        ) {
-            CoilImage(
-                data = previewUrl,
-                modifier = Modifier
-                    .preferredSize(40.dp)
-                    .background(color = previewBackgroundColor)
-                    .padding(end = 16.dp)
-            )
-            Text(
-                title,
-                fontSize = 16.sp,
-                overflow = TextOverflow.Ellipsis
-            )
-        }
-
-    }
-}
-
 @Preview(showBackground = true)
 @Composable
 fun DefaultPreview() {
diff --git a/sample-compose/src/main/res/drawable/ic_device.xml b/sample-compose/src/main/res/drawable/ic_device.xml
new file mode 100644
index 0000000..d8bcbb4
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_device.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF4C4C4C"
+        android:pathData="M17,1.01L7,1c-1.1,0 -1.99,0.9 -1.99,2v18c0,1.1 0.89,2 1.99,2h10c1.1,0 2,-0.9 2,-2V3c0,-1.1 -0.9,-1.99 -2,-1.99zM17,19H7V5h10v14z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_learn.xml b/sample-compose/src/main/res/drawable/ic_learn.xml
new file mode 100644
index 0000000..bfebdd4
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_learn.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM13,19h-2v-2h2v2zM15.07,11.25l-0.9,0.92C13.45,12.9 13,13.5 13,15h-2v-0.5c0,-1.1 0.45,-2.1 1.17,-2.83l1.24,-1.26c0.37,-0.36 0.59,-0.86 0.59,-1.41 0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2L8,9c0,-2.21 1.79,-4 4,-4s4,1.79 4,4c0,0.88 -0.36,1.68 -0.93,2.25z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_lottie_files.xml b/sample-compose/src/main/res/drawable/ic_lottie_files.xml
new file mode 100644
index 0000000..fc847b3
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_lottie_files.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M19.36,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.64,-4.96z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_showcase.xml b/sample-compose/src/main/res/drawable/ic_showcase.xml
new file mode 100644
index 0000000..ee61005
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_showcase.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM16.23,18L12,15.45 7.77,18l1.12,-4.81 -3.73,-3.23 4.92,-0.42L12,5l1.92,4.53 4.92,0.42 -3.73,3.23L16.23,18z"/>
+</vector>
diff --git a/sample-compose/src/main/res/navigation/nav_graph.xml b/sample-compose/src/main/res/navigation/nav_graph.xml
index 9aa1733..8fb8859 100644
--- a/sample-compose/src/main/res/navigation/nav_graph.xml
+++ b/sample-compose/src/main/res/navigation/nav_graph.xml
@@ -10,4 +10,8 @@
     <fragment
         android:id="@+id/showcase"
         android:name="com.airbnb.lottie.sample.compose.showcase.ShowcaseFragment" />
+
+    <fragment
+        android:id="@+id/lottie_files"
+        android:name="com.airbnb.lottie.sample.compose.lottiefiles.LottieFilesFragment" />
 </navigation>
\ No newline at end of file
diff --git a/sample-compose/src/main/res/values/strings.xml b/sample-compose/src/main/res/values/strings.xml
index a7e068d..54037d2 100644
--- a/sample-compose/src/main/res/values/strings.xml
+++ b/sample-compose/src/main/res/values/strings.xml
@@ -1,3 +1,7 @@
 <resources>
     <string name="app_name">LottieCompose</string>
+
+    <string name="tab_recent">Recent</string>
+    <string name="tab_popular">Popular</string>
+    <string name="tab_search">Search</string>
 </resources>
\ No newline at end of file