diff --git a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/TopComponents.kt b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/TopComponents.kt
similarity index 61%
rename from app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/TopComponents.kt
rename to app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/TopComponents.kt
index 7ac6c0e..e0c6104 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/TopComponents.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/TopComponents.kt
@@ -1,20 +1,18 @@
-package `in`.sminnovations.attendanceapp.screens.settings.components
+package `in`.sminnovations.attendanceapp.screens.settings.ui.components
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 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.shape.RoundedCornerShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -23,19 +21,28 @@ 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 androidx.navigation.NavController
+import androidx.navigation.compose.rememberNavController
 import `in`.sminnovations.attendanceapp.R
+import `in`.sminnovations.attendanceapp.screens.settings.data.EmployeeDataSettings
+import `in`.sminnovations.attendanceapp.screens.settings.viewModel.SettingsViewModel
 
 
 @Composable
 fun TopComponents(
+    navController: NavController,
+    settingsViewModel: SettingsViewModel = hiltViewModel()
 ) {
+    val employeeDataSettings by settingsViewModel.employeeDataSettings.collectAsState(
+        initial = EmployeeDataSettings()
+    )
+
     Column(
-        modifier = Modifier
-            .fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally
+        modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Image(
-            painter = painterResource(id = R.drawable.smi_logo), // replace with your image resource
+            painter = painterResource(id = R.drawable.smi_logo),
             contentDescription = "Profile Photo",
             contentScale = ContentScale.Crop,
             modifier = Modifier
@@ -46,7 +53,7 @@ fun TopComponents(
         Spacer(modifier = Modifier.height(16.dp))
 
         Text(
-            text = "Sathwik C S",
+            text = employeeDataSettings.name,
             style = MaterialTheme.typography.titleMedium,
             fontWeight = FontWeight.Bold,
             fontSize = 20.sp,
@@ -56,7 +63,7 @@ fun TopComponents(
         Spacer(modifier = Modifier.height(8.dp))
 
         Text(
-            text = "ID: 69420",
+            text = "ID: ${employeeDataSettings.id}",
             style = MaterialTheme.typography.bodyMedium,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
             fontSize = 16.sp
@@ -65,10 +72,17 @@ fun TopComponents(
         Spacer(modifier = Modifier.height(4.dp))
 
         Text(
-            text = "Android Developer",
+            text = employeeDataSettings.designation,
             style = MaterialTheme.typography.bodyMedium,
             color = MaterialTheme.colorScheme.primary,
             fontSize = 16.sp
         )
+        Spacer(modifier = Modifier.height(8.dp))
+        Button(onClick = {
+            settingsViewModel.logout()
+            navController.navigate("login")
+        }) {
+            Text(text = "Log out")
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/settingsComponents/SwitchRow.kt b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/settingsComponents/SwitchRow.kt
similarity index 96%
rename from app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/settingsComponents/SwitchRow.kt
rename to app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/settingsComponents/SwitchRow.kt
index 9ba64d7..afd609a 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/components/settingsComponents/SwitchRow.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/ui/components/settingsComponents/SwitchRow.kt
@@ -1,4 +1,4 @@
-package `in`.sminnovations.attendanceapp.screens.settings.components.settingsComponents
+package `in`.sminnovations.attendanceapp.screens.settings.ui.components.settingsComponents
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/viewModel/SettingsViewModel.kt b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/viewModel/SettingsViewModel.kt
index 878e272..4d504d5 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/viewModel/SettingsViewModel.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/screens/settings/viewModel/SettingsViewModel.kt
@@ -2,17 +2,27 @@ package `in`.sminnovations.attendanceapp.screens.settings.viewModel
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import com.google.firebase.firestore.FirebaseFirestore
 import dagger.hilt.android.lifecycle.HiltViewModel
+import `in`.sminnovations.attendanceapp.data.dataStore.EmployeeRepository
 import `in`.sminnovations.attendanceapp.screens.login.data.LoginDataStore
+import `in`.sminnovations.attendanceapp.screens.settings.data.EmployeeDataSettings
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 @HiltViewModel
 class SettingsViewModel @Inject constructor(
     private val loginDataStore: LoginDataStore,
-    private val firebaseFirestore: FirebaseFirestore
+    private val employeeRepository: EmployeeRepository
 ) : ViewModel() {
+    val employeeDataSettings : Flow<EmployeeDataSettings> = employeeRepository.getEmployeeDataSettings()
+    fun logout() {
+        viewModelScope.launch {
+            loginDataStore.clearLoginData()
+        }
+    }
+
+