diff --git a/memento-mobile/app/(tabs)/home.tsx b/memento-mobile/app/(tabs)/home.tsx
index eeace4f..ef7fc27 100644
--- a/memento-mobile/app/(tabs)/home.tsx
+++ b/memento-mobile/app/(tabs)/home.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { CalendarDays, Sparkles, BookOpen } from 'lucide-react-native'
+import { CalendarDays, Search, BookOpen, Clock, ChevronRight } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { useAuthStore } from '@/lib/store'
@@ -31,7 +31,7 @@ export default function HomeScreen() {
       const res = await apiFetch(ENDPOINTS.notes())
       if (res.ok) {
         const data = await res.json()
-        setRecentNotes((data.notes ?? []).slice(0, 10))
+        setRecentNotes((data.notes ?? []).slice(0, 12))
       }
     } finally {
       setLoading(false)
@@ -49,56 +49,80 @@ export default function HomeScreen() {
     }
   }
 
-  const formatDate = (iso: string) =>
-    new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+  const now = new Date()
+  const hour = now.getHours()
+  const greeting = hour < 12 ? 'Bonjour' : hour < 18 ? 'Bon après-midi' : 'Bonsoir'
+  const firstName = user?.name?.split(' ')[0] ?? ''
 
   return (
     <SafeAreaView style={s.safe}>
       <ScrollView
-        style={{ flex: 1 }}
+        showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
       >
-        <View style={s.headerBlock}>
-          <Text style={s.greeting}>
-            Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
-          </Text>
-          <Text style={s.date}>
-            {new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
-          </Text>
+        {/* Header */}
+        <View style={s.header}>
+          <View>
+            <Text style={s.greeting}>{greeting}{firstName ? `, ${firstName}` : ''}</Text>
+            <Text style={s.date}>{now.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}</Text>
+          </View>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.searchBtn}>
+            <Search size={18} color={C.ink} />
+          </TouchableOpacity>
         </View>
 
+        {/* Quick actions */}
         <View style={s.quickRow}>
-          <TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
-            <CalendarDays size={22} color={C.brand} />
+          <TouchableOpacity onPress={handleDailyNote} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#f3ece4' }]}>
+              <CalendarDays size={20} color={C.brand} />
+            </View>
             <Text style={s.quickLabel}>Note du jour</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
-            <BookOpen size={22} color={C.brand} />
+          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
+              <BookOpen size={20} color="#5b7ec7" />
+            </View>
             <Text style={s.quickLabel}>Carnets</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
-            <Sparkles size={22} color={C.brand} />
-            <Text style={s.quickLabel}>Recherche IA</Text>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
+              <Search size={20} color="#4a9b61" />
+            </View>
+            <Text style={s.quickLabel}>Recherche</Text>
           </TouchableOpacity>
         </View>
 
-        <View style={s.recentBlock}>
-          <Text style={s.sectionLabel}>Récentes</Text>
+        {/* Recent notes */}
+        <View style={s.section}>
+          <View style={s.sectionHeader}>
+            <Clock size={13} color={C.concrete} />
+            <Text style={s.sectionLabel}>Récentes</Text>
+          </View>
+
           {loading
-            ? <ActivityIndicator color={C.brand} />
+            ? <ActivityIndicator color={C.brand} style={{ marginTop: 24 }} />
             : recentNotes.length === 0
               ? <Text style={s.empty}>Aucune note pour l'instant.</Text>
-              : recentNotes.map((note) => (
-                  <TouchableOpacity key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={s.noteCard}>
-                    <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
-                    <View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
-                      {note.notebookName && <Text style={s.noteMeta}>{note.notebookName}</Text>}
-                      <Text style={s.noteMeta}>{formatDate(note.updatedAt)}</Text>
+              : recentNotes.map((note, i) => (
+                  <TouchableOpacity
+                    key={note.id}
+                    onPress={() => router.push(`/note/${note.id}`)}
+                    style={[s.noteRow, i === recentNotes.length - 1 && { borderBottomWidth: 0 }]}
+                    activeOpacity={0.6}
+                  >
+                    <View style={{ flex: 1 }}>
+                      <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
+                      {note.notebookName && <Text style={s.noteMeta} numberOfLines={1}>{note.notebookName}</Text>}
+                    </View>
+                    <View style={s.noteRight}>
+                      <Text style={s.noteDate}>{new Date(note.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}</Text>
+                      <ChevronRight size={12} color={C.border} />
                     </View>
                   </TouchableOpacity>
                 ))}
         </View>
-        <View style={{ height: 32 }} />
+        <View style={{ height: 40 }} />
       </ScrollView>
     </SafeAreaView>
   )
@@ -106,16 +130,21 @@ export default function HomeScreen() {
 
 const s = StyleSheet.create({
   safe: { flex: 1, backgroundColor: C.paper },
-  headerBlock: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
-  greeting: { fontSize: 22, fontWeight: '700', fontStyle: 'italic', color: C.ink },
-  date: { fontSize: 13, color: C.concrete, marginTop: 2 },
-  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginTop: 16 },
-  quickBtn: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 14, alignItems: 'center', gap: 8 },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 16 },
+  greeting: { fontSize: 22, fontWeight: '700', color: C.ink, letterSpacing: -0.3 },
+  date: { fontSize: 13, color: C.concrete, marginTop: 3, textTransform: 'capitalize' },
+  searchBtn: { width: 38, height: 38, borderRadius: 19, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, alignItems: 'center', justifyContent: 'center' },
+  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginBottom: 24 },
+  quickCard: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, alignItems: 'center', gap: 10 },
+  quickIcon: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
   quickLabel: { fontSize: 11, fontWeight: '600', color: C.ink, textAlign: 'center' },
-  recentBlock: { paddingHorizontal: 20, marginTop: 24 },
-  sectionLabel: { fontSize: 10, fontWeight: '800', letterSpacing: 2, textTransform: 'uppercase', color: C.concrete, marginBottom: 12 },
-  empty: { color: C.concrete, fontSize: 14 },
-  noteCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
-  noteTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
-  noteMeta: { fontSize: 11, color: C.concrete },
+  section: { marginHorizontal: 20, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, overflow: 'hidden' },
+  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 16, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: '#f8f6f2' },
+  sectionLabel: { fontSize: 11, fontWeight: '700', color: C.concrete, textTransform: 'uppercase', letterSpacing: 1 },
+  empty: { color: C.concrete, fontSize: 14, textAlign: 'center', padding: 24 },
+  noteRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 13, borderBottomWidth: 1, borderBottomColor: C.border },
+  noteTitle: { fontSize: 14, fontWeight: '500', color: C.ink },
+  noteMeta: { fontSize: 11, color: C.concrete, marginTop: 2 },
+  noteRight: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  noteDate: { fontSize: 11, color: C.concrete },
 })
