diff --git a/app/src/main/java/in/sminnovations/attendanceapp/screens/login/ui/login.kt b/app/src/main/java/in/sminnovations/attendanceapp/screens/login/ui/login.kt
index 5d402da..64b04a8 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/screens/login/ui/login.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/screens/login/ui/login.kt
@@ -1,2 +1,139 @@
 package `in`.sminnovations.attendanceapp.screens.login.ui
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material3.Button
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.sp
+import `in`.sminnovations.attendanceapp.R
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+
+@Composable
+fun LoginScreen(onLoginSuccess: () -> Unit) {
+    val coroutineScope = rememberCoroutineScope()
+    var userId by remember { mutableStateOf(TextFieldValue("")) }
+    var password by remember { mutableStateOf(TextFieldValue("")) }
+    var showLoginButton by remember { mutableStateOf(false) }
+    var isButtonLoading by remember { mutableStateOf(false) }
+    var passwordVisible by remember { mutableStateOf(false) }
+
+    // Animated visibility for screen entrance
+    LaunchedEffect(Unit) {
+        delay(300) // Small delay before showing content
+        showLoginButton = true
+    }
+
+    AnimatedVisibility(
+        visible = showLoginButton,
+        enter = fadeIn(),
+        exit = fadeOut()
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(26.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(text = "Attendance App ", style = MaterialTheme.typography.headlineLarge)
+            Spacer(modifier = Modifier.height(50.dp))
+            Image(painter = painterResource(id = R.drawable.smi_logo), contentDescription = "Image", alignment = Alignment.TopCenter)
+            Spacer(modifier = Modifier.height(100.dp))
+            Text(text = "Credentials", style = MaterialTheme.typography.headlineMedium)
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            OutlinedTextField(
+                value = userId,
+                onValueChange = { userId = it },
+                textStyle = MaterialTheme.typography.bodyLarge,
+                label = { Text("User ID") },
+                modifier = Modifier.fillMaxWidth(),
+                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next)
+            )
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            OutlinedTextField(
+                value = password,
+                onValueChange = { password = it },
+                label = { Text("Password") },
+                modifier = Modifier.fillMaxWidth(),
+                textStyle = MaterialTheme.typography.bodyLarge,
+                visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
+                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
+                trailingIcon = {
+                    val image = if (passwordVisible) painterResource(id = R.drawable.baseline_visibility_24) else painterResource(
+                        id = R.drawable.baseline_visibility_off_24
+                    )
+                    IconButton(onClick = { passwordVisible = !passwordVisible }) {
+                        Icon(painter = image, contentDescription = "Toggle Password Visibility")
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(60.dp))
+
+            Button(
+                onClick = {
+                    isButtonLoading = true
+                    coroutineScope.launch {
+                        delay(1000) // Simulate network call
+                        onLoginSuccess()
+                        isButtonLoading = false
+                    }
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(50.dp),
+                enabled = !isButtonLoading
+            ) {
+                if (isButtonLoading) {
+                    CircularProgressIndicator(
+                        color = Color.White,
+                        modifier = Modifier.size(24.dp),
+                        strokeWidth = 2.dp
+                    )
+                } else {
+                    Text(
+                        text = "Login",
+                        fontSize = 20.sp
+
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun lofpre(){
+    LoginScreen {
+
+    }
+}
\ No newline at end of file