diff --git a/website/assets/screenshot-mobile-sidebar.png b/website/assets/screenshot-mobile-sidebar.png
deleted file mode 100644
index effd9e0..0000000
Binary files a/website/assets/screenshot-mobile-sidebar.png and /dev/null differ
diff --git a/website/assets/screenshot-tags.png b/website/assets/screenshot-tags.png
deleted file mode 100644
index 973b70d..0000000
Binary files a/website/assets/screenshot-tags.png and /dev/null differ
diff --git a/website/index.html b/website/index.html
index 1a6c0ef..9e7afd8 100644
--- a/website/index.html
+++ b/website/index.html
@@ -208,27 +208,43 @@
 					<div class="screenshot-label">Notes grid view</div>
 				</div>
 				<div class="screenshot-card animate-in delay-2">
-					<img src="assets/screenshot-editor.png" alt="Rich text editor with formatting toolbar" width="1280" height="800" loading="lazy">
+					<img src="assets/screenshot-editor.png" alt="Rich text editor with formatting toolbar and self-hosting stack note" width="1280" height="800" loading="lazy">
 					<div class="screenshot-label">Rich text editor</div>
 				</div>
 				<div class="screenshot-card animate-in delay-3">
-					<img src="assets/screenshot-tags.png" alt="Tag filtering showing bretzel-tagged notes" width="1280" height="800" loading="lazy">
-					<div class="screenshot-label">Tag filtering</div>
+					<img src="assets/screenshot-checklist.png" alt="Checklist note with bretzel ingredients and checkboxes" width="1280" height="800" loading="lazy">
+					<div class="screenshot-label">Checklist mode</div>
+				</div>
+				<div class="screenshot-card animate-in delay-4">
+					<img src="assets/screenshot-sharing.png" alt="Share dialog with collaborator management" width="1280" height="800" loading="lazy">
+					<div class="screenshot-label">Note sharing</div>
+				</div>
+				<div class="screenshot-card animate-in delay-5">
+					<img src="assets/screenshot-history.png" alt="Note version history with side-by-side preview" width="1280" height="800" loading="lazy">
+					<div class="screenshot-label">Version history</div>
+				</div>
+				<div class="screenshot-card animate-in delay-6">
+					<img src="assets/screenshot-attachments.png" alt="Note with pixel-art bretzel featured image" width="1280" height="800" loading="lazy">
+					<div class="screenshot-label">Image attachments</div>
+				</div>
+				<div class="screenshot-card animate-in delay-1">
+					<img src="assets/screenshot-api.png" alt="API keys and MCP client configuration for Claude Code" width="1280" height="800" loading="lazy">
+					<div class="screenshot-label">API & MCP</div>
 				</div>
 			</div>
 			<h3 class="screenshots-subtitle animate-in">Mobile</h3>
 			<div class="screenshots-grid screenshots-grid-mobile">
 				<div class="screenshot-card screenshot-card-mobile animate-in delay-1">
-					<img src="assets/screenshot-mobile-grid.png" alt="Mobile grid view with notes and tags" width="390" height="844" loading="lazy">
+					<img src="assets/screenshot-mobile-grid.png" alt="Mobile notes grid with tags and colorful cards" width="390" height="844" loading="lazy">
 					<div class="screenshot-label">Notes view</div>
 				</div>
 				<div class="screenshot-card screenshot-card-mobile animate-in delay-2">
-					<img src="assets/screenshot-mobile-editor.png" alt="Mobile checklist editor" width="390" height="844" loading="lazy">
-					<div class="screenshot-label">Checklist editor</div>
+					<img src="assets/screenshot-mobile-editor.png" alt="Mobile rich text editor with self-hosting stack note" width="390" height="844" loading="lazy">
+					<div class="screenshot-label">Rich text editor</div>
 				</div>
 				<div class="screenshot-card screenshot-card-mobile animate-in delay-3">
-					<img src="assets/screenshot-mobile-sidebar.png" alt="Mobile sidebar with tags" width="390" height="844" loading="lazy">
-					<div class="screenshot-label">Sidebar & tags</div>
+					<img src="assets/screenshot-mobile-checklist.png" alt="Mobile checklist with bretzel ingredients" width="390" height="844" loading="lazy">
+					<div class="screenshot-label">Checklist mode</div>
 				</div>
 			</div>
 		</div>