diff --git a/memento-mobile/app/(tabs)/notebooks.tsx b/memento-mobile/app/(tabs)/notebooks.tsx
index 9c02947..16cd899 100644
--- a/memento-mobile/app/(tabs)/notebooks.tsx
+++ b/memento-mobile/app/(tabs)/notebooks.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { ChevronRight } from 'lucide-react-native'
+import { ChevronRight, BookOpen, Folder } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '../_layout'
@@ -14,9 +14,22 @@ interface Notebook {
   id: string
   name: string
   icon: string | null
+  color: string | null
   _count: { notes: number }
 }
 
+// icônes Lucide stockées en string → afficher composant, sinon emoji
+const LUCIDE_ICONS = new Set(['folder','book','archive','bookmark','file','note','inbox'])
+
+function NotebookIcon({ icon, color }: { icon: string | null, color: string | null }) {
+  const tint = color || C.brand
+  if (!icon || LUCIDE_ICONS.has(icon.toLowerCase())) {
+    return <Folder size={18} color={tint} />
+  }
+  // emoji ou autre caractère unicode
+  return <Text style={{ fontSize: 18, lineHeight: 22 }}>{icon}</Text>
+}
+
 export default function NotebooksScreen() {
   const [notebooks, setNotebooks] = useState<Notebook[]>([])
   const [loading, setLoading] = useState(true)
@@ -49,7 +62,9 @@ export default function NotebooksScreen() {
   return (
     <SafeAreaView style={s.safe}>
       <View style={s.header}>
+        <BookOpen size={18} color={C.brand} style={{ marginRight: 8 }} />
         <Text style={s.title}>Carnets</Text>
+        <Text style={s.count}>{notebooks.length}</Text>
       </View>
       <FlatList
         data={notebooks}
@@ -57,16 +72,23 @@ export default function NotebooksScreen() {
         contentContainerStyle={s.list}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
         renderItem={({ item }) => (
-          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card}>
-            <Text style={s.icon}>{item.icon ?? '📓'}</Text>
-            <View style={{ flex: 1 }}>
-              <Text style={s.cardTitle}>{item.name}</Text>
-              <Text style={s.cardMeta}>{item._count?.notes ?? 0} notes</Text>
+          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card} activeOpacity={0.7}>
+            <View style={[s.iconWrap, { backgroundColor: (item.color || C.brand) + '18' }]}>
+              <NotebookIcon icon={item.icon} color={item.color} />
             </View>
-            <ChevronRight size={16} color={C.concrete} />
+            <View style={{ flex: 1 }}>
+              <Text style={s.cardTitle} numberOfLines={1}>{item.name}</Text>
+              <Text style={s.cardMeta}>{item._count?.notes ?? 0} note{(item._count?.notes ?? 0) !== 1 ? 's' : ''}</Text>
+            </View>
+            <ChevronRight size={14} color={C.border} />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
+        ListEmptyComponent={
+          <View style={s.emptyWrap}>
+            <BookOpen size={32} color={C.border} />
+            <Text style={s.empty}>Aucun carnet</Text>
+          </View>
+        }
       />
     </SafeAreaView>
   )
@@ -74,12 +96,14 @@ export default function NotebooksScreen() {
 
 const s = StyleSheet.create({
   safe: { flex: 1, backgroundColor: C.paper },
-  header: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
-  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink },
-  list: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 32 },
-  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
-  icon: { fontSize: 24, marginRight: 12 },
-  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
-  cardMeta: { fontSize: 12, color: C.concrete, marginTop: 2 },
-  empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
+  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: C.border },
+  title: { fontSize: 20, fontWeight: '700', color: C.ink, flex: 1 },
+  count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden' },
+  list: { padding: 12 },
+  card: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, marginBottom: 8 },
+  iconWrap: { width: 38, height: 38, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
+  cardTitle: { fontSize: 14, fontWeight: '600', color: C.ink, marginBottom: 2 },
+  cardMeta: { fontSize: 12, color: C.concrete },
+  emptyWrap: { alignItems: 'center', marginTop: 60, gap: 12 },
+  empty: { color: C.concrete, fontSize: 14 },
 })
diff --git a/memento-mobile/app/note/[id].tsx b/memento-mobile/app/note/[id].tsx
index 9f31563..fc81aaf 100644
--- a/memento-mobile/app/note/[id].tsx
+++ b/memento-mobile/app/note/[id].tsx
@@ -7,7 +7,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { ArrowLeft, Share2 } from 'lucide-react-native'
 import { WebView } from 'react-native-webview'
-import { marked } from 'marked'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '../_layout'
@@ -20,10 +19,11 @@ interface Note {
   notebookName?: string
 }
 
+// Le markdown est parsé côté WebView (JS natif) — évite tout problème Metro bundler
 function buildHtml(content: string, title: string) {
-  // marked runs in Node/JS context — parse server-side, inject final HTML
-  marked.setOptions({ breaks: true, gfm: true })
-  const bodyHtml = marked.parse(content) as string
+  // On passe le contenu comme JSON pour éviter les problèmes d'échappement
+  const safeContent = JSON.stringify(content)
+  const safeTitle = JSON.stringify(title || 'Sans titre')
 
   return `<!DOCTYPE html>
 <html>
@@ -46,12 +46,9 @@ function buildHtml(content: string, title: string) {
     background: var(--paper); padding: 8px 20px 64px;
     word-break: break-word;
   }
-  .note-title {
-    font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
-    color: var(--ink); margin: 20px 0 4px; line-height: 1.25;
-  }
+  .note-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); margin: 20px 0 4px; line-height: 1.25; }
   .note-meta { font-size: 12px; color: var(--concrete); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
-  h1 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; line-height: 1.3; }
+  h1 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; }
   h2 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
   h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
   h4, h5, h6 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; color: var(--concrete); }
@@ -59,17 +56,9 @@ function buildHtml(content: string, title: string) {
   ul, ol { padding-left: 24px; margin: 0 0 14px; }
   li { margin-bottom: 6px; }
   li::marker { color: var(--brand); }
-  li > ul, li > ol { margin-top: 4px; margin-bottom: 2px; }
-  input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; }
-  blockquote {
-    border-left: 3px solid var(--brand); margin: 16px 0; padding: 10px 14px;
-    background: #f7f2ec; border-radius: 0 10px 10px 0; color: #5a5a52; font-style: italic;
-  }
+  blockquote { border-left: 3px solid var(--brand); margin: 16px 0; padding: 10px 14px; background: #f7f2ec; border-radius: 0 10px 10px 0; color: #5a5a52; font-style: italic; }
   blockquote p { margin: 0; }
-  code {
-    background: var(--code-bg); padding: 2px 7px; border-radius: 6px;
-    font-size: 13px; font-family: 'Menlo', 'Courier New', monospace; color: var(--brand);
-  }
+  code { background: var(--code-bg); padding: 2px 7px; border-radius: 6px; font-size: 13px; font-family: 'Menlo', 'Courier New', monospace; color: var(--brand); }
   pre { background: var(--dark-bg); padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; }
   pre code { background: none; padding: 0; color: #e8e6e0; font-size: 13px; line-height: 1.6; }
   a { color: var(--brand); text-decoration: none; border-bottom: 1px solid #d4b896; }
@@ -85,9 +74,68 @@ function buildHtml(content: string, title: string) {
 </style>
 </head>
 <body>
-<div class="note-title">${title || 'Sans titre'}</div>
-<div class="note-meta">Note Momento</div>
-<div id="content">${bodyHtml}</div>
+<div class="note-title" id="title"></div>
+<div class="note-meta" id="meta"></div>
+<div id="content"></div>
+<script>
+(function() {
+  function esc(s) {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
+  }
+  function inline(s) {
+    return s
+      .replace(/\*\*\*(.+?)\*\*\*/g,'<strong><em>$1</em></strong>')
+      .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+      .replace(/__(.+?)__/g,'<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g,'<em>$1</em>')
+      .replace(/_(.+?)_/g,'<em>$1</em>')
+      .replace(/~~(.+?)~~/g,'<del>$1</del>')
+      .replace(/\`([^\`]+)\`/g,'<code>'+esc('$1')+'</code>')
+      .replace(/\[(.+?)\]\((.+?)\)/g,'<a href="$2">$1</a>')
+  }
+  function mdToHtml(md) {
+    var lines = md.split('\n')
+    var html = ''
+    var inCode = false, codeLang = '', codeLines = []
+    var inList = false, listType = '', listItems = []
+    function flushList() {
+      if (!inList) return
+      var tag = listType === 'ul' ? 'ul' : 'ol'
+      html += '<'+tag+'>' + listItems.map(function(l){return '<li>'+inline(l)+'</li>'}).join('') + '</'+tag+'>'
+      inList = false; listItems = []
+    }
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i]
+      if (/^\`\`\`/.test(line)) {
+        if (!inCode) { flushList(); inCode=true; codeLang=line.slice(3).trim(); codeLines=[]; continue }
+        else { inCode=false; html+='<pre><code>'+esc(codeLines.join('\n'))+'</code></pre>'; continue }
+      }
+      if (inCode) { codeLines.push(line); continue }
+      if (/^> /.test(line)) { flushList(); html+='<blockquote><p>'+inline(line.slice(2))+'</p></blockquote>'; continue }
+      if (/^#{6} /.test(line)) { flushList(); html+='<h6>'+inline(line.slice(7))+'</h6>'; continue }
+      if (/^#{5} /.test(line)) { flushList(); html+='<h5>'+inline(line.slice(6))+'</h5>'; continue }
+      if (/^#{4} /.test(line)) { flushList(); html+='<h4>'+inline(line.slice(5))+'</h4>'; continue }
+      if (/^### /.test(line)) { flushList(); html+='<h3>'+inline(line.slice(4))+'</h3>'; continue }
+      if (/^## /.test(line)) { flushList(); html+='<h2>'+inline(line.slice(3))+'</h2>'; continue }
+      if (/^# /.test(line)) { flushList(); html+='<h1>'+inline(line.slice(2))+'</h1>'; continue }
+      if (/^---+$/.test(line.trim()) || /^\*\*\*+$/.test(line.trim())) { flushList(); html+='<hr>'; continue }
+      var ulM = line.match(/^[-*+] (.*)/)
+      if (ulM) { if (inList&&listType!=='ul') flushList(); inList=true; listType='ul'; listItems.push(ulM[1]); continue }
+      var olM = line.match(/^\d+\. (.*)/)
+      if (olM) { if (inList&&listType!=='ol') flushList(); inList=true; listType='ol'; listItems.push(olM[1]); continue }
+      if (line.trim()==='') { flushList(); if (html && !html.endsWith('<br>')) html+='<br>'; continue }
+      flushList()
+      html += '<p>'+inline(line)+'</p>'
+    }
+    flushList()
+    return html
+  }
+  var md = ${safeContent}
+  var title = ${safeTitle}
+  document.getElementById('title').textContent = title
+  document.getElementById('content').innerHTML = mdToHtml(md)
+})()
+</script>
 </body>
 </html>`
 }
@@ -125,7 +173,13 @@ export default function NoteScreen() {
       {loading
         ? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
         : note
-          ? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
+          ? <WebView
+              source={{ html: buildHtml(note.content, note.title) }}
+              style={{ flex: 1, backgroundColor: C.paper }}
+              scrollEnabled
+              showsVerticalScrollIndicator={false}
+              originWhitelist={['*']}
+            />
           : <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
     </SafeAreaView>
   )
diff --git a/memento-mobile/package.json b/memento-mobile/package.json
index dfd86be..a171e5b 100644
--- a/memento-mobile/package.json
+++ b/memento-mobile/package.json
@@ -20,7 +20,6 @@
     "expo-splash-screen": "~31.0.13",
     "expo-status-bar": "~3.0.9",
     "lucide-react-native": "^0.477.0",
-    "marked": "^18.0.4",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "~5.6.0",