diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/Utils.kt b/app/src/main/java/com/pramodbharti/filmo/ui/components/Utils.kt
similarity index 86%
rename from app/src/main/java/com/pramodbharti/filmo/ui/Utils.kt
rename to app/src/main/java/com/pramodbharti/filmo/ui/components/Utils.kt
index 2006981..2067ae6 100644
--- a/app/src/main/java/com/pramodbharti/filmo/ui/Utils.kt
+++ b/app/src/main/java/com/pramodbharti/filmo/ui/components/Utils.kt
@@ -1,4 +1,4 @@
-package com.pramodbharti.filmo.ui
+package com.pramodbharti.filmo.ui.components
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.pager.PagerState
@@ -17,8 +17,9 @@ fun Modifier.carouselTransition(page: Int, pagerState: PagerState) =
             lerp(
                 start = 0.7f,
                 stop = 1f,
-                fraction = 1f - pageOffset.coerceIn(0f,1f)
+                fraction = 1f - pageOffset.coerceIn(0f, 1f)
             )
         alpha = transformation
         scaleY = transformation
-    }
\ No newline at end of file
+    }
+
diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/screens/details/DetailsScreen.kt b/app/src/main/java/com/pramodbharti/filmo/ui/screens/details/DetailsScreen.kt
index 980b679..b863401 100644
--- a/app/src/main/java/com/pramodbharti/filmo/ui/screens/details/DetailsScreen.kt
+++ b/app/src/main/java/com/pramodbharti/filmo/ui/screens/details/DetailsScreen.kt
@@ -1,21 +1,297 @@
 package com.pramodbharti.filmo.ui.screens.details
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
+import com.pramodbharti.filmo.R
+import com.pramodbharti.filmo.ui.models.MovieItem
+import com.pramodbharti.filmo.ui.screens.home.MoviePosterList
+import com.pramodbharti.filmo.ui.screens.home.MoviesScreen
+import com.pramodbharti.filmo.ui.screens.home.MoviesSection
+import com.pramodbharti.filmo.ui.screens.home.dummyMovies
+import com.pramodbharti.filmo.ui.theme.FilmoTheme
+
+@Composable
+fun ItemDetailsScreen(movieItem: MovieItem, modifier: Modifier = Modifier) {
+    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+        ItemDetails(movieItem = movieItem)
+        MoviesSection(title = "Cast") {
+            CastItemRow(casts = dummyCastData)
+        }
+        MoviesSection(title = "Similar") {
+            MoviePosterList(movies = dummyMovies)
+        }
+        MoviesSection(title = "Recommended for you") {
+            MoviePosterList(movies = dummyMovies)
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ItemDetailsScreen() {
+    FilmoTheme {
+        ItemDetailsScreen(movieItem = dummyMovies[1])
+    }
+}
+
+@Composable
+fun ItemDetails(movieItem: MovieItem, modifier: Modifier = Modifier) {
+    Box(modifier) {
+        AsyncImage(
+            model = ImageRequest
+                .Builder(context = LocalContext.current)
+                .data(movieItem.backdrop)
+                .crossfade(true)
+                .build(),
+            placeholder = painterResource(id = movieItem.backdrop),
+            error = painterResource(id = movieItem.backdrop),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+            modifier = Modifier
+                .fillMaxWidth()
+        )
+
+        ItemDetailsSection(
+            movieItem = movieItem,
+            modifier = Modifier.align(Alignment.BottomCenter)
+        )
+    }
+}
+
+@Composable
+fun ItemDetailsSection(movieItem: MovieItem, modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier.background(
+            brush = Brush.verticalGradient(
+                colorStops = arrayOf(
+                    0.0f to Color.Black.copy(alpha = 0.0f),
+                    0.1f to Color.Black.copy(alpha = 0.5f),
+                    0.2f to Color.Black.copy(alpha = 0.7f),
+                    0.7f to Color.Black.copy(alpha = 0.9f),
+                    1f to Color.Black.copy(alpha = 1f)
+                )
+            )
+        )
+    ) {
+        TitleAndFavorite(title = movieItem.title)
+        TagItemsRow(tags = dummyGenreList)
+        AboutSection()
+    }
+}
+
+@Composable
+fun ActionButton(modifier: Modifier = Modifier) {
+Row {
+
+}
+}
+
+@Composable
+fun TitleAndFavorite(title: String, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = title,
+            style = MaterialTheme.typography.titleMedium,
+            color = Color.LightGray,
+            modifier = Modifier.weight(1f),
+            fontWeight = FontWeight.Bold
+        )
+        IconButton(onClick = { /*TODO*/ }) {
+            Icon(
+                painter = painterResource(id = R.drawable.baseline_favorite),
+                contentDescription = null,
+                tint = Color.White,
+                modifier = Modifier
+                    .background(
+                        color = Color.Gray.copy(alpha = 0.5f),
+                        shape = CircleShape
+                    )
+                    .padding(8.dp)
+                    .size(20.dp)
+            )
+        }
+    }
+}
+
+@Composable
+fun TagItemsRow(tags: List<String>, modifier: Modifier = Modifier) {
+    LazyRow(
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        modifier = modifier,
+        contentPadding = PaddingValues(
+            start = 16.dp,
+            end = 16.dp,
+            bottom = 8.dp
+        )
+    ) {
+        items(tags) {
+            TagItem(tagName = it)
+        }
+    }
+}
+
+@Composable
+fun TagItem(tagName: String, modifier: Modifier = Modifier) {
+    Text(
+        text = tagName,
+        style = MaterialTheme.typography.bodySmall,
+        color = Color.White,
+        fontSize = 10.sp,
+        modifier = modifier
+            .background(Color.DarkGray)
+            .padding(horizontal = 4.dp, vertical = 2.dp)
+    )
+}
+
+@Composable
+fun AboutSection(modifier: Modifier = Modifier) {
+    Text(
+        text = "How to scroll view pager (accompanist library) on button click in jetpack compose Android".repeat(
+            3
+        ),
+        style = MaterialTheme.typography.titleMedium,
+        color = Color.LightGray,
+        fontSize = 10.sp,
+        fontWeight = FontWeight.Light,
+        modifier = modifier.padding(start = 16.dp, bottom = 16.dp),
+        lineHeight = 18.sp
+    )
+}
+
+@Composable
+fun CastItemRow(casts: List<Cast>, modifier: Modifier = Modifier) {
+    LazyRow(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        items(casts) {
+            CastItem(cast = it)
+        }
+    }
+}
 
 @Composable
 fun CastItem(cast: Cast, modifier: Modifier = Modifier) {
-    Column {
+    Column(
+        modifier = modifier.width(80.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
         AsyncImage(
-            model = ImageRequest.Builder(context = LocalContext.current),
-            contentDescription = null
+            model = ImageRequest
+                .Builder(context = LocalContext.current)
+                .data(cast.photo)
+                .crossfade(true)
+                .build(),
+            placeholder = painterResource(id = cast.photo),
+            error = painterResource(id = cast.photo),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+            modifier = Modifier
+                .clip(CircleShape)
+                .height(80.dp)
+        )
+        Text(
+            text = cast.name,
+            style = MaterialTheme.typography.bodyMedium,
+            textAlign = TextAlign.Center
         )
-        Text(text = cast.name)
     }
-}
\ No newline at end of file
+}
+
+@Preview
+@Composable
+fun ItemDetailsPreview() {
+    ItemDetails(movieItem = dummyMovies[0])
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TitleAndFavoritePreview() {
+    TitleAndFavorite(title = dummyGenreList[0])
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TagItemsRowPreview() {
+    TagItemsRow(tags = dummyGenreList)
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AboutSectionPReview() {
+    AboutSection()
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CastItemRowPreview() {
+    CastItemRow(casts = dummyCastData)
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CastItemPreview() {
+    CastItem(cast = dummyCastData[0])
+}
+
+val dummyGenreList = listOf(
+    "Adventure",
+    "Action",
+    "Animation",
+    "Documentary",
+    "Fantasy",
+    "History",
+    "Science Fiction"
+)
+
+val dummyCastData = listOf(
+    Cast("Pramod Bharti", R.drawable.dddd),
+    Cast("Konark Chakra", R.drawable.placeholder),
+    Cast("Unknown Profile", R.drawable.profile_picture),
+    Cast("Pramod Bharti", R.drawable.dddd),
+    Cast("Konark Chakra", R.drawable.placeholder),
+    Cast("Unknown Profile", R.drawable.profile_picture)
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/FilmoCarousel.kt b/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/FilmoCarousel.kt
index 75597c8..17acbc2 100644
--- a/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/FilmoCarousel.kt
+++ b/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/FilmoCarousel.kt
@@ -1,6 +1,5 @@
 package com.pramodbharti.filmo.ui.screens.home
 
-import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.collectIsDraggedAsState
@@ -21,7 +20,6 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -31,7 +29,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.pramodbharti.filmo.ui.carouselTransition
+import com.pramodbharti.filmo.ui.components.carouselTransition
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/HomeScreen.kt b/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/HomeScreen.kt
index 7cf92b5..4098e3e 100644
--- a/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/HomeScreen.kt
+++ b/app/src/main/java/com/pramodbharti/filmo/ui/screens/home/HomeScreen.kt
@@ -1,17 +1,14 @@
 package com.pramodbharti.filmo.ui.screens.home
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.paddingFromBaseline
 import androidx.compose.foundation.layout.size
@@ -21,7 +18,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.CardElevation
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -33,17 +29,14 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 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.TextUnit
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import com.pramodbharti.filmo.R
 import com.pramodbharti.filmo.ui.Constants
-import com.pramodbharti.filmo.ui.carouselTransition
 import com.pramodbharti.filmo.ui.models.MovieItem
 import com.pramodbharti.filmo.ui.theme.FilmoTheme
 
diff --git a/app/src/main/res/drawable/baseline_favorite.xml b/app/src/main/res/drawable/baseline_favorite.xml
new file mode 100644
index 0000000..59a05be
--- /dev/null
+++ b/app/src/main/res/drawable/baseline_favorite.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#E7E0E0"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
+</vector>
diff --git a/app/src/main/res/drawable/baseline_share.xml b/app/src/main/res/drawable/baseline_share.xml
new file mode 100644
index 0000000..becdc03
--- /dev/null
+++ b/app/src/main/res/drawable/baseline_share.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#E7E0E0"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
+</vector>
diff --git a/app/src/main/res/drawable/baseline_smart.xml b/app/src/main/res/drawable/baseline_smart.xml
new file mode 100644
index 0000000..a4a0a73
--- /dev/null
+++ b/app/src/main/res/drawable/baseline_smart.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#E7E0E0"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M20,4H4C2.9,4 2,4.9 2,6v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V6C22,4.9 21.1,4 20,4zM9.5,16.5v-9l7,4.5L9.5,16.5z"/>
+</vector>
diff --git a/app/src/main/res/drawable/baseline_thumb.xml b/app/src/main/res/drawable/baseline_thumb.xml
new file mode 100644
index 0000000..f6de54a
--- /dev/null
+++ b/app/src/main/res/drawable/baseline_thumb.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#E7E0E0"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M1,21h4L5,9L1,9v12zM23,10c0,-1.1 -0.9,-2 -2,-2h-6.31l0.95,-4.57 0.03,-0.32c0,-0.41 -0.17,-0.79 -0.44,-1.06L14.17,1 7.59,7.59C7.22,7.95 7,8.45 7,9v10c0,1.1 0.9,2 2,2h9c0.83,0 1.54,-0.5 1.84,-1.22l3.02,-7.05c0.09,-0.23 0.14,-0.47 0.14,-0.73v-2z"/>
+</vector>
diff --git a/app/src/main/res/drawable/dddd.jpg b/app/src/main/res/drawable/dddd.jpg
new file mode 100644
index 0000000..fb3bec0
Binary files /dev/null and b/app/src/main/res/drawable/dddd.jpg differ
diff --git a/app/src/main/res/drawable/placeholder.jpeg b/app/src/main/res/drawable/placeholder.jpeg
new file mode 100644
index 0000000..7c209e5
Binary files /dev/null and b/app/src/main/res/drawable/placeholder.jpeg differ
diff --git a/app/src/main/res/drawable/profile_picture.png b/app/src/main/res/drawable/profile_picture.png
new file mode 100644
index 0000000..eab3c65
Binary files /dev/null and b/app/src/main/res/drawable/profile_picture.png differ