diff --git a/.w4c/preview.svg b/.w4c/preview.svg
new file mode 100644
index 0000000..82cac6d
--- /dev/null
+++ b/.w4c/preview.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-label="Simple Todo List template preview">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0f172a"/>
+      <stop offset="1" stop-color="#1e293b"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#818cf8"/>
+      <stop offset="1" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+  <rect width="640" height="360" rx="18" fill="url(#bg)"/>
+
+  <!-- App card -->
+  <rect x="150" y="52" width="340" height="256" rx="16" fill="#0b1220" stroke="#334155" stroke-width="2"/>
+
+  <!-- Title -->
+  <rect x="178" y="80" width="130" height="14" rx="7" fill="#e2e8f0"/>
+  <rect x="178" y="102" width="72" height="8" rx="4" fill="#64748b"/>
+
+  <!-- Composer -->
+  <rect x="178" y="128" width="284" height="36" rx="9" fill="#0f172a" stroke="#334155" stroke-width="2"/>
+  <rect x="192" y="144" width="140" height="7" rx="3.5" fill="#64748b"/>
+  <rect x="386" y="134" width="66" height="24" rx="7" fill="url(#accent)"/>
+  <rect x="404" y="144" width="30" height="5" rx="2.5" fill="#eef2ff"/>
+
+  <!-- Rows -->
+  <g>
+    <rect x="178" y="178" width="284" height="34" rx="9" fill="#111827" stroke="#334155" stroke-width="1.6"/>
+    <rect x="192" y="187" width="16" height="16" rx="5" fill="#22c55e"/>
+    <path d="M196 195 l3 3 l6 -7" fill="none" stroke="#0b1220" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="218" y="191" width="150" height="8" rx="4" fill="#475569"/>
+    <rect x="430" y="191" width="18" height="8" rx="4" fill="#334155"/>
+  </g>
+  <g>
+    <rect x="178" y="218" width="284" height="34" rx="9" fill="#111827" stroke="#334155" stroke-width="1.6"/>
+    <rect x="192" y="227" width="16" height="16" rx="5" fill="none" stroke="#6366f1" stroke-width="2"/>
+    <rect x="218" y="231" width="196" height="8" rx="4" fill="#94a3b8"/>
+    <rect x="430" y="231" width="18" height="8" rx="4" fill="#334155"/>
+  </g>
+  <g>
+    <rect x="178" y="258" width="284" height="34" rx="9" fill="#111827" stroke="#334155" stroke-width="1.6"/>
+    <rect x="192" y="267" width="16" height="16" rx="5" fill="none" stroke="#6366f1" stroke-width="2"/>
+    <rect x="218" y="271" width="120" height="8" rx="4" fill="#94a3b8"/>
+    <rect x="430" y="271" width="18" height="8" rx="4" fill="#334155"/>
+  </g>
+
+  <!-- Footer chips -->
+  <rect x="178" y="306" width="60" height="12" rx="6" fill="url(#accent)" opacity="0.35"/>
+  <rect x="244" y="306" width="44" height="12" rx="6" fill="#334155"/>
+  <rect x="294" y="306" width="44" height="12" rx="6" fill="#334155"/>
+</svg>