diff --git a/posts/after.mdx b/posts/after.mdx
index 92f52e8..f21a61a 100644
--- a/posts/after.mdx
+++ b/posts/after.mdx
@@ -1,6 +1,7 @@
 ---
 title: Example after post
 date: 2026-02-28
+draft: true
 ---
 
 ## After
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
index 0ce8b21..4f75434 100644
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -4,8 +4,8 @@ import '@styles/prose.css';
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 
-// return all posts
-let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.PROD );
+// return all posts in dev, only non-draft in prod
+let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.DEV );
 entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 const posts = await Promise.all(entries.map(async entry => {
     const { remarkPluginFrontmatter } = await render(entry);
@@ -24,6 +24,7 @@ const posts = await Promise.all(entries.map(async entry => {
                         <a href={`/${p.id}`} data-astro-prefetch>
                             {p.data.title}
                         </a>
+                        {p.data.draft && <span class="draft-notice">Draft</span>}
                     </h2>
                     <p>
                         {p.remarkPluginFrontmatter.description}
@@ -55,6 +56,20 @@ const posts = await Promise.all(entries.map(async entry => {
         margin-left: 0;
     }
 
+    h2 {
+        display: flex;
+        gap: 01rem;
+        align-items: center;
+    }
+
+    .draft-notice {
+        font-size: 0.5em;
+        font-family: 'Figtree Variable', sans-serif;
+        background-color: var(--accent-color);
+        padding: 0.05em 0.5em;
+        border-radius: 20% / 50%;
+    }
+
     hr {
         border: none;
         height: 1px;