diff --git a/components/ListItem.vue b/components/ListItem.vue
index 2cef896..f31e195 100644
--- a/components/ListItem.vue
+++ b/components/ListItem.vue
@@ -29,7 +29,7 @@
             class="text-xl font-bold leading-8 tracking-tight text-gray-900 dark:text-gray-100"
           >
             {{ item.title }}
-            <DraftBadge v-if="!item.published_at"></DraftBadge>
+            <DraftBadge v-if="isDraft(item)"></DraftBadge>
           </h3>
           <p class="text-gray-800 dark:text-gray-200">
             {{ item.title_en }}
@@ -48,6 +48,9 @@
 <script setup lang="ts">
 import { DateTime } from 'luxon'
 import { Post } from '@/types/index'
+import { usePost } from '@/composables/usePost'
+
+const { isDraft } = usePost()
 
 defineProps<{
   item: Post
diff --git a/components/ListPage.vue b/components/ListPage.vue
index 485cb3c..c42bc87 100644
--- a/components/ListPage.vue
+++ b/components/ListPage.vue
@@ -27,12 +27,14 @@
 import { ref } from 'vue'
 import { DateTime } from 'luxon'
 import { Post } from '@/types/index'
+import { usePost } from '@/composables/usePost'
 
 const props = defineProps<{
   page: Post
   posts: Post[]
 }>()
 
+const { isDraft } = usePost()
 const searchValue = ref('')
 
 const list = props.posts.map((post) => {
@@ -45,9 +47,8 @@ const list = props.posts.map((post) => {
 
 const filteredPosts = computed(() => {
   return list.filter((post: Post) => {
-    const isDraft = !post.published_at
     const isProduct = !process.dev
-    if (isProduct && isDraft) {
+    if (isProduct && isDraft(post)) {
       return false
     }
 
diff --git a/types/index.d.ts b/types/index.d.ts
index ea19d03..053f0aa 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -10,6 +10,7 @@ interface Post extends ParsedContent {
   published_at: string
   updated_at: string
   tags: string[]
+  draft: boolean
 }
 
 interface ToC {