From 33f84775d5ef110361f9ced58c61ffcfb36050e7 Mon Sep 17 00:00:00 2001
From: Dat Trxng <datkroos2709@gmail.com>
Date: Wed, 27 Nov 2024 15:46:51 +0700
Subject: [PATCH 1/3] update ArtistScreen

---
 .idea/misc.xml                                |  1 -
 .../harmonyhub/ui/library/ArtistScreen.kt     | 20 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.idea/misc.xml b/.idea/misc.xml
index 0ad17cb..8978d23 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
diff --git a/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
index 9678296..b41c6be 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
@@ -26,6 +26,7 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
 
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
@@ -54,6 +55,20 @@ fun ArtistScreen(
                     .fillMaxWidth()
                     .height(240.dp)
             )
+
+            // Gradient Overlay
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(240.dp)
+                    .background(
+                        Brush.verticalGradient(
+                            colors = listOf(Color.Transparent, Color.Black),
+                            startY = 0f
+                        )
+                    )
+            )
+
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -89,7 +104,7 @@ fun ArtistScreen(
                 fontSize = 18.sp
             )
             Row {
-                IconButton(onClick = { /* Share Action */ }) {
+                IconButton(onClick = { /* Favourite Action */ }) {
                     Icon(
                         painter = painterResource(id = R.drawable.icons8_heart_90),
                         contentDescription = "Share",
@@ -108,7 +123,6 @@ fun ArtistScreen(
             }
         }
 
-
         Spacer(modifier = Modifier.height(24.dp))
 
         if (songs.isNotEmpty()) {
@@ -182,6 +196,6 @@ fun PopularReleaseItem(song: Song, onClick: () -> Unit) {
 @Composable
 fun ArtistScreenPreview() {
     ArtistScreen(
-        artist = "The Chainsmokers, Charlee",
+        artist = "The Chainsmokers",
     )
 }

From d41566fb2dc614bed9e3789d0db2b695edee56eb Mon Sep 17 00:00:00 2001
From: Dat Trxng <datkroos2709@gmail.com>
Date: Wed, 27 Nov 2024 16:01:36 +0700
Subject: [PATCH 2/3] Merge branch 'frontend' of
 https://github.com/nalgnaohel/HKI2425_MobDev20_Nhom7

# Conflicts:
#	app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
---
 .idea/androidTestResultsUserPreferences.xml   | 139 ++++++++++
 .idea/inspectionProfiles/Project_Default.xml  |   4 +
 .idea/misc.xml                                |   2 +-
 app/build.gradle.kts                          |   1 +
 .../components_test/NavigationDrawerTest.kt   |  53 ++++
 .../harmonyhub/home_test/HomeScreenTest.kt    |  85 ++++++
 .../com/example/harmonyhub/HarmonyHubApp.kt   |  55 +++-
 .../data/repository/UserDataRepoImpl.kt       |  73 +++++
 .../com/example/harmonyhub/di/AppModule.kt    |  23 ++
 .../domain/repository/UserDataRepo.kt         |   9 +
 .../viewmodel/AuthenticationViewModel.kt      |  34 ++-
 .../viewmodel/UserDataViewModel.kt            |  32 +++
 .../ForgotPasswordScreen.kt                   |  83 +++---
 .../ui/{login => account}/LoginScreen.kt      |   8 +-
 .../{login => account}/NewPasswordScreen.kt   |   2 +-
 .../ui/{login => account}/RegisterScreen.kt   | 113 +++++---
 .../{login => account}/VerificationScreen.kt  |   2 +-
 .../harmonyhub/ui/components/ArtistCard.kt    |   1 +
 .../harmonyhub/ui/components/ChartCard.kt     |  40 +++
 .../harmonyhub/ui/components/GenreCard.kt     |  53 ++++
 .../ui/components/NavigationDrawer.kt         |  10 +-
 .../harmonyhub/ui/components/PlaylistCard.kt  |  10 +-
 .../harmonyhub/ui/components/SongCard.kt      |   1 +
 .../ui/components/SuggestionCard.kt           |  72 +++++
 .../example/harmonyhub/ui/home/HomeScreen.kt  | 142 ++--------
 .../harmonyhub/ui/library/ArtistScreen.kt     | 105 +++-----
 .../harmonyhub/ui/library/LibraryScreen.kt    | 253 ++++++++++--------
 .../harmonyhub/ui/library/PlaylistSongList.kt |  19 ++
 .../harmonyhub/ui/library/PlaylistsScreen.kt  | 139 +++++++++-
 .../example/harmonyhub/ui/play/PlayScreen.kt  |   5 +-
 .../harmonyhub/ui/profile/ProfileScreen.kt    | 124 ++-------
 .../harmonyhub/ui/settings/SettingsScreen.kt  |  72 ++++-
 app/src/main/res/values/strings.xml           |   1 +
 gradle/libs.versions.toml                     |   2 +
 34 files changed, 1241 insertions(+), 526 deletions(-)
 create mode 100644 .idea/androidTestResultsUserPreferences.xml
 create mode 100644 app/src/androidTest/java/com/example/harmonyhub/components_test/NavigationDrawerTest.kt
 create mode 100644 app/src/androidTest/java/com/example/harmonyhub/home_test/HomeScreenTest.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/data/repository/UserDataRepoImpl.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/domain/repository/UserDataRepo.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/presentation/viewmodel/UserDataViewModel.kt
 rename app/src/main/java/com/example/harmonyhub/ui/{login => account}/ForgotPasswordScreen.kt (80%)
 rename app/src/main/java/com/example/harmonyhub/ui/{login => account}/LoginScreen.kt (97%)
 rename app/src/main/java/com/example/harmonyhub/ui/{login => account}/NewPasswordScreen.kt (99%)
 rename app/src/main/java/com/example/harmonyhub/ui/{login => account}/RegisterScreen.kt (75%)
 rename app/src/main/java/com/example/harmonyhub/ui/{login => account}/VerificationScreen.kt (99%)
 create mode 100644 app/src/main/java/com/example/harmonyhub/ui/components/ChartCard.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/ui/components/GenreCard.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/ui/components/SuggestionCard.kt
 create mode 100644 app/src/main/java/com/example/harmonyhub/ui/library/PlaylistSongList.kt

diff --git a/.idea/androidTestResultsUserPreferences.xml b/.idea/androidTestResultsUserPreferences.xml
new file mode 100644
index 0000000..90fe323
--- /dev/null
+++ b/.idea/androidTestResultsUserPreferences.xml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AndroidTestResultsUserPreferences">
+    <option name="androidTestResultsTableState">
+      <map>
+        <entry key="-1967603923">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="-1754872480">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="-1612655442">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="-722498539">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="-563854136">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="360461384">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="371556238">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="763096697">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="1210363151">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+        <entry key="1708940667">
+          <value>
+            <AndroidTestResultsTableState>
+              <option name="preferredColumnWidths">
+                <map>
+                  <entry key="Duration" value="90" />
+                  <entry key="Pixel_8_API_35" value="120" />
+                  <entry key="Tests" value="360" />
+                </map>
+              </option>
+            </AndroidTestResultsTableState>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 6806f5a..cde3e19 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -37,6 +37,10 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 8978d23..b2c751a 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,6 +1,6 @@
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 0ac0909..fe41b4c 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -70,6 +70,7 @@ dependencies {
     implementation(libs.androidx.navigation.runtime.ktx)
     implementation(libs.firebase.auth)
     implementation(libs.firebase.auth.ktx)
+    implementation(libs.firebase.firestore)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
diff --git a/app/src/androidTest/java/com/example/harmonyhub/components_test/NavigationDrawerTest.kt b/app/src/androidTest/java/com/example/harmonyhub/components_test/NavigationDrawerTest.kt
new file mode 100644
index 0000000..3e26874
--- /dev/null
+++ b/app/src/androidTest/java/com/example/harmonyhub/components_test/NavigationDrawerTest.kt
@@ -0,0 +1,53 @@
+package com.example.harmonyhub.components_test
+
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import com.example.harmonyhub.ui.components.AppScaffoldWithDrawer
+import org.junit.Rule
+import org.junit.Test
+
+class NavigationDrawerTest {
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun testDrawerBehavior() {
+        var profileClicked = false
+        var settingsClicked = false
+        var logoutClicked = false
+
+        composeTestRule.setContent {
+            AppScaffoldWithDrawer(
+                onProfileClicked = { profileClicked = true },
+                onSettingsClicked = { settingsClicked = true },
+                onLogoutClicked = { logoutClicked = true },
+                content = { onOpenDrawer ->
+                    TextButton(onClick = onOpenDrawer) {
+                        Text("Mở Drawer")
+                    }
+                }
+            )
+        }
+
+        // Kiểm tra Drawer mở khi nhấn "Mở Drawer"
+        composeTestRule.onNodeWithText("Mở Drawer").performClick()
+        composeTestRule.onNodeWithText("Hồ sơ").assertIsDisplayed()
+
+        // Kiểm tra callback khi nhấn "Hồ sơ"
+        composeTestRule.onNodeWithText("Hồ sơ").performClick()
+        assert(profileClicked)
+
+        // Kiểm tra callback khi nhấn "Cài đặt"
+        composeTestRule.onNodeWithText("Cài đặt").performClick()
+        assert(settingsClicked)
+
+        // Kiểm tra callback khi nhấn "Đăng xuất"
+        composeTestRule.onNodeWithText("Đăng xuất").performClick()
+        assert(logoutClicked)
+    }
+}
+
diff --git a/app/src/androidTest/java/com/example/harmonyhub/home_test/HomeScreenTest.kt b/app/src/androidTest/java/com/example/harmonyhub/home_test/HomeScreenTest.kt
new file mode 100644
index 0000000..f374243
--- /dev/null
+++ b/app/src/androidTest/java/com/example/harmonyhub/home_test/HomeScreenTest.kt
@@ -0,0 +1,85 @@
+package com.example.harmonyhub.home_test
+
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.assertTextEquals
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import com.example.harmonyhub.ui.home.HomeScreen
+import junit.framework.TestCase.assertTrue
+import org.junit.Rule
+import org.junit.Test
+
+class HomeScreenTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun homeScreen() {
+        composeTestRule.setContent {
+            HomeScreen(
+                onSearchButtonClicked = {},
+                onPlayButtonClicked = {},
+                onLibraryButtonClicked = {},
+                onProfileButtonClicked = {},
+                onLogoutButtonClicked = {},
+                onSettingsButtonClicked = {}
+            )
+        }
+
+        composeTestRule.onNodeWithContentDescription("Avatar").assertIsDisplayed()
+        composeTestRule.onNodeWithTag("Username").assertIsDisplayed()
+//        composeTestRule.onNodeWithTag("Username").assertTextEquals("Thomas")
+
+        composeTestRule.onNodeWithTag("DrawerButton").assertIsDisplayed()
+        composeTestRule.onNodeWithTag("DrawerButton").performClick()
+
+        composeTestRule.onNodeWithContentDescription("Settings Icon").assertIsDisplayed()
+        composeTestRule.onNodeWithContentDescription("Settings Icon").performClick()
+
+    }
+
+
+    @Test
+    fun homeScreen_genreCards() {
+        composeTestRule.setContent {
+            HomeScreen(
+                onSearchButtonClicked = {},
+                onPlayButtonClicked = {},
+                onLibraryButtonClicked = {},
+                onProfileButtonClicked = {},
+                onLogoutButtonClicked = {},
+                onSettingsButtonClicked = {}
+            )
+        }
+
+        composeTestRule.onNodeWithText("Thể loại").assertIsDisplayed()
+
+        // Check if genre cards are displayed
+    }
+
+    @Test
+    fun homeScreen_drawerOpensWhenProfileClicked() {
+
+        composeTestRule.setContent {
+            HomeScreen(
+                onSearchButtonClicked = {},
+                onPlayButtonClicked = {},
+                onLibraryButtonClicked = {},
+                onProfileButtonClicked = { },
+                onLogoutButtonClicked = { },
+                onSettingsButtonClicked = { }
+            )
+        }
+
+        composeTestRule.onNodeWithTag("DrawerButton").assertExists()
+
+        composeTestRule.onNodeWithTag("DrawerButton").performClick()
+
+    }
+
+}
+
diff --git a/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt b/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
index ba4b369..d2aaa4a 100644
--- a/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
+++ b/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
@@ -44,14 +44,16 @@ import com.example.harmonyhub.ui.library.FavoriteScreen
 import com.example.harmonyhub.ui.library.HistoryScreen
 import com.example.harmonyhub.ui.library.LibraryScreen
 import com.example.harmonyhub.ui.library.PlaylistsScreen
-import com.example.harmonyhub.ui.login.ForgotPasswordScreen
-import com.example.harmonyhub.ui.login.LoginScreen
-import com.example.harmonyhub.ui.login.NewPasswordScreen
-import com.example.harmonyhub.ui.login.RegisterScreen
-import com.example.harmonyhub.ui.login.VerificationScreen
+import com.example.harmonyhub.ui.account.ForgotPasswordScreen
+import com.example.harmonyhub.ui.account.LoginScreen
+import com.example.harmonyhub.ui.account.NewPasswordScreen
+import com.example.harmonyhub.ui.account.RegisterScreen
+import com.example.harmonyhub.ui.account.VerificationScreen
+import com.example.harmonyhub.ui.library.PlaylistSongListScreen
 import com.example.harmonyhub.ui.play.PlayScreen
 import com.example.harmonyhub.ui.profile.ProfileScreen
 import com.example.harmonyhub.ui.search.SearchScreen
+import com.example.harmonyhub.ui.settings.SettingsScreen
 
 enum class HarmonyHubScreen(@StringRes val title: Int, val icon: ImageVector) {
     Login(title = R.string.login, icon = Icons.Filled.AccountBox),
@@ -62,10 +64,7 @@ enum class HarmonyHubScreen(@StringRes val title: Int, val icon: ImageVector) {
     Library(title = R.string.library, icon = Icons.Filled.AccountBox),
     Settings(title = R.string.settings, icon = Icons.Filled.Settings),
     Profile(title = R.string.profile, icon = Icons.Filled.AccountBox),
-    History(
-        title = R.string.history,
-        icon = Icons.Default.Refresh
-    ),
+    History(title = R.string.history, icon = Icons.Default.Refresh),
     Favorite(title = R.string.favorite, icon = Icons.Default.Favorite),
     Download(title = R.string.download, icon = Icons.Default.KeyboardArrowDown),
     Playlist(title = R.string.playlist, icon = Icons.Default.AccountBox),
@@ -73,8 +72,7 @@ enum class HarmonyHubScreen(@StringRes val title: Int, val icon: ImageVector) {
     ForgotPassword(title = R.string.forgotPassword, icon = Icons.Default.Info),
     Verification(title = R.string.verification, icon = Icons.Default.Info),
     NewPassword(title = R.string.newPassword, icon = Icons.Default.Lock),
-
-
+    PlaylistSongList(title = R.string.playlistSongList, icon = Icons.Default.AccountBox),
 }
 
 private val gradientBackground = Brush.verticalGradient(
@@ -104,7 +102,9 @@ fun HarmonyHubApp(
                     HarmonyHubScreen.ForgotPassword,
                     HarmonyHubScreen.Verification,
                     HarmonyHubScreen.NewPassword,
-                    HarmonyHubScreen.Profile
+                    HarmonyHubScreen.Profile,
+                    HarmonyHubScreen.Settings,
+                    HarmonyHubScreen.Play
                 )
             ) {
                 BottomNavigationBar(navController = navController)
@@ -179,6 +179,9 @@ fun HarmonyHubApp(
                         onLogoutButtonClicked = {
                             authenticationMainViewModel.signOut()
                             navController.navigate(HarmonyHubScreen.Login.name)
+                        },
+                        onSettingsButtonClicked = {
+                            navController.navigate(HarmonyHubScreen.Settings.name)
                         }
                     )
                 }
@@ -215,8 +218,16 @@ fun HarmonyHubApp(
                         },
                         onPlaySongClicked = {
                             navController.navigate(HarmonyHubScreen.Play.name)
+                        },
+                        onLogoutButtonClicked = {
+                            authenticationMainViewModel.signOut()
+                            navController.navigate(HarmonyHubScreen.Login.name)
+                        },
+                        onSettingsButtonClicked = {
+                            navController.navigate(HarmonyHubScreen.Settings.name)
                         }
 
+
                     )
                 }
                 composable(route = HarmonyHubScreen.Profile.name) {
@@ -245,7 +256,12 @@ fun HarmonyHubApp(
                 }
                 composable(route = HarmonyHubScreen.Playlist.name) {
                     PlaylistsScreen(
-                        onBackButtonClicked = { navController.popBackStack() }
+                        onBackButtonClicked = { navController.popBackStack() },
+                        onAddNewPlaylistClicked = {
+                        },
+                        onPlaylistClicked = {
+                            navController.navigate(HarmonyHubScreen.PlaylistSongList.name)
+                        },
                     )
                 }
                 composable(route = HarmonyHubScreen.ArtistsFollowing.name) {
@@ -258,7 +274,7 @@ fun HarmonyHubApp(
                     ForgotPasswordScreen(
                         onBackButtonClicked = { navController.popBackStack() },
                         onVerifyButtonClicked = {
-                            navController.navigate(HarmonyHubScreen.Verification.name)
+                            navController.navigate(HarmonyHubScreen.Login.name)
                         },
                         onRegisterButtonClicked = {
                             navController.navigate(HarmonyHubScreen.Register.name)
@@ -281,6 +297,17 @@ fun HarmonyHubApp(
                         }
                     )
                 }
+                composable(route = HarmonyHubScreen.Settings.name) {
+                    SettingsScreen(
+                        onBackButtonClicked = { navController.popBackStack() }
+                    )
+                }
+                composable(route = HarmonyHubScreen.PlaylistSongList.name){
+                    PlaylistSongListScreen(
+                        playlistName = "Playlist 1",
+                        onBackButtonClicked = { navController.popBackStack() }
+                    )
+                }
 
 
             }
diff --git a/app/src/main/java/com/example/harmonyhub/data/repository/UserDataRepoImpl.kt b/app/src/main/java/com/example/harmonyhub/data/repository/UserDataRepoImpl.kt
new file mode 100644
index 0000000..1d18fd0
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/data/repository/UserDataRepoImpl.kt
@@ -0,0 +1,73 @@
+package com.example.harmonyhub.data.repository
+
+import android.content.ContentValues.TAG
+import android.util.Log
+import com.example.harmonyhub.domain.repository.UserDataRepo
+import com.google.firebase.auth.FirebaseAuth
+import com.google.firebase.firestore.DocumentReference
+import com.google.firebase.firestore.FirebaseFirestore
+import javax.inject.Inject
+
+class UserDataRepoImpl @Inject constructor(
+    private val firestore: FirebaseFirestore,
+    private val auth: FirebaseAuth
+): UserDataRepo {
+
+    fun getUserDataRef(userId: String?): DocumentReference {
+        val userRef = firestore.collection("users").document(userId.toString())
+        return userRef
+    }
+
+    override fun getUserInfor(callback: (String?, String?) -> Unit) {
+        val userId = auth.currentUser?.uid
+        val userRef = getUserDataRef(userId)
+
+        userRef.get()
+            .addOnSuccessListener { document ->
+                if (document != null && document.exists()) {
+
+                    val username = document.getString("userName")
+                    val email = document.getString("email")
+
+                    Log.d("OwO", "DocumentSnapshot data: ${username}")
+                    callback(username, email)
+                } else {
+                    Log.d("OwO", "No such document")
+                    callback(null, null)
+                }
+            }
+            .addOnFailureListener { exception ->
+                Log.d(TAG, "get failed with ", exception)
+                callback(null, null)
+            }
+    }
+
+    override fun setUserInfor(userName: String, email: String, userId: String?) {
+        val userMap = hashMapOf(
+            "userName" to userName,
+            "email" to email
+        )
+
+        val userRef = getUserDataRef(userId)
+
+        userRef.set(userMap)
+            .addOnSuccessListener() {
+                 Log.d(TAG, "DocumentSnapshot successfully written!")
+            }
+            .addOnFailureListener { e ->
+                Log.w(TAG, "Error writing document", e)
+            }
+    }
+
+    override fun getAlbums() {
+        // TODO("Not yet implemented")
+    }
+
+    override fun getSongs() {
+        // TODO("Not yet implemented")
+    }
+
+    override fun getSong() {
+        // TODO("Not yet implemented")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/di/AppModule.kt b/app/src/main/java/com/example/harmonyhub/di/AppModule.kt
index 4d26de9..e4191b3 100644
--- a/app/src/main/java/com/example/harmonyhub/di/AppModule.kt
+++ b/app/src/main/java/com/example/harmonyhub/di/AppModule.kt
@@ -1,6 +1,11 @@
 package com.example.harmonyhub.di
 
+import com.example.harmonyhub.data.repository.UserDataRepoImpl
+import com.example.harmonyhub.domain.repository.UserDataRepo
+import com.google.firebase.Firebase
 import com.google.firebase.auth.FirebaseAuth
+import com.google.firebase.firestore.FirebaseFirestore
+import com.google.firebase.firestore.firestore
 import dagger.Module
 import dagger.Provides
 import dagger.hilt.InstallIn
@@ -20,4 +25,22 @@ object AppModule {
     fun provideFirebaseAuth(): FirebaseAuth {
         return FirebaseAuth.getInstance()
     }
+
+    @Provides
+    @Singleton
+    fun provideFirestore(): FirebaseFirestore {
+        return Firebase.firestore
+    }
+
+    @Provides
+    @Singleton
+    fun provideUserDataRepo(
+        firestore: FirebaseFirestore,
+        auth: FirebaseAuth
+    ): UserDataRepo {
+        return UserDataRepoImpl(
+            firestore,
+            auth
+        )
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/domain/repository/UserDataRepo.kt b/app/src/main/java/com/example/harmonyhub/domain/repository/UserDataRepo.kt
new file mode 100644
index 0000000..8bba946
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/domain/repository/UserDataRepo.kt
@@ -0,0 +1,9 @@
+package com.example.harmonyhub.domain.repository
+
+interface UserDataRepo {
+    fun getUserInfor(callback: (String?, String?) -> Unit)
+    fun setUserInfor(userName: String, email: String, userId: String?)
+    fun getAlbums()
+    fun getSongs()
+    fun getSong()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/AuthenticationViewModel.kt b/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/AuthenticationViewModel.kt
index 68d6412..e96b219 100644
--- a/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/AuthenticationViewModel.kt
+++ b/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/AuthenticationViewModel.kt
@@ -3,13 +3,15 @@ package com.example.harmonyhub.presentation.viewmodel
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModel
+import com.example.harmonyhub.domain.repository.UserDataRepo
 import com.google.firebase.auth.FirebaseAuth
 import dagger.hilt.android.lifecycle.HiltViewModel
 import javax.inject.Inject
 
 @HiltViewModel
 class AuthenticationViewModel @Inject constructor(
-    private val auth: FirebaseAuth
+    private val auth: FirebaseAuth,
+    private val userRepo: UserDataRepo,
 ) : ViewModel() {
 
     private val _authState = MutableLiveData<AuthState>()
@@ -39,16 +41,23 @@ class AuthenticationViewModel @Inject constructor(
         auth.signInWithEmailAndPassword(email, password)
             .addOnCompleteListener { task ->
                 if (task.isSuccessful) {
-                    _authState.value = AuthState.Authenticated
+                    val user = auth.currentUser
+                    if (user?.isEmailVerified == true && user != null) {
+                        _authState.value = AuthState.Authenticated
+                    } else {
+                        auth.signOut()
+                        _authState.value = AuthState.Error("Email not verified. Please check your email verification link.")
+                    }
                 } else {
+
                     _authState.value = AuthState.Error(task.exception?.message ?: "An unknown error occurred")
                 }
             }
     }
 
-    fun signup(email: String, password: String) {
-        if (email.isEmpty() || password.isEmpty()) {
-            _authState.value = AuthState.Error("Email and password must not be empty")
+    fun signup(email: String, password: String, username: String) {
+        if (email.isEmpty() || password.isEmpty() || username.isEmpty()) {
+            _authState.value = AuthState.Error("Email, password ans username must not be empty")
             return
         }
 
@@ -57,8 +66,17 @@ class AuthenticationViewModel @Inject constructor(
         auth.createUserWithEmailAndPassword(email, password)
             .addOnCompleteListener { task ->
                 if (task.isSuccessful) {
+                    val user = auth.currentUser
+                    user?.sendEmailVerification()
+                        ?.addOnCompleteListener { task ->
+                            if (task.isSuccessful) {
+                                _authState.value = AuthState.EmailNotVerified
+                                userRepo.setUserInfor(username, email, user.uid)
+                            } else {
+                                _authState.value = AuthState.Error(task.exception?.message ?: "Failed to send verification email")
+                            }
+                        }
                     auth.signOut()
-                    _authState.value = AuthState.SuccessfullyRegistered
                 } else {
                     _authState.value = AuthState.Error(task.exception?.message ?: "An unknown error occurred")
                 }
@@ -81,7 +99,7 @@ class AuthenticationViewModel @Inject constructor(
         auth.sendPasswordResetEmail(email)
             .addOnCompleteListener { task ->
                 if (task.isSuccessful) {
-                    _authState.value = AuthState.SuccessfullyRegistered
+                    _authState.value = AuthState.Unauthenticated
                 } else {
                     _authState.value = AuthState.Error(task.exception?.message ?: "An unknown error occurred")
                 }
@@ -90,9 +108,9 @@ class AuthenticationViewModel @Inject constructor(
 }
 
 sealed class AuthState {
+    object EmailNotVerified : AuthState()
     object Unauthenticated : AuthState()
     object Authenticated : AuthState()
     object Loading : AuthState()
-    object SuccessfullyRegistered : AuthState()
     data class Error(val message: String) : AuthState()
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/UserDataViewModel.kt b/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/UserDataViewModel.kt
new file mode 100644
index 0000000..cbbe14b
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/presentation/viewmodel/UserDataViewModel.kt
@@ -0,0 +1,32 @@
+package com.example.harmonyhub.presentation.viewmodel
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.ViewModel
+import com.example.harmonyhub.domain.repository.UserDataRepo
+import dagger.hilt.android.lifecycle.HiltViewModel
+import javax.inject.Inject
+
+@HiltViewModel
+class UserDataViewModel @Inject constructor(
+    private val userRepo: UserDataRepo,
+) : ViewModel() {
+
+    private val _userName = MutableLiveData<String?>()
+    val userName: LiveData<String?> get() = _userName
+
+    private val _email = MutableLiveData<String?>()
+    val email: LiveData<String?> get() = _email
+
+    init {
+        getUserInfor()
+    }
+
+    fun getUserInfor() {
+        userRepo.getUserInfor { userName, email ->
+            _userName.value = userName
+            _email.value = email
+        }
+    }
+}
+
diff --git a/app/src/main/java/com/example/harmonyhub/ui/login/ForgotPasswordScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/account/ForgotPasswordScreen.kt
similarity index 80%
rename from app/src/main/java/com/example/harmonyhub/ui/login/ForgotPasswordScreen.kt
rename to app/src/main/java/com/example/harmonyhub/ui/account/ForgotPasswordScreen.kt
index 9b88394..c45606c 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/login/ForgotPasswordScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/account/ForgotPasswordScreen.kt
@@ -1,4 +1,4 @@
-package com.example.harmonyhub.ui.login
+package com.example.harmonyhub.ui.account
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
@@ -25,6 +26,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -36,7 +38,6 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalFocusManager
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -45,7 +46,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.example.harmonyhub.R
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.harmonyhub.presentation.viewmodel.AuthenticationViewModel
 import com.example.harmonyhub.ui.theme.NotoSans
 
 private val gradientBackground = Brush.verticalGradient(
@@ -56,22 +58,19 @@ private val gradientBackground = Brush.verticalGradient(
 fun ForgotPasswordScreen(
     onBackButtonClicked: () -> Unit,
     onVerifyButtonClicked: () -> Unit,
-    onRegisterButtonClicked: () -> Unit
+    onRegisterButtonClicked: () -> Unit,
+    authenticationViewModel: AuthenticationViewModel = hiltViewModel()
 ) {
     var email by remember { mutableStateOf("") }
     var isValidEmail by remember { mutableStateOf(true) }
-    var errorMessage by remember { mutableStateOf("") }
+    var showDialog by remember { mutableStateOf(false) }
     val focusManager = LocalFocusManager.current
 
     Column(
         modifier = Modifier
             .fillMaxSize()
             .padding(8.dp)
-            .pointerInput(Unit) {
-                detectTapGestures(onTap = {
-                    focusManager.clearFocus()
-                })
-            },
+            .clickable { focusManager.clearFocus() },
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Spacer(modifier = Modifier.height(16.dp))
@@ -122,8 +121,11 @@ fun ForgotPasswordScreen(
             onValueChange = {
                 email = it
                 isValidEmail = isValidEmail(email)
-                errorMessage = "" // Xóa thông báo lỗi khi người dùng nhập email
             },
+            textStyle = TextStyle(
+                fontFamily = NotoSans,
+                fontSize = 16.sp
+            ),
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(horizontal = 24.dp),
@@ -141,37 +143,14 @@ fun ForgotPasswordScreen(
                 imeAction = ImeAction.Done
             )
         )
-        if (!isValidEmail || errorMessage.isNotEmpty()) {
-            Spacer(modifier = Modifier.height(8.dp))
-            Text(
-                text = errorMessage.ifEmpty { "Định dạng email không hợp lệ" },
-                color = Color.Red,
-                fontFamily = NotoSans,
-                fontSize = 16.sp,
-                modifier = Modifier
-                    .padding(horizontal = 24.dp)
-                    .align(Alignment.Start)
-            )
-        }
 
         Spacer(modifier = Modifier.height(50.dp))
 
         Button(
             onClick = {
-                when {
-                    email.isEmpty() -> {
-                        errorMessage = "Vui lòng nhập đầy đủ thông tin"
-                        isValidEmail = false
-                    }
-
-                    !isValidEmail -> {
-                        errorMessage = "Định dạng email không hợp lệ"
-                    }
-
-                    else -> {
-                        errorMessage = ""
-                        onVerifyButtonClicked()
-                    }
+                if (isValidEmail(email)) {
+                    authenticationViewModel.resetPassword(email)
+                    showDialog = true
                 }
             },
             colors = ButtonDefaults.buttonColors(
@@ -211,6 +190,36 @@ fun ForgotPasswordScreen(
             )
         }
     }
+
+    if (showDialog) {
+        AlertDialog(
+            onDismissRequest = { showDialog = false },
+            title = {
+                Text("Thông báo", fontWeight = FontWeight.Bold, fontFamily = NotoSans)
+            },
+            text = {
+                Text(
+                    "Kiểm tra Gmail của bạn để đặt lại mật khẩu.",
+                    fontFamily = NotoSans,
+                    fontSize = 16.sp
+                )
+            },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        showDialog = false
+                        onVerifyButtonClicked() // Chuyển hướng đến trang đăng nhập
+                    }
+                ) {
+                    Text("OK",
+                        fontFamily = NotoSans,
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.Bold,
+                        color = Color(0xFF00FAF2))
+                }
+            }
+        )
+    }
 }
 
 // Hàm kiểm tra định dạng email
diff --git a/app/src/main/java/com/example/harmonyhub/ui/login/LoginScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/account/LoginScreen.kt
similarity index 97%
rename from app/src/main/java/com/example/harmonyhub/ui/login/LoginScreen.kt
rename to app/src/main/java/com/example/harmonyhub/ui/account/LoginScreen.kt
index 068aee3..4f94060 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/login/LoginScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/account/LoginScreen.kt
@@ -1,4 +1,4 @@
-package com.example.harmonyhub.ui.login
+package com.example.harmonyhub.ui.account
 
 import android.widget.Toast
 import androidx.compose.foundation.Image
@@ -104,7 +104,7 @@ fun LoginScreen(
         OutlinedTextField(
             value = email,
             onValueChange = { email = it },
-            textStyle = TextStyle(fontFamily = NotoSans),
+            textStyle = TextStyle(fontFamily = NotoSans, fontSize = 16.sp),
             modifier = Modifier.fillMaxWidth(),
             placeholder = { Text("Account", color = Color.Gray, fontFamily = NotoSans) },
             leadingIcon = {
@@ -133,7 +133,7 @@ fun LoginScreen(
         OutlinedTextField(
             value = password,
             onValueChange = { password = it },
-            textStyle = TextStyle(fontFamily = NotoSans),
+            textStyle = TextStyle(fontFamily = NotoSans, fontSize = 16.sp),
             modifier = Modifier.fillMaxWidth(),
             placeholder = { Text("Password", color = Color.Gray, fontFamily = NotoSans) },
             leadingIcon = {
@@ -227,7 +227,7 @@ fun LoginScreen(
             color = Color(0xFF00FAF2),
             modifier = Modifier
                 .align(Alignment.CenterHorizontally)
-                .clickable { /* TODO: Handle forgot password */ },
+                .clickable { onForgotPasswordButtonClicked() },
         )
 
         Spacer(modifier = Modifier.height(8.dp))
diff --git a/app/src/main/java/com/example/harmonyhub/ui/login/NewPasswordScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/account/NewPasswordScreen.kt
similarity index 99%
rename from app/src/main/java/com/example/harmonyhub/ui/login/NewPasswordScreen.kt
rename to app/src/main/java/com/example/harmonyhub/ui/account/NewPasswordScreen.kt
index e3cb31a..96105f9 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/login/NewPasswordScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/account/NewPasswordScreen.kt
@@ -1,4 +1,4 @@
-package com.example.harmonyhub.ui.login
+package com.example.harmonyhub.ui.account
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
diff --git a/app/src/main/java/com/example/harmonyhub/ui/login/RegisterScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/account/RegisterScreen.kt
similarity index 75%
rename from app/src/main/java/com/example/harmonyhub/ui/login/RegisterScreen.kt
rename to app/src/main/java/com/example/harmonyhub/ui/account/RegisterScreen.kt
index e951dee..ff85bb6 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/login/RegisterScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/account/RegisterScreen.kt
@@ -1,4 +1,4 @@
-package com.example.harmonyhub.ui.login
+package com.example.harmonyhub.ui.account
 
 import android.widget.Toast
 import androidx.compose.foundation.Image
@@ -19,7 +19,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -54,6 +56,10 @@ fun RegisterScreen(
         mutableStateOf("")
     }
 
+    var username by remember {
+        mutableStateOf("")
+    }
+
     var isPasswordVisible by remember { mutableStateOf(false) }
 
     var confirmPassword by remember {
@@ -61,28 +67,70 @@ fun RegisterScreen(
     }
     var isConfirmPasswordVisible by remember { mutableStateOf(false) }
 
+    var showVerificationDialog by remember { mutableStateOf(false) }
+
     val authState = authenticationViewModel.authState.observeAsState()
+    val focusManager = LocalFocusManager.current
     val context = LocalContext.current
 
     LaunchedEffect(authState.value) {
         when (authState.value) {
-            is AuthState.SuccessfullyRegistered -> {
-                onRegisterButtonClicked()
+            is AuthState.EmailNotVerified -> {
+                showVerificationDialog = true
             }
+
             is AuthState.Error -> {
                 val errorMessage = (authState.value as AuthState.Error).message
-                // Show error message to the user
+                // Show error message to the
                 // For example, you can use a Toast or a Snackbar
                 Toast.makeText(context, errorMessage, Toast.LENGTH_SHORT).show()
             }
+
             else -> {}
         }
     }
-    
+
+    if (showVerificationDialog) {
+        AlertDialog(
+            onDismissRequest = { showVerificationDialog = false },
+            title = {
+                Text(
+                    "Xác thực tài khoản",
+                    fontFamily = NotoSans,
+                    fontWeight = FontWeight.Bold
+                )
+            },
+            text = {
+                Text(
+                    "Xác thực Gmail của bạn trước khi đăng nhập.",
+                    fontFamily = NotoSans,
+                    fontSize = 16.sp
+                )
+            },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        showVerificationDialog = false
+                        onRegisterButtonClicked() // Điều hướng tới trang đăng nhập
+                    }
+                ) {
+                    Text(
+                        "OK",
+                        fontFamily = NotoSans,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 16.sp,
+                        color = Color(0xFF00FAF2)
+                    )
+                }
+            }
+        )
+    }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(horizontal = 24.dp),
+            .padding(horizontal = 24.dp)
+            .clickable { focusManager.clearFocus() },
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Spacer(modifier = Modifier.height(80.dp))
@@ -111,7 +159,8 @@ fun RegisterScreen(
         // Email Input Field
         OutlinedTextField(
             value = email,
-            onValueChange = {email = it},
+            textStyle = TextStyle(fontFamily = NotoSans, fontSize = 16.sp),
+            onValueChange = { email = it },
             modifier = Modifier.fillMaxWidth(),
             placeholder = { Text("Email ID", color = Color.Gray, fontFamily = NotoSans) },
             colors = OutlinedTextFieldDefaults.colors(
@@ -130,32 +179,33 @@ fun RegisterScreen(
 
         Spacer(modifier = Modifier.height(16.dp))
 
-        // Mobile Number Input Field
-//        OutlinedTextField(
-//            value = "",
-//            onValueChange = {},
-//            modifier = Modifier.fillMaxWidth(),
-//            placeholder = { Text("Mobile Number", color = Color.Gray) },
-//            colors = OutlinedTextFieldDefaults.colors(
-//                focusedBorderColor = Color(0xFF00FAF2),
-//                unfocusedBorderColor = Color.Gray,
-//                focusedTextColor = Color.White,
-//                unfocusedTextColor = Color.White,
-//                cursorColor = Color.White
-//            ),
-//            singleLine = true,
-//            keyboardOptions = KeyboardOptions(
-//                imeAction = ImeAction.Next,
-//                keyboardType = KeyboardType.Phone
-//            )
-//        )
-//
-//        Spacer(modifier = Modifier.height(16.dp))
+        // Username input field
+        OutlinedTextField(
+            value = username,
+            onValueChange = { username = it },
+            modifier = Modifier.fillMaxWidth(),
+            placeholder = { Text("Username", color = Color.Gray) },
+            colors = OutlinedTextFieldDefaults.colors(
+                focusedBorderColor = Color(0xFF00FAF2),
+                unfocusedBorderColor = Color.Gray,
+                focusedTextColor = Color.White,
+                unfocusedTextColor = Color.White,
+                cursorColor = Color.White
+            ),
+            singleLine = true,
+            keyboardOptions = KeyboardOptions(
+                imeAction = ImeAction.Next,
+                keyboardType = KeyboardType.Text
+            )
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
 
         // Password Input Field
         OutlinedTextField(
             value = password,
-            onValueChange = {password = it},
+            textStyle = TextStyle(fontFamily = NotoSans, fontSize = 16.sp),
+            onValueChange = { password = it },
             modifier = Modifier.fillMaxWidth(),
             placeholder = { Text("Password", color = Color.Gray, fontFamily = NotoSans) },
             trailingIcon = {
@@ -187,7 +237,8 @@ fun RegisterScreen(
         // Confirm Password Input Field
         OutlinedTextField(
             value = confirmPassword,
-            onValueChange = {confirmPassword = it},
+            textStyle = TextStyle(fontFamily = NotoSans, fontSize = 16.sp),
+            onValueChange = { confirmPassword = it },
             modifier = Modifier.fillMaxWidth(),
             placeholder = { Text("Confirm Password", color = Color.Gray, fontFamily = NotoSans) },
             visualTransformation = if (isConfirmPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
@@ -222,7 +273,7 @@ fun RegisterScreen(
                 if (password != confirmPassword) {
                     Toast.makeText(context, "Passwords do not match", Toast.LENGTH_SHORT).show()
                 } else {
-                    authenticationViewModel.signup(email, password)
+                    authenticationViewModel.signup(email, password, username)
                 }
             },
             colors = ButtonDefaults.buttonColors(
diff --git a/app/src/main/java/com/example/harmonyhub/ui/login/VerificationScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/account/VerificationScreen.kt
similarity index 99%
rename from app/src/main/java/com/example/harmonyhub/ui/login/VerificationScreen.kt
rename to app/src/main/java/com/example/harmonyhub/ui/account/VerificationScreen.kt
index b911316..dc6f9aa 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/login/VerificationScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/account/VerificationScreen.kt
@@ -1,4 +1,4 @@
-package com.example.harmonyhub.ui.login
+package com.example.harmonyhub.ui.account
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/ArtistCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/ArtistCard.kt
index 9d1ad6d..432fe79 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/components/ArtistCard.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/ArtistCard.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/ChartCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/ChartCard.kt
new file mode 100644
index 0000000..bd83ff1
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/ChartCard.kt
@@ -0,0 +1,40 @@
+package com.example.harmonyhub.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+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.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ChartCard(chartImg: Int) {
+    Surface(
+        modifier = Modifier
+            .size(width = 150.dp, height = 150.dp)
+            .clickable {  },
+        color = Color.Transparent
+    ) {
+        Box(contentAlignment = Alignment.BottomCenter,
+            modifier = Modifier.padding(4.dp)) {
+            // Placeholder for the image
+            Image(
+                painter = painterResource(id = chartImg),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(12.dp))
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/GenreCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/GenreCard.kt
new file mode 100644
index 0000000..94193ba
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/GenreCard.kt
@@ -0,0 +1,53 @@
+package com.example.harmonyhub.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.harmonyhub.ui.theme.NotoSans
+
+private val gradientBackground = Brush.verticalGradient(
+    colors = listOf(
+        Color(0xFF00FAF2),
+        Color(0xFF1E3264)
+    )
+)
+
+@Composable
+fun GenreCard(genre: String, modifier: Modifier = Modifier) {
+    Surface(
+        modifier = Modifier
+            .size(width = 150.dp, height = 150.dp)
+            .padding(4.dp)
+            .clickable {  },
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Box(
+            modifier = Modifier.fillMaxSize().background(gradientBackground),
+            contentAlignment = Alignment.Center) {
+            Text(
+                text = genre,
+                style = TextStyle(
+                    fontFamily = NotoSans,
+                    fontWeight = FontWeight.SemiBold,
+                    fontSize = 20.sp
+                )
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/NavigationDrawer.kt b/app/src/main/java/com/example/harmonyhub/ui/components/NavigationDrawer.kt
index f798040..44ac763 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/components/NavigationDrawer.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/NavigationDrawer.kt
@@ -29,6 +29,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -39,7 +40,9 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.harmonyhub.R
+import com.example.harmonyhub.presentation.viewmodel.UserDataViewModel
 import com.example.harmonyhub.ui.theme.NotoSans
 import kotlinx.coroutines.launch
 import java.time.format.TextStyle
@@ -91,8 +94,11 @@ fun AppScaffoldWithDrawer(
 fun DrawerContent(
     onProfileClicked: () -> Unit,
     onSettingsClicked: () -> Unit,
-    onLogoutClicked: () -> Unit
+    onLogoutClicked: () -> Unit,
+    userDataViewModel: UserDataViewModel = hiltViewModel()
 ) {
+    val username = userDataViewModel.userName.observeAsState()
+
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -116,7 +122,7 @@ fun DrawerContent(
             Spacer(modifier = Modifier.width(16.dp))
             Column {
                 Text(
-                    text = "Thomas", // Thay bằng tên người dùng thực tế
+                    text = username.value.toString(), // Thay bằng tên người dùng thực tế
                     style = androidx.compose.ui.text.TextStyle(
                         fontFamily = NotoSans,
                         fontWeight = FontWeight.Bold,
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/PlaylistCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/PlaylistCard.kt
index 26d5f74..00a8bc7 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/components/PlaylistCard.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/PlaylistCard.kt
@@ -17,13 +17,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.testTag
 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.TextOverflow.Companion.Ellipsis
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.example.harmonyhub.R
 import com.example.harmonyhub.ui.theme.NotoSans
 
 data class Playlist(val name: String, val img: Int)
@@ -33,11 +33,11 @@ fun Playlist.contains(query: String, ignoreCase: Boolean = true): Boolean {
 }
 
 @Composable
-fun PlaylistCard(playlistName: String, playlistImg: Int) {
+fun PlaylistCard(playlist: Playlist, onClick: () -> Unit, modifier: Modifier = Modifier) {
     Surface(
         modifier = Modifier
             .size(width = 155.dp, height = 210.dp)
-            .clickable {  },
+            .clickable { onClick() },
         color = Color.Transparent
     ) {
         Column(modifier = Modifier.padding(4.dp))
@@ -46,7 +46,7 @@ fun PlaylistCard(playlistName: String, playlistImg: Int) {
                 modifier = Modifier.size(width = 155.dp, height = 155.dp)
             ) {
                 Image(
-                    painter = painterResource(id = R.drawable.v),
+                    painter = painterResource(id = playlist.img),
                     contentDescription = null,
                     contentScale = ContentScale.Crop,
                     modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(12.dp)),
@@ -54,7 +54,7 @@ fun PlaylistCard(playlistName: String, playlistImg: Int) {
             }
             Spacer(modifier = Modifier.height(4.dp))
             Text(
-                text = playlistName,
+                text = playlist.name,
                 style = TextStyle(
                     fontFamily = NotoSans,
                     fontWeight = FontWeight.SemiBold,
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/SongCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/SongCard.kt
index 6bfc892..4fc5fc0 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/components/SongCard.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/SongCard.kt
@@ -21,6 +21,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
diff --git a/app/src/main/java/com/example/harmonyhub/ui/components/SuggestionCard.kt b/app/src/main/java/com/example/harmonyhub/ui/components/SuggestionCard.kt
new file mode 100644
index 0000000..7403143
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/ui/components/SuggestionCard.kt
@@ -0,0 +1,72 @@
+package com.example.harmonyhub.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.testTag
+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.TextOverflow.Companion.Ellipsis
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.harmonyhub.R
+import com.example.harmonyhub.ui.theme.NotoSans
+
+@Composable
+fun SuggestionCard(songName: String, artistName: String) {
+    Surface(
+        modifier = Modifier
+            .size(width = 125.dp, height = 180.dp)
+            .clickable {  },
+        color = Color.Transparent
+    ) {
+        Column(modifier = Modifier.padding(4.dp))
+        {
+            Box(
+                modifier = Modifier.size(width = 125.dp, height = 125.dp)
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.v),
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(12.dp)),
+                )
+            }
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = songName,
+                style = TextStyle(
+                    fontFamily = NotoSans,
+                    fontWeight = FontWeight.SemiBold,
+                    fontSize = 16.sp
+                ),
+                maxLines = 1,
+                overflow = Ellipsis
+            )
+            Text(
+                text = artistName,
+                style = TextStyle(
+                    fontFamily = NotoSans,
+                    fontSize = 14.sp
+                ),
+                color = Color.Gray,
+                maxLines = 1, overflow = Ellipsis
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/ui/home/HomeScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/home/HomeScreen.kt
index 5215124..a1a533c 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/home/HomeScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/home/HomeScreen.kt
@@ -1,10 +1,7 @@
 package com.example.harmonyhub.ui.home
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -18,38 +15,32 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Notifications
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.livedata.observeAsState
 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.layout.ContentScale
+import androidx.compose.ui.platform.testTag
 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.TextOverflow.Companion.Ellipsis
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.harmonyhub.R
+import com.example.harmonyhub.presentation.viewmodel.UserDataViewModel
 import com.example.harmonyhub.ui.components.AppScaffoldWithDrawer
 import com.example.harmonyhub.ui.components.ArtistsCard
+import com.example.harmonyhub.ui.components.ChartCard
+import com.example.harmonyhub.ui.components.GenreCard
+import com.example.harmonyhub.ui.components.SuggestionCard
 import com.example.harmonyhub.ui.theme.NotoSans
 
-private val gradientBackground = Brush.verticalGradient(
-    colors = listOf(
-        Color(0xFF00FAF2),
-        Color(0xFF1E3264)
-    )
-)
 
 @Composable
 fun HomeScreen(
@@ -58,11 +49,15 @@ fun HomeScreen(
     onLibraryButtonClicked: () -> Unit,
     onProfileButtonClicked: () -> Unit,
     onLogoutButtonClicked: () -> Unit,
+    onSettingsButtonClicked: () -> Unit,
+    userDataViewModel: UserDataViewModel = hiltViewModel(),
     modifier: Modifier = Modifier
 ) {
+    val username = userDataViewModel.userName.observeAsState()
+
     AppScaffoldWithDrawer(
         onProfileClicked = onProfileButtonClicked,
-        onSettingsClicked = {},
+        onSettingsClicked = onSettingsButtonClicked,
         onLogoutClicked = onLogoutButtonClicked
     ) { onOpenDrawer ->
         Column(
@@ -77,10 +72,12 @@ fun HomeScreen(
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
-                    IconButton(onClick = { onOpenDrawer() }) {
+                    IconButton(
+                        onClick = { onOpenDrawer() },
+                        modifier = Modifier.testTag("DrawerButton")) {
                         Image(
                             painter = painterResource(id = R.drawable.hip),
-                            contentDescription = "Profile",
+                            contentDescription = "Avatar",
                             modifier = Modifier
                                 .size(50.dp)
                                 .clip(CircleShape)
@@ -88,7 +85,8 @@ fun HomeScreen(
                     }
                     Spacer(modifier = Modifier.width(8.dp))
                     Text(
-                        text = "Thomas",
+                        text = username.value.toString(),
+                        modifier = Modifier.testTag("Username"),
                         style = TextStyle(
                             fontFamily = NotoSans,
                             fontWeight = FontWeight.Bold,
@@ -97,17 +95,10 @@ fun HomeScreen(
                     )
                 }
                 Row {
-                    IconButton(onClick = { /* Notification */ }) {
-                        Icon(
-                            imageVector = Icons.Default.Notifications,
-                            contentDescription = "Notifications",
-                            modifier = Modifier.size(24.dp)
-                        )
-                    }
-                    IconButton(onClick = { /* Settings */ }) {
+                    IconButton(onClick = { onSettingsButtonClicked() }) {
                         Icon(
                             imageVector = Icons.Default.Settings,
-                            contentDescription = "Settings",
+                            contentDescription = "Settings Icon",
                             modifier = Modifier.size(24.dp)
                         )
                     }
@@ -122,7 +113,6 @@ fun HomeScreen(
                 item {
                     //Header with avatar, username, and profile button
 
-
                     Spacer(modifier = Modifier.height(16.dp))
 
                     //Top Genres Section
@@ -139,7 +129,7 @@ fun HomeScreen(
                         horizontalArrangement = Arrangement.spacedBy(8.dp)
                     ) {
                         items(listOf("V-Pop", "K-Pop", "R&B", "Hip Hop")) { genre ->
-                            GenreCard(genre)
+                            GenreCard(genre, modifier = Modifier.testTag("GenreCard_$genre"))
                         }
                     }
 
@@ -228,7 +218,7 @@ fun HomeScreen(
 
                                 )
                         ) { chart ->
-                            ChartsCard(chart)
+                            ChartCard(chart)
                         }
                     }
                 }
@@ -237,91 +227,7 @@ fun HomeScreen(
     }
 }
 
-@Composable
-fun GenreCard(genre: String) {
-    Surface(
-        modifier = Modifier
-            .size(width = 150.dp, height = 150.dp)
-            .padding(4.dp)
-            .clickable {  },
-        shape = RoundedCornerShape(12.dp)
-    ) {
-        Box(
-            modifier = Modifier.fillMaxSize().background(gradientBackground),
-            contentAlignment = Alignment.Center) {
-            Text(
-                text = genre,
-                style = TextStyle(
-                    fontFamily = NotoSans,
-                    fontWeight = FontWeight.SemiBold,
-                    fontSize = 20.sp
-                )
-            )
-        }
-    }
-}
 
-@Composable
-fun SuggestionCard(songName: String, artistName: String) {
-    Surface(
-        modifier = Modifier
-            .size(width = 125.dp, height = 180.dp)
-            .clickable {  },
-        color = Color.Transparent
-    ) {
-        Column(modifier = Modifier.padding(4.dp))
-        {
-            Box(
-                modifier = Modifier.size(width = 125.dp, height = 125.dp)
-            ) {
-                Image(
-                    painter = painterResource(id = R.drawable.v),
-                    contentDescription = null,
-                    contentScale = ContentScale.Crop,
-                    modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(12.dp)),
-                )
-            }
-            Spacer(modifier = Modifier.height(4.dp))
-            Text(
-                text = songName,
-                style = TextStyle(
-                    fontFamily = NotoSans,
-                    fontWeight = FontWeight.SemiBold,
-                    fontSize = 16.sp
-                ),
-                maxLines = 1,
-                overflow = Ellipsis
-            )
-            Text(
-                text = artistName,
-                style = TextStyle(
-                    fontFamily = NotoSans,
-                    fontSize = 14.sp
-                ),
-                color = Color.Gray,
-                maxLines = 1, overflow = Ellipsis
-            )
-        }
-    }
-}
 
-@Composable
-fun ChartsCard(chartImg: Int) {
-    Surface(
-        modifier = Modifier
-            .size(width = 150.dp, height = 150.dp)
-            .clickable {  },
-        color = Color.Transparent
-    ) {
-        Box(contentAlignment = Alignment.BottomCenter,
-            modifier = Modifier.padding(4.dp)) {
-            // Placeholder for the image
-            Image(
-                painter = painterResource(id = chartImg),
-                contentDescription = null,
-                contentScale = ContentScale.Crop,
-                modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(12.dp))
-            )
-        }
-    }
-}
+
+
diff --git a/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
index b41c6be..6ae547e 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/library/ArtistScreen.kt
@@ -2,6 +2,7 @@ package com.example.harmonyhub.ui.library
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -22,6 +23,9 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.icons.filled.Share
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 
@@ -32,11 +36,13 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import com.example.harmonyhub.data.SongRepository
+import com.example.harmonyhub.ui.components.SongCard
+import com.example.harmonyhub.ui.theme.NotoSans
 
 @Composable
 fun ArtistScreen(
     artist: String,
-    onSongClick: (Song) -> Unit = {}
+    onSongClick: (String) -> Unit
 ) {
     val songs = SongRepository.allSongs.filter { it.artist == artist }
     val artistName = songs.firstOrNull()?.artist ?: "Unknown Artist"
@@ -56,16 +62,13 @@ fun ArtistScreen(
                     .height(240.dp)
             )
 
-            // Gradient Overlay
+            // Gradient overlay to darken the image and improve text visibility
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(240.dp)
                     .background(
-                        Brush.verticalGradient(
-                            colors = listOf(Color.Transparent, Color.Black),
-                            startY = 0f
-                        )
+                        color = Color.Black.copy(alpha = 0.4f)
                     )
             )
 
@@ -78,14 +81,9 @@ fun ArtistScreen(
                 Text(
                     text = artistName,
                     color = Color.White,
-                    fontSize = 28.sp,
+                    fontSize = 36.sp,
                     fontWeight = FontWeight.Bold
                 )
-                Text(
-                    text = "Artist",
-                    color = Color.White,
-                    fontSize = 16.sp
-                )
             }
         }
 
@@ -98,26 +96,33 @@ fun ArtistScreen(
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Text(
-                text = "${songs.size} songs",
-                color = Color.White,
-                fontSize = 18.sp
-            )
+            Box(
+                modifier = Modifier
+                    .border(1.dp, Color.White, RoundedCornerShape(16.dp))
+                    .padding(8.dp)
+            ) {
+                Text(
+                    text = "Follow",
+                    color = Color.White,
+                    fontFamily = NotoSans,
+                    fontSize = 16.sp
+                )
+            }
             Row {
-                IconButton(onClick = { /* Favourite Action */ }) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.icons8_heart_90),
-                        contentDescription = "Share",
-                        tint = Color.White
-                    )
-                }
-                Spacer(modifier = Modifier.width(8.dp))
                 IconButton(onClick = { /* Play Action */ }) {
                     Icon(
                         painter = painterResource(id = R.drawable.icons8_circled_play_64),
                         contentDescription = "Play",
+                        tint = Color(0xFF00FAF2),
+                        modifier = Modifier.size(40.dp)
+                    )
+                }
+                IconButton(onClick = { /* Share Action */ }) {
+                    Icon(
+                        imageVector = Icons.Default.Share,
+                        contentDescription = "Share",
                         tint = Color.White,
-                        modifier = Modifier.size(42.dp)
+                        modifier = Modifier.size(30.dp)
                     )
                 }
             }
@@ -130,7 +135,8 @@ fun ArtistScreen(
                 Text(
                     text = "Popular releases",
                     color = Color.White,
-                    fontSize = 18.sp,
+                    fontFamily = NotoSans,
+                    fontSize = 20.sp,
                     fontWeight = FontWeight.Bold
                 )
 
@@ -138,7 +144,7 @@ fun ArtistScreen(
 
                 LazyColumn {
                     items(songs) { song ->
-                        PopularReleaseItem(song = song, onClick = { onSongClick(song) })
+                        SongCard(song = song, onSongClick = onSongClick)
                     }
                 }
             }
@@ -153,49 +159,12 @@ fun ArtistScreen(
     }
 }
 
-@Composable
-fun PopularReleaseItem(song: Song, onClick: () -> Unit) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clickable(onClick = onClick)
-            .padding(vertical = 8.dp)
-    ) {
-        Image(
-            painter = painterResource(id = song.imageResId),
-            contentDescription = null,
-            modifier = Modifier
-                .size(60.dp)
-                .clip(RoundedCornerShape(8.dp))
-        )
-        Spacer(modifier = Modifier.width(16.dp))
-        Column(modifier = Modifier.weight(1f)) {
-            Text(
-                text = song.name,
-                color = Color.White,
-                fontSize = 16.sp,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = song.artist,
-                color = Color.Gray,
-                fontSize = 14.sp
-            )
-        }
-        IconButton(onClick = { /* Open song menu */ }) {
-            Icon(
-                painter = painterResource(id = R.drawable.icons8_more_90),
-                contentDescription = "More options",
-                tint = Color.White,
-                modifier = Modifier.size(30.dp)
-            )
-        }
-    }
-}
+
 @Preview(showBackground = true)
 @Composable
 fun ArtistScreenPreview() {
     ArtistScreen(
-        artist = "The Chainsmokers",
+        artist = "The Chainsmokers, Charlee",
+        onSongClick = {}
     )
 }
diff --git a/app/src/main/java/com/example/harmonyhub/ui/library/LibraryScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/library/LibraryScreen.kt
index f1db26d..382c171 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/library/LibraryScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/library/LibraryScreen.kt
@@ -4,9 +4,11 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -54,12 +56,14 @@ fun LibraryScreen(
     onDownloadButtonClicked: () -> Unit,
     onPlaylistButtonClicked: () -> Unit,
     onArtistsFollowingButtonClicked: () -> Unit,
+    onLogoutButtonClicked: () -> Unit,
+    onSettingsButtonClicked: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     AppScaffoldWithDrawer(
         onProfileClicked = onProfileButtonClicked,
-        onSettingsClicked = {},
-        onLogoutClicked = {}
+        onSettingsClicked = onSettingsButtonClicked,
+        onLogoutClicked = onLogoutButtonClicked
     ) { onOpenDrawer ->
         Column(
             modifier = Modifier.fillMaxSize(),
@@ -71,131 +75,153 @@ fun LibraryScreen(
                     .padding(top = 8.dp, start = 8.dp, end = 8.dp),
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.SpaceBetween
-            )   {
-    Row(verticalAlignment = Alignment.CenterVertically) {
-        IconButton(onClick = { onOpenDrawer() }) {
-            Image(
-                painter = painterResource(id = R.drawable.hip),
-                contentDescription = "Profile",
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    IconButton(onClick = { onOpenDrawer() }) {
+                        Image(
+                            painter = painterResource(id = R.drawable.hip),
+                            contentDescription = "Profile",
+                            modifier = Modifier
+                                .size(50.dp)
+                                .clip(CircleShape)
+                        )
+                    }
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Text(
+                        text = "Thư viện",
+                        style = TextStyle(
+                            fontFamily = NotoSans,
+                            fontWeight = FontWeight.Bold,
+                            fontSize = 24.sp
+                        )
+                    )
+                }
+            }
+
+            LazyColumn(
                 modifier = Modifier
-                    .size(50.dp)
-                    .clip(CircleShape)
-            )
-        }
-        Spacer(modifier = Modifier.width(8.dp))
-        Text(
-            text = "Thư viện",
-            style = TextStyle(
-                fontFamily = NotoSans,
-                fontWeight = FontWeight.Bold,
-                fontSize = 24.sp
-            )
-        )
-    }
-}
+                    .fillMaxSize()
+                    .padding(8.dp),
+                verticalArrangement = Arrangement.Top
+            ) {
+                // Phần nội dung đầu tiên
+                item {
+                    Spacer(modifier = Modifier.height(16.dp))
 
-LazyColumn(
-modifier = Modifier
-.fillMaxSize()
-.padding(8.dp),
-verticalArrangement = Arrangement.Top
-) {
-    // Phần nội dung đầu tiên
-    item {
-        Spacer(modifier = Modifier.height(16.dp))
+                    Row(
+                        modifier = Modifier.fillMaxWidth().padding(8.dp),
+                        horizontalArrangement = Arrangement.spacedBy(16.dp)
+                    ) {
+                        Box(
+                            modifier = Modifier.fillMaxWidth(0.48f)
+                        ) {
+                            LibraryCard(
+                                icon = R.drawable.favorite,
+                                title = "Đã thích",
+                                count = 120,
+                                type = "bài hát",
+                                onCardClicked = onFavoriteButtonClicked,
+                            )
+                        }
+                        Box(
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            LibraryCard(
+                                icon = R.drawable.download_for_offline,
+                                title = "Tải xuống",
+                                count = 20,
+                                type = "bài hát",
+                                onCardClicked = onDownloadButtonClicked,
+                            )
+                        }
+                    }
+//                    Spacer(modifier = Modifier.height(16.dp))
 
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            LibraryCard(
-                icon = R.drawable.favorite,
-                title = "Bài hát đã thích",
-                count = 120,
-                type = "bài hát",
-                onCardClicked = onFavoriteButtonClicked
-            )
-            LibraryCard(
-                icon = R.drawable.download_for_offline,
-                title = "Tải xuống",
-                count = 20,
-                type = "bài hát",
-                onCardClicked = onDownloadButtonClicked
-            )
-        }
-        Spacer(modifier = Modifier.height(16.dp))
+                    Row(
+                        modifier = Modifier.fillMaxWidth().padding(8.dp),
+                        horizontalArrangement = Arrangement.spacedBy(16.dp)
+                    ) {
+                        Box(
+                            modifier = Modifier.fillMaxWidth(0.48f)
+                        ) {
+                            LibraryCard(
+                                icon = R.drawable.queue_music,
+                                title = "Playlists",
+                                count = 12,
+                                type = "playlists",
+                                onCardClicked = onPlaylistButtonClicked,
+                            )
+                        }
+                        Box(
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            LibraryCard(
+                                icon = R.drawable.mdi_account_music_outline,
+                                title = "Nghệ sĩ",
+                                count = 3,
+                                type = "nghệ sĩ",
+                                onCardClicked = onArtistsFollowingButtonClicked,
+                            )
+                        }
+                    }
 
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            LibraryCard(
-                icon = R.drawable.queue_music,
-                title = "Danh sách phát",
-                count = 12,
-                type = "danh sách phát",
-                onCardClicked = onPlaylistButtonClicked
-            )
-            LibraryCard(
-                icon = R.drawable.mdi_account_music_outline,
-                title = "Nghệ sĩ",
-                count = 3,
-                type = "nghệ sĩ",
-                onCardClicked = onArtistsFollowingButtonClicked
-            )
-        }
+                    Spacer(modifier = Modifier.height(24.dp))
 
-        Spacer(modifier = Modifier.height(24.dp))
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = "Nghe gần đây",
+                            style = TextStyle(
+                                fontFamily = NotoSans,
+                                fontWeight = FontWeight.Bold,
+                                fontSize = 24.sp
+                            )
+                        )
+                        Text(
+                            text = "Xem tất cả",
+                            style = TextStyle(
+                                fontFamily = NotoSans,
+                                fontSize = 16.sp,
+                                fontWeight = FontWeight.Bold,
+                                color = Color(0xFF00FAF2)
+                            ),
+                            modifier = Modifier.clickable {
+                                onViewAllRecentCLicked()
+                            }
+                        )
+                    }
 
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.SpaceBetween,
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Text(
-                text = "Nghe gần đây",
-                style = TextStyle(
-                    fontFamily = NotoSans,
-                    fontWeight = FontWeight.Bold,
-                    fontSize = 24.sp
-                )
-            )
-            Text(
-                text = "Xem tất cả",
-                style = TextStyle(
-                    fontFamily = NotoSans,
-                    fontSize = 16.sp,
-                    fontWeight = FontWeight.Bold,
-                    color = Color(0xFF00FAF2)
-                ),
-                modifier = Modifier.clickable {
-                    onViewAllRecentCLicked()
+                    Spacer(modifier = Modifier.height(8.dp))
                 }
-            )
-        }
-
-        Spacer(modifier = Modifier.height(8.dp))
-    }
 
-    // Hiển thị 5 bài hát gần đây từ SongRepository
-    items(SongRepository.allSongs.take(5)) { song ->
-        SongCard(
-            song = song,
-            onSongClick = { onPlaySongClicked(song.id)}
-        )
+                // Hiển thị 5 bài hát gần đây từ SongRepository
+                items(SongRepository.allSongs.take(5)) { song ->
+                    SongCard(
+                        song = song,
+                        onSongClick = { onPlaySongClicked(song.id) }
+                    )
+                }
+            }
+        }
     }
 }
-}
-}
-}
-
 
 
 @Composable
-fun LibraryCard(icon: Int, title: String, count: Int, type: String, onCardClicked: () -> Unit) {
+fun LibraryCard(
+    icon: Int,
+    title: String,
+    count: Int,
+    type: String,
+    onCardClicked: () -> Unit,
+    modifier: Modifier = Modifier
+) {
     Surface(
         modifier = Modifier
-            .width(190.dp)
+            .fillMaxWidth()
             .height(140.dp)
             .clickable { onCardClicked() },
         shape = RoundedCornerShape(12.dp)
@@ -224,7 +250,8 @@ fun LibraryCard(icon: Int, title: String, count: Int, type: String, onCardClicke
                 )
             )
             Spacer(modifier = Modifier.height(4.dp))
-            Text(text = "$count $type",
+            Text(
+                text = "$count $type",
                 style = TextStyle(
                     fontFamily = NotoSans,
                     fontSize = 14.sp,
diff --git a/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistSongList.kt b/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistSongList.kt
new file mode 100644
index 0000000..23c6182
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistSongList.kt
@@ -0,0 +1,19 @@
+package com.example.harmonyhub.ui.library
+
+import androidx.compose.runtime.Composable
+import com.example.harmonyhub.data.SongRepository
+import com.example.harmonyhub.ui.components.Song
+
+@Composable
+fun PlaylistSongListScreen(
+    playlistName: String,
+    onBackButtonClicked: () -> Unit,
+) {
+    val allSongs: List<Song> = SongRepository.allSongs
+
+    SongList(
+        title = playlistName,
+        songs = allSongs,
+        onBackButtonClicked = onBackButtonClicked,
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistsScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistsScreen.kt
index 92c9af8..3ddb085 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistsScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/library/PlaylistsScreen.kt
@@ -1,6 +1,8 @@
 package com.example.harmonyhub.ui.library
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -22,12 +24,14 @@ import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults.textFieldColors
 import androidx.compose.runtime.Composable
@@ -53,12 +57,20 @@ import com.example.harmonyhub.ui.components.PlaylistCard
 import com.example.harmonyhub.ui.components.contains
 import com.example.harmonyhub.ui.theme.NotoSans
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun PlaylistsScreen(
     onBackButtonClicked: () -> Unit,
+    onAddNewPlaylistClicked: (String) -> Unit,
+    onPlaylistClicked: (String) -> Unit,
 ) {
     var query by remember { mutableStateOf("") }
+    var showDialog by remember { mutableStateOf(false) }
+    var newPlaylistName by remember { mutableStateOf("") }
+
+    var isDeleteDialogVisible by remember { mutableStateOf(false) }
+    var selectedPlaylist by remember { mutableStateOf<Playlist?>(null) }
+
     val focusManager = LocalFocusManager.current
 
     val allPlaylists = listOf(
@@ -66,7 +78,6 @@ fun PlaylistsScreen(
         Playlist("Playlist 2", R.drawable.v),
         Playlist("Playlist 3", R.drawable.v),
         Playlist("Playlist 4", R.drawable.v),
-        Playlist("Playlist 5", R.drawable.v),
     )
     // Lọc danh sách bài hát theo từ khóa
     val searchResults = allPlaylists.filter { it.contains(query, ignoreCase = true) }
@@ -97,7 +108,7 @@ fun PlaylistsScreen(
             }
             Spacer(modifier = Modifier.width(8.dp))
             Text(
-                text = "Danh sách phát của bạn",
+                text = "Danh sách phát của tôi",
                 style = TextStyle(
                     fontFamily = NotoSans,
                     fontWeight = FontWeight.Bold,
@@ -106,7 +117,7 @@ fun PlaylistsScreen(
                 )
             )
             Spacer(modifier = Modifier.weight(1f))
-            IconButton(onClick = { /* Handle settings button click */ }) {
+            IconButton(onClick = { showDialog = true }) {
                 Icon(
                     imageVector = Icons.Default.Add,
                     contentDescription = "Add",
@@ -192,8 +203,15 @@ fun PlaylistsScreen(
                 ) {
                     playlistPair.forEach { playlist ->
                         PlaylistCard(
-                            playlistName = playlist.name,
-                            playlistImg = playlist.img
+                            playlist = playlist,
+                            onClick = { onPlaylistClicked(playlist.name) },
+                            modifier = Modifier.combinedClickable (
+                                onClick = { onPlaylistClicked(playlist.name) },
+                                onLongClick = {
+                                    selectedPlaylist = playlist
+                                    isDeleteDialogVisible = true
+                                }
+                            )
                         )
                     }
                     // Nếu hàng có lẻ số nghệ sĩ, bạn có thể thêm một khoảng trống để cân đối
@@ -201,7 +219,7 @@ fun PlaylistsScreen(
                         Surface(
                             modifier = Modifier
                                 .size(width = 155.dp, height = 200.dp)
-                                .clickable {  },
+                                .clickable { },
                             color = Color.Transparent
                         ) {
                             Column(
@@ -210,7 +228,9 @@ fun PlaylistsScreen(
                                 modifier = Modifier.padding(4.dp)
                             ) {
                                 Box(
-                                    modifier = Modifier.size(width = 155.dp, height = 145.dp),
+                                    modifier = Modifier
+                                        .size(width = 155.dp, height = 145.dp)
+                                        .clickable { showDialog = true },
                                 ) {
                                     Icon(
                                         painter = painterResource(id = R.drawable.add),
@@ -241,5 +261,106 @@ fun PlaylistsScreen(
                 }
             }
         }
+        // Dialog để nhập tên playlist mới
+        if (showDialog) {
+            AlertDialog(
+                onDismissRequest = { showDialog = false },
+                title = {
+                    Text(
+                        "Tạo Playlist Mới",
+                        fontFamily = NotoSans,
+                        fontWeight = FontWeight.Bold
+                    )
+                },
+                text = {
+                    TextField(
+                        value = newPlaylistName,
+                        onValueChange = { newPlaylistName = it },
+                        placeholder = {
+                            Text(
+                                "Tên Playlist",
+                                fontFamily = NotoSans,
+                                fontSize = 16.sp
+                            )
+                        },
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clip(RoundedCornerShape(16.dp)),
+                        singleLine = true,
+                        maxLines = 1,
+                        textStyle = TextStyle(fontFamily = NotoSans, fontSize = 20.sp),
+                        colors = textFieldColors(
+                            focusedIndicatorColor = Color.Transparent,
+                            unfocusedIndicatorColor = Color.Transparent,
+                            disabledIndicatorColor = Color.Transparent,
+                            containerColor = Color.Gray.copy(alpha = 0.2f)
+                        ),
+                        trailingIcon = {
+                            // Hiển thị icon xóa nếu TextField có dữ liệu
+                            if (newPlaylistName.isNotEmpty()) {
+                                IconButton(onClick = { newPlaylistName = "" }) {
+                                    Icon(
+                                        imageVector = Icons.Default.Clear,
+                                        contentDescription = "Clear"
+                                    )
+                                }
+                            }
+                        },
+                    )
+                },
+
+                confirmButton = {
+                    TextButton(
+                        onClick = {
+                            onAddNewPlaylistClicked(newPlaylistName)
+                            showDialog = false
+                        }
+                    ) {
+                        Text(
+                            "OK",
+                            fontFamily = NotoSans,
+                            fontSize = 16.sp,
+                            fontWeight = FontWeight.Bold,
+                            color = Color(0xFF00FAF2)
+                        )
+                    }
+                },
+                dismissButton = {
+                    TextButton(onClick = { showDialog = false }) {
+                        Text(
+                            "Hủy",
+                            fontFamily = NotoSans,
+                            fontSize = 16.sp,
+                            fontWeight = FontWeight.Bold,
+                            color = Color(0xFF00FAF2)
+                        )
+                    }
+                }
+            )
+        }
+
+        // Dialog xác nhận xóa playlist
+        if (isDeleteDialogVisible) {
+            AlertDialog(
+                onDismissRequest = { isDeleteDialogVisible = false },
+                title = { Text("Xóa playlist") },
+                text = { Text("Bạn có chắc chắn muốn xóa playlist này?") },
+                confirmButton = {
+                    TextButton(onClick = {
+                        selectedPlaylist?.let {
+                            // Logic xóa playlist ở đây
+                        }
+                        isDeleteDialogVisible = false
+                    }) {
+                        Text("Xóa")
+                    }
+                },
+                dismissButton = {
+                    TextButton(onClick = { isDeleteDialogVisible = false }) {
+                        Text("Hủy")
+                    }
+                }
+            )
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/com/example/harmonyhub/ui/play/PlayScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/play/PlayScreen.kt
index 0688a22..3e5e4d7 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/play/PlayScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/play/PlayScreen.kt
@@ -42,9 +42,6 @@ fun RoundedImageCard(
     }
 }
 
-
-
-
 @Composable
 fun PlayScreen(
     onBackButtonClicked: () -> Unit = {}
@@ -52,7 +49,7 @@ fun PlayScreen(
     val context = LocalContext.current
     val exoPlayer = remember { ExoPlayer.Builder(context).build() }
     var playlist by remember { mutableStateOf(SongRepository.allSongs) }
-    var currentSongIndex by remember { mutableStateOf(0) }
+    var currentSongIndex by remember { mutableIntStateOf(0) }
     //var currentSong by remember { mutableStateOf(playlist[currentSongIndex]) }
     var isPlaying by remember { mutableStateOf(false) }
 
diff --git a/app/src/main/java/com/example/harmonyhub/ui/profile/ProfileScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/profile/ProfileScreen.kt
index 41dae15..85faec7 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/profile/ProfileScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/profile/ProfileScreen.kt
@@ -1,11 +1,11 @@
 package com.example.harmonyhub.ui.profile
 
 import androidx.compose.foundation.Image
+import androidx.compose.material3.TextButton
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 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.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -24,11 +24,9 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldDefaults.textFieldColors
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -45,102 +43,25 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.harmonyhub.R
+import com.example.harmonyhub.presentation.viewmodel.UserDataViewModel
 import com.example.harmonyhub.ui.theme.NotoSans
 
-private val gradientBackground = Brush.verticalGradient(
-    colors = listOf(Color(0xFF04A8A3), Color(0xFF0A91BD))
-)
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ProfileScreen(
     onBackButtonClicked: () -> Unit,
+    userDataViewModel: UserDataViewModel = hiltViewModel(),
 ) {
     val focusManager = LocalFocusManager.current
-    val username = remember { mutableStateOf("Thomas") }
+
     val profileImage = remember { mutableIntStateOf(R.drawable.hip) }
+    val username = userDataViewModel.userName.observeAsState()
+    val email = userDataViewModel.email.observeAsState()
 
-    val isNameDialogOpen = remember { mutableStateOf(false) }
     val isImageDialogOpen = remember { mutableStateOf(false) }
 
-    if (isNameDialogOpen.value) {
-        AlertDialog(
-            onDismissRequest = { isNameDialogOpen.value = false },
-            title = {
-                Text(
-                    text = "Đổi tên",
-                    style = TextStyle(
-                        fontFamily = NotoSans,
-                        fontWeight = FontWeight.Bold,
-                        fontSize = 20.sp,
-                        color = Color.White
-                    )
-                )
-            },
-            text = {
-                TextField(
-                    value = username.value,
-                    onValueChange = { newName -> username.value = newName },
-                    placeholder = { Text("Tên mới") },
-                    singleLine = true,
-                    maxLines = 1,
-                    textStyle = TextStyle(
-                        fontFamily = NotoSans,
-                        fontSize = 20.sp,
-                        fontWeight = FontWeight.Bold
-                    ),
-                    colors = textFieldColors(
-                        focusedIndicatorColor = Color.Transparent,
-                        unfocusedIndicatorColor = Color.Transparent,
-                        disabledIndicatorColor = Color.Transparent,
-                        containerColor = Color.Gray.copy(alpha = 0.2f)
-                    ),
-                )
-            },
-
-            confirmButton = {
-                Button(
-                    onClick = { isNameDialogOpen.value = false },
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color.Transparent
-                    ),
-                    modifier = Modifier
-                        .height(40.dp)
-                        .background(gradientBackground, shape = RoundedCornerShape(32.dp)),
-
-                    ) {
-                    Text(
-                        text = "Lưu",
-                        fontFamily = NotoSans,
-                        fontSize = 16.sp,
-                        fontWeight = FontWeight.Bold,
-                        color = Color.White
-                    )
-                }
-            },
-            dismissButton = {
-                Button(
-                    onClick = { isNameDialogOpen.value = false },
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color.Transparent
-                    ),
-                    modifier = Modifier
-                        .height(40.dp)
-                        .background(gradientBackground, shape = RoundedCornerShape(32.dp)),
-                ) {
-                    Text(
-                        text = "Hủy",
-                        fontFamily = NotoSans,
-                        fontSize = 16.sp,
-                        fontWeight = FontWeight.Bold,
-                        color = Color.White
-                    )
-                }
-            }
-        )
-    }
-
     if (isImageDialogOpen.value) {
         AlertDialog(
             onDismissRequest = { isImageDialogOpen.value = false },
@@ -149,40 +70,29 @@ fun ProfileScreen(
                 Text("Chọn ảnh từ thư viện hoặc máy của bạn.")
             },
             confirmButton = {
-                Button(
+                TextButton(
                     onClick = { isImageDialogOpen.value = false },
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color.Transparent
-                    ),
-                    modifier = Modifier
-                        .height(40.dp)
-                        .background(gradientBackground, shape = RoundedCornerShape(32.dp)),
                 ) {
                     Text(
-                        text = "Lưu ảnh mới",
+                        text = "Lưu",
                         fontFamily = NotoSans,
                         fontSize = 16.sp,
                         fontWeight = FontWeight.Bold,
-                        color = Color.White,
+                        color = Color(0xFF00FAF2)
                     )
+
                 }
             },
             dismissButton = {
-                Button(
+                TextButton(
                     onClick = { isImageDialogOpen.value = false },
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color.Transparent
-                    ),
-                    modifier = Modifier
-                        .height(40.dp)
-                        .background(gradientBackground, shape = RoundedCornerShape(32.dp)),
                 ) {
                     Text(
                         text = "Hủy",
                         fontFamily = NotoSans,
                         fontSize = 16.sp,
                         fontWeight = FontWeight.Bold,
-                        color = Color.White,
+                        color = Color(0xFF00FAF2)
                     )
                 }
             }
@@ -195,7 +105,6 @@ fun ProfileScreen(
             .padding(8.dp)
             .pointerInput(Unit) {
                 detectTapGestures(onTap = {
-                    isNameDialogOpen.value = false
                     isImageDialogOpen.value = false
                     focusManager.clearFocus()
                 })
@@ -254,7 +163,7 @@ fun ProfileScreen(
                 Spacer(modifier = Modifier.height(16.dp))
                 // Khi nhấn vào tên, mở hộp thoại thay đổi tên
                 Text(
-                    text = username.value,
+                    text = username.value.toString(),
                     style = TextStyle(
                         fontFamily = NotoSans,
                         fontWeight = FontWeight.Bold,
@@ -263,7 +172,6 @@ fun ProfileScreen(
                     ),
                     modifier = Modifier.pointerInput(Unit) {
                         detectTapGestures(onTap = {
-                            isNameDialogOpen.value = true
                         })
                     }
                 )
@@ -285,7 +193,7 @@ fun ProfileScreen(
             )
             Spacer(modifier = Modifier.height(8.dp))
             Text(
-                text = "thomas.todd@gmail.com",
+                text = email.value.toString(),
                 style = TextStyle(
                     fontFamily = NotoSans,
                     fontSize = 18.sp,
diff --git a/app/src/main/java/com/example/harmonyhub/ui/settings/SettingsScreen.kt b/app/src/main/java/com/example/harmonyhub/ui/settings/SettingsScreen.kt
index 80f5f38..f0d8b71 100644
--- a/app/src/main/java/com/example/harmonyhub/ui/settings/SettingsScreen.kt
+++ b/app/src/main/java/com/example/harmonyhub/ui/settings/SettingsScreen.kt
@@ -1,9 +1,77 @@
 package com.example.harmonyhub.ui.settings
 
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+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.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.text.font.FontVariation
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.harmonyhub.ui.theme.NotoSans
 
 @Composable
-fun SettingsScreen() {
+fun SettingsScreen(
+    onBackButtonClicked: () -> Unit
+) {
+    val focusManager = LocalFocusManager.current
 
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(8.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(onTap = {
+                    focusManager.clearFocus()
+                })
+            }
+    ) {
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Thanh tiêu đề
+        Row(
+            modifier = Modifier
+                .fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            IconButton(onClick = { onBackButtonClicked() }) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                    contentDescription = "Back",
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            Text(
+                text = "Cài đặt",
+                style = TextStyle(
+                    fontFamily = NotoSans,
+                    fontWeight = FontWeight.Bold,
+                    fontSize = 24.sp,
+                    color = Color.White
+                )
+            )
+        }
+        Spacer(modifier = Modifier.height(32.dp))
+
+        // Các cài đặt
+
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index efd0dc5..9862dc9 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -16,5 +16,6 @@
     <string name="forgotPassword">Forgot Password</string>
     <string name="verification">Verification</string>
     <string name="newPassword">New Password</string>
+    <string name="playlistSongList">Playlist Song List</string>
 
 </resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 7e93d7f..b3dff38 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -13,6 +13,7 @@ navigationRuntimeKtx = "2.8.4"
 googleGmsGoogleServices = "4.4.2"
 firebaseAuth = "23.1.0"
 firebaseAuthKtx = "23.1.0"
+firebaseFirestore = "25.1.1"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -33,6 +34,7 @@ androidx-navigation-compose = { group = "androidx.navigation", name = "navigatio
 androidx-navigation-runtime-ktx = { group = "androidx.navigation", name = "navigation-runtime-ktx", version.ref = "navigationRuntimeKtx" }
 firebase-auth = { group = "com.google.firebase", name = "firebase-auth", version.ref = "firebaseAuth" }
 firebase-auth-ktx = { group = "com.google.firebase", name = "firebase-auth-ktx", version.ref = "firebaseAuthKtx" }
+firebase-firestore = { group = "com.google.firebase", name = "firebase-firestore", version.ref = "firebaseFirestore" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }

From 7dc126fc6ead17b00b288a5611f5cd9f4e888b85 Mon Sep 17 00:00:00 2001
From: Dat Trxng <datkroos2709@gmail.com>
Date: Wed, 27 Nov 2024 16:32:16 +0700
Subject: [PATCH 3/3] update NowPlayingBar

---
 .../com/example/harmonyhub/HarmonyHubApp.kt   |  22 +++-
 .../harmonyhub/ui/play/NowPlayingBar.kt       | 112 ++++++++++++++++++
 2 files changed, 129 insertions(+), 5 deletions(-)
 create mode 100644 app/src/main/java/com/example/harmonyhub/ui/play/NowPlayingBar.kt

diff --git a/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt b/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
index d2aaa4a..f568a87 100644
--- a/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
+++ b/app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
@@ -3,6 +3,7 @@ package com.example.harmonyhub
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
@@ -50,6 +51,7 @@ import com.example.harmonyhub.ui.account.NewPasswordScreen
 import com.example.harmonyhub.ui.account.RegisterScreen
 import com.example.harmonyhub.ui.account.VerificationScreen
 import com.example.harmonyhub.ui.library.PlaylistSongListScreen
+import com.example.harmonyhub.ui.play.NowPlayingBar
 import com.example.harmonyhub.ui.play.PlayScreen
 import com.example.harmonyhub.ui.profile.ProfileScreen
 import com.example.harmonyhub.ui.search.SearchScreen
@@ -93,8 +95,7 @@ fun HarmonyHubApp(
     )
 
     Scaffold(
-        modifier = Modifier
-            .fillMaxSize(),
+        modifier = Modifier.fillMaxSize(),
         bottomBar = {
             if (currentScreen !in listOf(
                     HarmonyHubScreen.Login,
@@ -107,10 +108,21 @@ fun HarmonyHubApp(
                     HarmonyHubScreen.Play
                 )
             ) {
-                BottomNavigationBar(navController = navController)
+                Column {
+                    NowPlayingBar(
+                        songName = "Closer",
+                        artistName = "The Chainsmokers, Halsey",
+                        isPlaying = true,
+                        onPlayPauseClick = { /* Handle play/pause logic */ },
+                        onNextClick = { /* Handle next song logic */ },
+                        onPreviousClick = { /* Handle previous song logic */ },
+                        onBarClick = { navController.navigate(HarmonyHubScreen.Play.name) }
+                    )
+                    BottomNavigationBar(navController = navController)
+                }
             }
-        },
-    ) { innerPadding ->
+        }
+    )  { innerPadding ->
         Box(
             modifier = Modifier
                 .fillMaxSize()
diff --git a/app/src/main/java/com/example/harmonyhub/ui/play/NowPlayingBar.kt b/app/src/main/java/com/example/harmonyhub/ui/play/NowPlayingBar.kt
new file mode 100644
index 0000000..1d5b6bf
--- /dev/null
+++ b/app/src/main/java/com/example/harmonyhub/ui/play/NowPlayingBar.kt
@@ -0,0 +1,112 @@
+package com.example.harmonyhub.ui.play
+
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.res.painterResource
+
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.harmonyhub.R
+import com.example.harmonyhub.ui.theme.NotoSans
+
+@Composable
+fun NowPlayingBar(
+    songName: String,
+    artistName: String,
+    isPlaying: Boolean,
+    onPlayPauseClick: () -> Unit,
+    onNextClick: () -> Unit,
+    onPreviousClick: () -> Unit,
+    onBarClick: () -> Unit
+) {
+    val gradientBackground = Brush.horizontalGradient(
+        colors = listOf(
+            Color(0xFF1D2671).copy(alpha = 0.7f),
+            Color(0xFFC33764).copy(alpha = 0.7f)
+        )
+    )
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(64.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(gradientBackground)
+            .clickable { onBarClick() }
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.v),
+                contentDescription = "Album Cover",
+                modifier = Modifier
+                    .size(52.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = songName,
+                    color = Color.White,
+                    fontSize = 16.sp,
+                    maxLines = 1,
+                    fontWeight = FontWeight.Bold,
+                    fontFamily = NotoSans
+                )
+                Text(
+                    text = artistName,
+                    color = Color.Gray,
+                    fontSize = 14.sp,
+                    maxLines = 1,
+                    fontFamily = NotoSans
+                )
+            }
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            IconButton(onClick = { onPreviousClick() }) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icons8_skip_to_start_90),
+                    contentDescription = "Previous",
+                    tint = Color.White
+                )
+            }
+            IconButton(onClick = { onPlayPauseClick() }) {
+                Icon(
+                    painter = painterResource(
+                        id = if (isPlaying) R.drawable.icons8_pause_50 else R.drawable.icons8_circled_play_64
+                    ),
+                    contentDescription = "Play/Pause",
+                    tint = Color.White,
+                    modifier = Modifier.size(if (isPlaying) 38.dp else 32.dp)
+                )
+            }
+            IconButton(onClick = { onNextClick() }) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icons8_next_90),
+                    contentDescription = "Next",
+                    tint = Color.White
+                )
+            }
+        }
+    }
+}
+