diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index e21f3ca..668791f 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -70,6 +70,7 @@ dependencies {
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
     implementation("androidx.work:work-runtime-ktx:2.9.0")
     implementation("androidx.appcompat:appcompat:1.6.1")
+    implementation("androidx.games:games-activity:3.0.0")
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
diff --git a/app/src/main/java/com/uad/portal/views/HomeView.kt b/app/src/main/java/com/uad/portal/views/HomeView.kt
index de1d9b7..4435811 100644
--- a/app/src/main/java/com/uad/portal/views/HomeView.kt
+++ b/app/src/main/java/com/uad/portal/views/HomeView.kt
@@ -1,50 +1,116 @@
 package com.uad.portal.views
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Button
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Book
+import androidx.compose.material.icons.filled.CalendarToday
+import androidx.compose.material.icons.filled.ExitToApp
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+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 coil.compose.rememberImagePainter
 import com.uad.portal.MainViewModel
 
+
 @Composable
 fun HomeView(mainViewModel: MainViewModel) {
-    Column(modifier = Modifier
-        .fillMaxWidth()
-        .padding(horizontal = 32.dp)) {
-        Text("You are logged in as ${mainViewModel.userInfoState.value?.username ?: "Unknown"}")
-        Text("Your IPK is ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}")
-        Text("Your total SKS is ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}")
-        mainViewModel.userInfoState.value?.avatarUrl?.let {
-            if (it.isNotEmpty()) {
-                Image(
-                    painter = rememberImagePainter(it),
-                    contentDescription = "User Avatar",
-                    modifier = Modifier.size(100.dp)
-                )
+    val ipkVisible = remember { mutableStateOf(false) }
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(24.dp),
+        verticalArrangement = Arrangement.Top
+    ) {
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            mainViewModel.userInfoState.value?.avatarUrl?.let {
+                if (it.isNotEmpty()) {
+                    Image(
+                        painter = rememberImagePainter(it),
+                        contentDescription = "User Avatar",
+                        modifier = Modifier
+                            .size(64.dp)
+                            .clip(CircleShape)
+                    )
+                }
             }
+            Spacer(modifier = Modifier.width(16.dp))
+            Text("Halo, ${mainViewModel.userInfoState.value?.username ?: "Unknown"} 🤚", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
         }
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
-            Text("Absensi")
-        }
+        Spacer(modifier = Modifier.height(24.dp))
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
-            Text("Reglab")
-        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Card(
+                modifier = Modifier
+                    .weight(1f)
+                    .aspectRatio(1f)
+                    .clickable { ipkVisible.value = !ipkVisible.value },
+                shape = RoundedCornerShape(16.dp)
+            ) {
+                Box(contentAlignment = Alignment.Center) {
+                    if (ipkVisible.value) {
+                        Text("IPK: ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+                    } else {
+                        Text("Tekan untuk melihat IPK", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) // Add this line
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.width(24.dp))
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Settings) }) {
-            Text("Settings")
+            Card(
+                modifier = Modifier
+                    .weight(1f)
+                    .aspectRatio(1f),
+                shape = RoundedCornerShape(16.dp)
+            ) {
+                Box(contentAlignment = Alignment.Center) {
+                    Text("Total SKS: ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+                }
+            }
         }
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = mainViewModel::logout) {
-            Text("Logout")
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            IconButton(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
+                Icon(Icons.Filled.CalendarToday, contentDescription = "Absensi")
+            }
+
+            IconButton(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
+                Icon(Icons.Filled.Book, contentDescription = "Reglab")
+            }
+
+            IconButton(onClick = { mainViewModel.navigate(Screen.Settings) }) {
+                Icon(Icons.Filled.Settings, contentDescription = "Settings")
+            }
+
+            IconButton(onClick = mainViewModel::logout) {
+                Icon(Icons.Filled.ExitToApp, contentDescription = "Logout")
+            }
         }
     }
 }