diff --git a/src/components/PostItem.tsx b/src/components/PostItem.tsx
new file mode 100644
index 0000000..cc608df
--- /dev/null
+++ b/src/components/PostItem.tsx
@@ -0,0 +1,31 @@
+import { Post } from '../model/posts/posts.ts'
+
+interface PostItemProps {
+  post: Post
+}
+
+export default function PostItem({ post }: PostItemProps) {
+  const formattedDate = post.createdAt.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return (
+    <article className="w-full p-4" key={post.postId}>
+      <div className="text-sm text-gray-500 mb-3">{formattedDate}</div>
+
+      <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
+
+      {post.media.length > 0 && (
+        <div className="grid gap-4 grid-cols-1">
+          {post.media.map((src) => (
+            <img key={src} src={src} alt="" className="w-full h-auto" loading="lazy" />
+          ))}
+        </div>
+      )}
+    </article>
+  )
+}