diff --git a/app/src/main/java/come/stormborntales/notevault/ui/screens/MainScreen.kt b/app/src/main/java/come/stormborntales/notevault/ui/screens/MainScreen.kt
index c90430a..ed2a795 100644
--- a/app/src/main/java/come/stormborntales/notevault/ui/screens/MainScreen.kt
+++ b/app/src/main/java/come/stormborntales/notevault/ui/screens/MainScreen.kt
@@ -9,11 +9,14 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.platform.LocalContext
@@ -43,6 +46,95 @@ fun getFileNameFromUri(context: Context, uri: Uri): String? {
     return null
 }
 
+@Composable
+fun NoteCard(note: NoteEntry) {
+    val context = LocalContext.current
+    val imageBitmap = remember(note.images) {
+        note.images.firstOrNull()?.let { loadImageBitmap(context, it) }
+    }
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 8.dp),
+        shape = RoundedCornerShape(16.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+    ) {
+        Row(modifier = Modifier.padding(16.dp)) {
+            // Linkes Vorschaubild
+            imageBitmap?.let {
+                Image(
+                    bitmap = it,
+                    contentDescription = "Vorschaubild",
+                    modifier = Modifier
+                        .size(120.dp)
+                        .clip(RoundedCornerShape(12.dp))
+                )
+                Spacer(modifier = Modifier.width(16.dp))
+            }
+
+            // Rechte Info-Spalte
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .align(Alignment.CenterVertically)
+            ) {
+                Text(
+                    text = note.title,
+                    style = MaterialTheme.typography.titleMedium
+                )
+
+                note.composer?.let {
+                    Text("von $it", style = MaterialTheme.typography.labelMedium)
+                }
+
+                Spacer(modifier = Modifier.height(4.dp))
+
+                note.year?.let {
+                    Text("Jahr: $it", style = MaterialTheme.typography.bodySmall)
+                }
+
+                note.genre?.let {
+                    Text("Genre: $it", style = MaterialTheme.typography.bodySmall)
+                }
+
+                note.description?.let {
+                    Text("Beschreibung: $it", style = MaterialTheme.typography.bodySmall, maxLines = 2)
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    OutlinedButton(
+                        onClick = { /* TODO */ },
+                        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                    ) {
+                        Text("Anzeigen", style = MaterialTheme.typography.labelLarge)
+                    }
+                    OutlinedButton(
+                        onClick = { /* TODO */ },
+                        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                    ) {
+                        Text("Bearbeiten", style = MaterialTheme.typography.labelLarge)
+                    }
+                    OutlinedButton(
+                        onClick = { /* TODO */ },
+                        colors = ButtonDefaults.outlinedButtonColors(
+                            contentColor = MaterialTheme.colorScheme.error
+                        ),
+                        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                    ) {
+                        Text("Löschen", style = MaterialTheme.typography.labelLarge)
+                    }
+                }
+            }
+        }
+    }
+}
+
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainScreen(
@@ -73,37 +165,14 @@ fun MainScreen(
                 .fillMaxSize()
                 .padding(16.dp)
         ) {
-            items(dummyNotes) { noteUri ->
-                val imageBitmap = loadImageBitmap(context, noteUri.images[0])
-                val fileName = noteUri.title
-
-                if (imageBitmap != null) {
-                    Card(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(8.dp),
-                        elevation = CardDefaults.cardElevation(4.dp)
-                    ) {
-                        Row(modifier = Modifier.padding(8.dp)) {
-                            Image(
-                                bitmap = imageBitmap,
-                                contentDescription = "Notenblatt Vorschau",
-                                modifier = Modifier
-                                    .size(80.dp) // oder width = 80.dp, height = 100.dp
-                                    .padding(end = 8.dp)
-                            )
-                            Text(
-                                text = fileName ?: "Unbekannter Dateiname",
-                                style = MaterialTheme.typography.bodyMedium,
-                                modifier = Modifier.weight(2f)
-                            )
-                        }
-                    }
-                }
+            items(dummyNotes) { note ->
+                NoteCard(note = note)
             }
         }
     }
 
 
 
+
+
 }
\ No newline at end of file