diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/ReleaseItem.kt b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/ReleaseItem.kt
index 3437db22..0f379f2b 100644
--- a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/ReleaseItem.kt
+++ b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/ReleaseItem.kt
@@ -2,18 +2,19 @@ package com.looker.droidify.ui.compose.pages.app_detail.components
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Download
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.looker.droidify.R
 import com.looker.droidify.database.entity.Release
@@ -27,76 +28,122 @@ fun ReleaseItem(
     release: Release,
     onDownloadClick: (Release) -> Unit = {}
 ) {
-    val highlight by animateDpAsState(targetValue = if (isSuggested or isInstalled) 12.dp else 0.dp)
     val currentRelease by remember { mutableStateOf(release) }
+    val highlight by animateDpAsState(targetValue = if (isSuggested or isInstalled) 8.dp else 0.dp)
+
     Surface(
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier
+            .fillMaxWidth()
+            .wrapContentHeight(),
         shape = MaterialTheme.shapes.large,
         tonalElevation = highlight
     ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Start
+        ReleaseItemContent(
+            release = currentRelease,
+            isSuggested = isSuggested,
+            isInstalled = isInstalled,
+            onDownloadClick = onDownloadClick
+        )
+    }
+}
+
+@Composable
+fun ReleaseItemContent(
+    modifier: Modifier = Modifier,
+    isSuggested: Boolean = false,
+    isInstalled: Boolean = false,
+    release: Release,
+    onDownloadClick: (Release) -> Unit = {}
+) {
+    Row(
+        modifier = Modifier.padding(end = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Start
+    ) {
+        IconButton(onClick = { onDownloadClick(release) }) {
+            Icon(
+                imageVector = Icons.Rounded.Download,
+                contentDescription = "Download this version"
+            )
+        }
+        Box(
+            modifier = modifier
+                .height(74.dp)
+                .fillMaxWidth()
         ) {
-            IconButton(onClick = { onDownloadClick(currentRelease) }) {
-                Icon(
-                    imageVector = Icons.Rounded.Download,
-                    contentDescription = "Download Release"
-                )
-            }
-            Box {
-                ReleaseTitleWithBadge(
-                    modifier = Modifier.align(Alignment.CenterStart),
-                    title = release.version,
-                    subtitle = release.targetSdkVersion.toString()
+            ReleaseTitleWithBadge(
+                modifier = Modifier.align(Alignment.CenterStart),
+                version = release.version,
+                repository = release.targetSdkVersion.toString()
+            ) {
+                AnimatedVisibility(
+                    visible = isSuggested or isInstalled,
+                    enter = fadeIn(),
+                    exit = fadeOut()
                 ) {
-                    AnimatedVisibility(visible = isSuggested) {
-                        ReleaseBadge(text = stringResource(id = R.string.suggested))
+                    val badgeText = remember { mutableStateOf(R.string.suggested) }
+                    LaunchedEffect(isInstalled, isSuggested) {
+                        badgeText.value =
+                            if (isSuggested && isInstalled) R.string.installed else R.string.suggested
                     }
+                    ReleaseBadge(
+                        modifier = Modifier.padding(top = 8.dp),
+                        text = stringResource(id = badgeText.value)
+                    )
                 }
-                ReleaseItemEndText(
-                    modifier = Modifier.align(Alignment.CenterEnd),
-                    title = release.added.toString(),
-                    subtitle = release.size.formatSize()
-                )
             }
+            ReleaseItemEndText(
+                modifier = Modifier.align(Alignment.CenterEnd),
+                title = release.added.toString(),
+                subtitle = release.size.formatSize()
+            )
         }
     }
 }
 
 @Composable
-fun BoxScope.ReleaseTitleWithBadge(
+fun ReleaseTitleWithBadge(
     modifier: Modifier = Modifier,
-    title: String,
-    subtitle: String,
+    version: String,
+    repository: String,
     badges: @Composable RowScope.() -> Unit = {}
 ) {
-    Column(
-        modifier = modifier.matchParentSize(),
-        verticalArrangement = Arrangement.SpaceEvenly,
-        horizontalAlignment = Alignment.Start
+    Row(
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
-            Text(text = title, style = MaterialTheme.typography.bodyMedium)
-            badges()
+        Column(
+            modifier = modifier.fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceEvenly,
+            horizontalAlignment = Alignment.Start
+        ) {
+            Spacer(modifier = Modifier.width(Dp.Hairline))
+            Text(text = version, style = MaterialTheme.typography.titleMedium)
+            Text(
+                text = stringResource(id = R.string.provided_by_FORMAT, repository),
+                style = MaterialTheme.typography.labelMedium
+            )
+            Spacer(modifier = Modifier.width(Dp.Hairline))
         }
-        Text(text = subtitle, style = MaterialTheme.typography.labelMedium)
+        badges()
     }
 }
 
 @Composable
-fun BoxScope.ReleaseItemEndText(
+fun ReleaseItemEndText(
     modifier: Modifier = Modifier,
     title: String,
     subtitle: String
 ) {
     Column(
-        modifier = modifier.matchParentSize(),
-        verticalArrangement = Arrangement.SpaceEvenly,
+        modifier = modifier.fillMaxHeight(),
+        verticalArrangement = Arrangement.SpaceBetween,
         horizontalAlignment = Alignment.Start
     ) {
+        Spacer(modifier = Modifier.width(Dp.Hairline))
         Text(text = title, style = MaterialTheme.typography.bodySmall)
         Text(text = subtitle, style = MaterialTheme.typography.labelSmall)
+        Spacer(modifier = Modifier.width(Dp.Hairline))
     }
 }
 
@@ -108,9 +155,10 @@ fun ReleaseBadge(
     onColor: Color = MaterialTheme.colorScheme.onSecondaryContainer
 ) {
     Surface(
-        modifier = modifier.padding(8.dp),
-        color = color,
-        shape = Shapes.Full
+        modifier = modifier
+            .background(color, Shapes.Full)
+            .padding(8.dp),
+        color = color
     ) {
         Text(text = text, color = onColor)
     }
diff --git a/src/main/kotlin/com/looker/droidify/utility/SampleData.kt b/src/main/kotlin/com/looker/droidify/utility/SampleData.kt
new file mode 100644
index 00000000..3a181dbe
--- /dev/null
+++ b/src/main/kotlin/com/looker/droidify/utility/SampleData.kt
@@ -0,0 +1,32 @@
+package com.looker.droidify.utility
+
+import com.looker.droidify.database.entity.Release
+
+object SampleData {
+    val demoRelease = Release(
+        packageName = "com.looker.droidify",
+        selected = false,
+        version = "v0.2.3",
+        versionCode = 1234,
+        added = 12345,
+        size = 12345,
+        maxSdkVersion = 32,
+        minSdkVersion = 29,
+        targetSdkVersion = 32,
+        source = "",
+        release = "",
+        hash = "",
+        hashType = "",
+        signature = "",
+        obbPatchHashType = "",
+        obbPatchHash = "",
+        obbPatch = "",
+        obbMainHashType = "",
+        obbMainHash = "",
+        obbMain = "",
+        permissions = listOf(),
+        features = listOf(),
+        platforms = listOf(),
+        incompatibilities = listOf()
+    )
+}
\ No newline at end of file