diff --git a/README.md b/README.md
index 613ed04..cc2272d 100644
--- a/README.md
+++ b/README.md
@@ -27,5 +27,9 @@
 ## Movies
 ![MoviesGrid](https://user-images.githubusercontent.com/21205138/228040389-25c4f8c1-b600-411c-9d35-00fb18de8e3e.png)
 
+## Songs
+![songs](https://user-images.githubusercontent.com/21205138/232351274-d5c47060-d876-4d11-b993-d66184be44fe.png)
+
+
 ## Whole Experience 
 <video src='https://user-images.githubusercontent.com/21205138/227805240-fe0576b8-bdbe-40c9-a623-5a47ce8b420d.mp4' width=180/>
diff --git a/app/src/main/java/com/techlads/composetv/hero/HeroItem.kt b/app/src/main/java/com/techlads/composetv/hero/HeroItem.kt
index fa04773..18af41f 100644
--- a/app/src/main/java/com/techlads/composetv/hero/HeroItem.kt
+++ b/app/src/main/java/com/techlads/composetv/hero/HeroItem.kt
@@ -3,7 +3,9 @@ package com.techlads.composetv.hero
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.*
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.tv.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -12,6 +14,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.tv.material3.MaterialTheme
 import com.techlads.composetv.R
 
 @Composable
@@ -44,8 +47,6 @@ fun HeroItem(modifier: Modifier = Modifier) {
                 )
             }
         }
-
-
     }
 }
 
