diff --git a/app/src/main/java/in/sminnovations/attendanceapp/MainActivity.kt b/app/src/main/java/in/sminnovations/attendanceapp/MainActivity.kt
index 091a3ce..66738e4 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/MainActivity.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/MainActivity.kt
@@ -1,17 +1,15 @@
 package `in`.sminnovations.attendanceapp
 
 import android.os.Bundle
+import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.material3.Button
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import `in`.sminnovations.attendanceapp.navigation.ui.NavigationDrawer
 import `in`.sminnovations.attendanceapp.ui.theme.SMIAttendanceTheme
 
 class MainActivity : ComponentActivity() {
@@ -20,10 +18,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             SMIAttendanceTheme {
-                Button(onClick = { Toast.makeText(this@MainActivity, "Button Clicked", Toast.LENGTH_SHORT).show()},
-                    modifier = Modifier.padding(4.dp)) {
-
-                }
+                NavigationDrawer()
             }
         }
     }
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/BottomComponents.kt b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/BottomComponents.kt
new file mode 100644
index 0000000..c6b37a7
--- /dev/null
+++ b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/BottomComponents.kt
@@ -0,0 +1,8 @@
+package `in`.sminnovations.attendanceapp.navigation.ui.components
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun BottomComponents(){
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/TopComponents.kt b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/TopComponents.kt
new file mode 100644
index 0000000..5ba8f79
--- /dev/null
+++ b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/components/TopComponents.kt
@@ -0,0 +1,70 @@
+package `in`.sminnovations.attendanceapp.navigation.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+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.MaterialTheme
+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.layout.ContentScale
+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 `in`.sminnovations.attendanceapp.R
+
+
+@Composable
+fun TopComponents() {
+    Column(
+        modifier = Modifier.fillMaxWidth().padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        // Image with rounded corners
+        Image(
+            painter = painterResource(id = R.drawable.smi_logo), // replace with your image resource
+            contentDescription = "Profile Photo",
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.size(100.dp).clip(RoundedCornerShape(16.dp))
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Name
+        Text(
+            text = "John Doe",
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.Bold,
+            fontSize = 20.sp,
+            color = MaterialTheme.colorScheme.onSurface
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ID
+        Text(
+            text = "ID: 123456",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            fontSize = 16.sp
+        )
+
+        Spacer(modifier = Modifier.height(4.dp))
+
+        // Designation
+        Text(
+            text = "Software Engineer",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.primary,
+            fontSize = 16.sp
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/navigation.kt b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/navigation.kt
index 5a64d5f..f5aee2b 100644
--- a/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/navigation.kt
+++ b/app/src/main/java/in/sminnovations/attendanceapp/navigation/ui/navigation.kt
@@ -1,2 +1,54 @@
 package `in`.sminnovations.attendanceapp.navigation.ui
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
+import kotlinx.coroutines.launch
+import `in`.sminnovations.attendanceapp.navigation.ui.components.TopComponents
+
+@Composable
+fun NavigationDrawer(){
+    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
+    val scope = rememberCoroutineScope()
+    ModalNavigationDrawer(
+        drawerState = drawerState,
+        drawerContent = {
+            ModalDrawerSheet { /* Drawer content */
+             TopComponents()
+
+            }
+        },
+    ) {
+        Scaffold(
+            floatingActionButton = {
+                ExtendedFloatingActionButton(
+                    text = { Text("Show drawer") },
+                    icon = { Icon(Icons.Filled.Add, contentDescription = "") },
+                    onClick = {
+                        scope.launch {
+                            drawerState.apply {
+                                if (isClosed) open() else close()
+                            }
+                        }
+                    }
+                )
+            }
+        ) { contentPadding ->
+            Column (modifier = Modifier.padding(contentPadding)){
+
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/in/sminnovations/attendanceapp/navigation/viewModel/navigationViewModel.kt b/app/src/main/java/in/sminnovations/attendanceapp/navigation/viewModel/navigationViewModel.kt
new file mode 100644
index 0000000..df3b161
--- /dev/null
+++ b/app/src/main/java/in/sminnovations/attendanceapp/navigation/viewModel/navigationViewModel.kt
@@ -0,0 +1,4 @@
+package `in`.sminnovations.attendanceapp.navigation.viewModel
+
+class navigationViewModel {
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/smi_logo.png b/app/src/main/res/drawable/smi_logo.png
new file mode 100644
index 0000000..e3e2ea6
Binary files /dev/null and b/app/src/main/res/drawable/smi_logo.png differ