diff --git a/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt b/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
index f1bcd49..fce6311 100644
--- a/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
+++ b/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
@@ -12,6 +12,7 @@ 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.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -50,6 +51,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
@@ -59,6 +61,7 @@ import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import com.astralquarks.notes.model.Note
 import com.astralquarks.notes.model.NoteColorPalette
+import com.astralquarks.notes.markdown.MarkdownRenderer
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.Locale
@@ -115,13 +118,6 @@ fun NoteCard(
         }
     }
 
-    val plainContentPreview = remember(note.content) {
-        if (checklistItems.isNotEmpty()) ""
-        else {
-            val sample = if (note.content.length > 250) note.content.take(250) else note.content
-            sample.replace(MD_FORMAT_REGEX, " ").trim()
-        }
-    }
 
     Card(
         onClick = onClick,
@@ -225,17 +221,15 @@ fun NoteCard(
                             }
                         }
                     }
-                } else if (plainContentPreview.isNotBlank()) {
+                } else if (note.content.isNotBlank()) {
                     Spacer(modifier = Modifier.height(4.dp))
-                    Text(
-                        text = plainContentPreview,
-                        style = MaterialTheme.typography.bodyMedium.copy(
-                            color = secondaryTextColor,
-                            lineHeight = 20.sp
-                        ),
-                        maxLines = 5,
-                        overflow = TextOverflow.Ellipsis
-                    )
+                    Box(modifier = Modifier.heightIn(max = 100.dp).clipToBounds()) {
+                        MarkdownRenderer(
+                            markdown = note.content,
+                            textColor = secondaryTextColor,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+                    }
                 }
 
                 // Tags flow row
diff --git a/web/src/main.ts b/web/src/main.ts
index c8f7415..7834c06 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -656,11 +656,6 @@ class AstralNotesApp {
       day: 'numeric'
     });
 
-    const cleanSnippet = note.content
-      .replace(/#+\s*/g, '')
-      .replace(/!\[.*?\]\(.*?\)/g, '[Image]')
-      .slice(0, 180);
-
     const borderStyle = note.colorHex && note.colorHex !== '#DEFAULT'
       ? `style="border-left: 4px solid ${note.colorHex};"`
       : '';
@@ -673,7 +668,7 @@ class AstralNotesApp {
             ${getIconSvg('pin', 16)}
           </button>
         </div>
-        <p class="note-card-snippet">${cleanSnippet || 'Empty note...'}</p>
+        <div class="note-card-snippet markdown-preview">${renderMarkdown(note.content) || 'Empty note...'}</div>
         ${note.tags.length > 0 ? `
           <div class="note-card-tags">
             ${note.tags.map(t => `<span class="tag-chip">#${t}</span>`).join('')}
diff --git a/web/src/style.css b/web/src/style.css
index def1988..010aa61 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -543,6 +543,23 @@ body {
   flex: 1;
 }
 
+.note-card-snippet.markdown-preview {
+  max-height: 150px;
+  display: block;
+}
+
+.note-card-snippet.markdown-preview > * {
+  margin-bottom: 0.5rem;
+}
+
+.note-card-snippet.markdown-preview > *:last-child {
+  margin-bottom: 0;
+}
+
+.note-card-snippet.markdown-preview p {
+  margin: 0;
+}
+
 .note-card-tags {
   display: flex;
   flex-wrap: wrap;