diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 26d3352..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
diff --git a/app/src/main/java/com/hadiyarajesh/notex/database/converter/InstantConverter.kt b/app/src/main/java/com/hadiyarajesh/notex/database/converter/InstantConverter.kt
index a2aa463..36bdc44 100644
--- a/app/src/main/java/com/hadiyarajesh/notex/database/converter/InstantConverter.kt
+++ b/app/src/main/java/com/hadiyarajesh/notex/database/converter/InstantConverter.kt
@@ -2,6 +2,10 @@ package com.hadiyarajesh.notex.database.converter
 
 import androidx.room.TypeConverter
 import java.time.Instant
+import java.time.LocalDate
+import java.time.LocalDateTime
+import java.time.ZoneOffset
+import java.time.format.DateTimeFormatter
 
 object InstantConverter {
     @JvmStatic
@@ -11,4 +15,14 @@ object InstantConverter {
     @JvmStatic
     @TypeConverter
     fun toInstant(value: String?): Instant? = value?.let { Instant.parse(value) }
+
+
+    @JvmStatic
+    @TypeConverter
+    fun getLocalDate(instant: Instant): LocalDate {
+        val localDateTime: LocalDateTime =
+            LocalDateTime.ofInstant(instant, ZoneOffset.systemDefault())
+        val formatter = DateTimeFormatter.ofPattern("yyyyMMdd")
+        return LocalDate.parse(localDateTime.format(formatter), formatter)
+    }
 }
diff --git a/app/src/main/java/com/hadiyarajesh/notex/ui/component/AllNotesComponents.kt b/app/src/main/java/com/hadiyarajesh/notex/ui/component/AllNotesComponents.kt
new file mode 100644
index 0000000..a175825
--- /dev/null
+++ b/app/src/main/java/com/hadiyarajesh/notex/ui/component/AllNotesComponents.kt
@@ -0,0 +1,88 @@
+package com.hadiyarajesh.notex.ui.component
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hadiyarajesh.notex.database.converter.InstantConverter
+import com.hadiyarajesh.notex.database.entity.Note
+import java.time.Instant
+
+@Composable
+fun NoteCard(note: Note) {
+    Card(
+        elevation = CardDefaults.cardElevation(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(start = 16.dp, end = 16.dp, top = 16.dp),
+        shape = RoundedCornerShape(16.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier.padding(16.dp)
+        ) {
+            note.title?.let {
+                TextSemiBold(
+                    content = it,
+                    null,
+                    MaterialTheme.typography.titleLarge, Color.Black
+                )
+            }
+            Row(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp)
+            ) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(IntrinsicSize.Min)
+                        .weight(1f)
+                ) {
+                    TextSemiBold(
+                        content = "Succeed", Modifier.padding(end = 8.dp)
+                    )
+                    Divider(
+                        color = Color.Gray, modifier = Modifier
+                            .fillMaxHeight()
+                            .width(1.dp)
+                    )
+                    TextSemiBold(content = "Goal", Modifier.padding(start = 8.dp))
+                }
+                Row(
+                    Modifier
+                        .fillMaxWidth()
+                        .weight(1f), horizontalArrangement = Arrangement.End
+                ) {
+                    TextSemiBold(
+                        content = InstantConverter.getLocalDate(note.createdOn).toString()
+                    )
+                }
+
+            }
+        }
+    }
+
+}
+
+@Preview
+@Composable
+fun NoteCardPrev() {
+    NoteCard(
+        Note(
+            noteId = 12345,
+            title = "Note title",
+            content = "Note content",
+            archived = false,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/hadiyarajesh/notex/ui/component/TextComposables.kt b/app/src/main/java/com/hadiyarajesh/notex/ui/component/TextComposables.kt
new file mode 100644
index 0000000..82a9c45
--- /dev/null
+++ b/app/src/main/java/com/hadiyarajesh/notex/ui/component/TextComposables.kt
@@ -0,0 +1,24 @@
+package com.hadiyarajesh.notex.ui.component
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+
+
+@Composable
+fun TextSemiBold(
+    content: String,
+    modifier: Modifier? = Modifier,
+    textStyle: TextStyle? = null,
+    color: Color? = null
+) {
+    Text(
+        text = content, fontWeight = FontWeight.SemiBold,
+        color = color ?: Color.Gray,
+        modifier = modifier ?: Modifier,
+        style = textStyle ?: TextStyle.Default
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/hadiyarajesh/notex/ui/note/NotesScreen.kt b/app/src/main/java/com/hadiyarajesh/notex/ui/note/NotesScreen.kt
index f85f375..2f67bf1 100644
--- a/app/src/main/java/com/hadiyarajesh/notex/ui/note/NotesScreen.kt
+++ b/app/src/main/java/com/hadiyarajesh/notex/ui/note/NotesScreen.kt
@@ -24,6 +24,7 @@ import com.hadiyarajesh.notex.R
 import com.hadiyarajesh.notex.database.entity.Note
 import com.hadiyarajesh.notex.ui.component.EmptyView
 import com.hadiyarajesh.notex.ui.component.LoadingProgressBar
+import com.hadiyarajesh.notex.ui.component.NoteCard
 import com.hadiyarajesh.notex.ui.component.RetryItem
 import java.time.Instant
 
@@ -43,7 +44,10 @@ fun NotesScreen(
                 .fillMaxSize()
                 .padding(innerPadding),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
+            verticalArrangement = if (notesViewModel.notes == null) {
+                Arrangement.Center
+            } else
+                Arrangement.Top
         ) {
             AllNotesView(
                 notes = notes,
@@ -64,10 +68,7 @@ private fun AllNotesView(
     LazyColumn(modifier = modifier) {
         items(notes) { item ->
             item?.let { note ->
-                NoteItem(
-                    note = note,
-                    onClick = onClick
-                )
+                NoteCard(note = note)
             }
         }
 
diff --git a/app/src/main/java/com/hadiyarajesh/notex/utility/Constants.kt b/app/src/main/java/com/hadiyarajesh/notex/utility/Constants.kt
index 3513199..501e093 100644
--- a/app/src/main/java/com/hadiyarajesh/notex/utility/Constants.kt
+++ b/app/src/main/java/com/hadiyarajesh/notex/utility/Constants.kt
@@ -6,4 +6,4 @@ object Constants {
     }
 }
 
-const val TAG = Constants.App.APP_NAME
\ No newline at end of file
+const val TAG = Constants.App.APP_NAME