diff --git a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt
index fced251..edb9d42 100644
--- a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt
+++ b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt
@@ -18,7 +18,7 @@ import com.techlads.composetv.login.withEmailPassword.LoginScreen
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) {
-    AnimatedNavHost(navController = navController, startDestination = Screens.LoginToken.title) {
+    AnimatedNavHost(navController = navController, startDestination = Screens.Home.title) {
         // e.g will add auth routes here if when we will extend project
         composable(
             Screens.Login.title,
diff --git a/app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt b/app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt
index 61409a0..bac56b3 100644
--- a/app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt
+++ b/app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt
@@ -29,34 +29,34 @@ fun ProfileScreen() {
 @Composable
 fun ProfilesContent() {
     Column {
-
         Row(verticalAlignment = Alignment.CenterVertically) {
-            Image(
-                modifier = Modifier
-                    .size(100.dp)
-                    .clip(CircleShape)
-                    .shadow(elevation = 12.dp, shape = CircleShape, clip = true)
-                    .border(2.dp, LocalContentColor.current, CircleShape),
-                painter = painterResource(id = R.drawable.profile),
-                contentDescription = "User profile"
-            )
+            ProfilePicture()
             Spacer(modifier = Modifier.size(20.dp))
             UserDetails()
         }
         Spacer(modifier = Modifier.size(5.dp))
         Row {
             Spacer(modifier = Modifier.size(120.dp))
-            Button(text = "Save") {
-
-            }
+            Button(text = "Save") {}
             Spacer(modifier = Modifier.size(8.dp))
-            Button(text = "Cancel") {
-
-            }
+            Button(text = "Cancel") {}
         }
     }
 }
 
+@Composable
+fun ProfilePicture() {
+    Image(
+        modifier = Modifier
+            .size(100.dp)
+            .clip(CircleShape)
+            .shadow(elevation = 12.dp, shape = CircleShape, clip = true)
+            .border(2.dp, LocalContentColor.current, CircleShape),
+        painter = painterResource(id = R.drawable.profile),
+        contentDescription = "User profile"
+    )
+}
+
 @Composable
 fun UserDetails() {
     Column {
diff --git a/app/src/main/java/com/techlads/composetv/songs/SongsScreen.kt b/app/src/main/java/com/techlads/composetv/songs/SongsScreen.kt
index c487764..46bda92 100644
--- a/app/src/main/java/com/techlads/composetv/songs/SongsScreen.kt
+++ b/app/src/main/java/com/techlads/composetv/songs/SongsScreen.kt
@@ -1,23 +1,141 @@
 package com.techlads.composetv.songs
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.tv.material3.Text
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.foundation.lazy.grid.TvGridCells
+import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
+import androidx.tv.foundation.lazy.list.TvLazyRow
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+import com.techlads.composetv.R
+import com.techlads.composetv.songs.data.SongsTagsData.generateRandomColor
+import com.techlads.composetv.widgets.TransparentBorderedFocusableItem
 
 @Composable
-fun SongsScreen(){
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-        Text(text = "Songs")
+fun SongsScreen() {
+    Column(Modifier.fillMaxSize()) {
+        SongCategories(Modifier.weight(0.8f))
+        RecentHistory(Modifier.weight(1.2f))
     }
 }
 
+@Composable
+fun RecentHistory(modifier: Modifier = Modifier) {
+    Column(modifier) {
+        Text(
+            text = "Recent Songs",
+            style = MaterialTheme.typography.titleMedium,
+            modifier = Modifier.padding(horizontal = 32.dp)
+        )
+        TvLazyRow(contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp)) {
+            items(12) {
+                TransparentBorderedFocusableItem(onClick = {}, Modifier.padding(4.dp)) {
+                    SongItem(it)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun SongCategories(modifier: Modifier = Modifier) {
+    Column(
+        modifier
+            .fillMaxWidth()
+            .clipToBounds()) {
+        SongsHomeGreeting()
+        Spacer(modifier = Modifier.height(8.dp))
+        TagsList()
+    }
+}
+
+@Composable
+fun TagsList(modifier: Modifier = Modifier) {
+    TvLazyVerticalGrid(
+        contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp),
+        columns = TvGridCells.Fixed(3),
+        modifier = modifier
+            .fillMaxSize()
+    ) {
+        items(6) {
+            TransparentBorderedFocusableItem(onClick = {}, Modifier.padding(4.dp)) {
+                TagItem(it)
+            }
+        }
+    }
+}
+
+@Composable
+fun TagItem(it: Int) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .background(generateRandomColor()),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.song),
+            contentDescription = "Song image",
+            modifier = Modifier.size(50.dp)
+        )
+        Text(text = "Song item $it",
+            Modifier
+                .weight(1f)
+                .padding(horizontal = 16.dp)
+                .fillMaxWidth()
+        )
+    }
+}
+
+@Composable
+fun SongItem(it: Int) {
+    Column(
+        Modifier
+            .width(150.dp)
+            .wrapContentHeight()
+            .background(generateRandomColor())
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.song),
+            contentDescription = "Song image",
+            Modifier.fillMaxWidth()
+        )
+        Text(
+            text = "Song item $it",
+            Modifier
+                .padding(16.dp)
+        )
+    }
+}
+
+@Composable
+fun SongsHomeGreeting() {
+    Text(text = "Good Morning", style = MaterialTheme.typography.titleLarge, modifier = Modifier.padding(start = 32.dp, top = 32.dp))
+}
+
 
 @Preview
 @Composable
 fun SongsScreenPrev() {
     SongsScreen()
+}
+
+@Preview
+@Composable
+fun SongItemPrev() {
+    SongItem(1)
+}
+
+@Preview
+@Composable
+fun TagItemPrev() {
+    TagItem(1)
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/techlads/composetv/songs/data/SongsTagsData.kt b/app/src/main/java/com/techlads/composetv/songs/data/SongsTagsData.kt
new file mode 100644
index 0000000..4719a94
--- /dev/null
+++ b/app/src/main/java/com/techlads/composetv/songs/data/SongsTagsData.kt
@@ -0,0 +1,11 @@
+package com.techlads.composetv.songs.data
+
+import androidx.compose.ui.graphics.Color
+import java.util.*
+
+object SongsTagsData {
+    fun generateRandomColor() : Color {
+        val rnd = Random()
+        return Color(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256))
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/techlads/composetv/widgets/TransparentBorderedFocusableItem.kt b/app/src/main/java/com/techlads/composetv/widgets/TransparentBorderedFocusableItem.kt
new file mode 100644
index 0000000..62bf6d3
--- /dev/null
+++ b/app/src/main/java/com/techlads/composetv/widgets/TransparentBorderedFocusableItem.kt
@@ -0,0 +1,59 @@
+package com.techlads.composetv.widgets
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.*
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@Composable
+fun TransparentBorderedFocusableItem(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    content: @Composable (BoxScope.() -> Unit)
+) {
+    Surface(
+        onClick = { onClick() },
+        scale = ClickableSurfaceDefaults.scale(focusedScale = 1.2f),
+        color = ClickableSurfaceDefaults.color(
+            color = Color.Transparent,
+            focusedColor = Color.Transparent
+        ),
+        contentColor = ClickableSurfaceDefaults.contentColor(
+            color = colorScheme.surface,
+            focusedColor = colorScheme.surface
+        ),
+        border = ClickableSurfaceDefaults.border(
+            focusedBorder = Border(
+                BorderStroke(
+                    width = 2.dp,
+                    color = colorScheme.surface
+                ),
+                shape = RoundedCornerShape(2.dp)
+            )
+        ),
+        shape = ClickableSurfaceDefaults.shape(
+            shape = RoundedCornerShape(2.dp),
+            focusedShape = RoundedCornerShape(2.dp)
+        ),
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        content()
+    }
+}
+
+@Preview
+@Composable
+private fun BorderedFocusableItemPrev() {
+    TransparentBorderedFocusableItem(onClick = {}) {
+        Text(text = "Preview Text")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/song.png b/app/src/main/res/drawable/song.png
new file mode 100644
index 0000000..1d44259
Binary files /dev/null and b/app/src/main/res/drawable/song.png differ