diff --git a/src/components/Posts/PostCard.jsx b/src/components/Posts/PostCard.jsx
new file mode 100644
index 0000000..52ca087
--- /dev/null
+++ b/src/components/Posts/PostCard.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+function getKmFromPost(post) {
+  return (
+    post.km ??
+    post.distance_km ??
+    post.distanceKm ??
+    post.dist_km ??
+    null
+  );
+}
+
+export default function PostCard({ post, selected, onSelect }) {
+  const title = post.title || post.name || "Post";
+
+  const fullBody =
+    post.body || post.content || post.text || "";
+
+  // texte court dans le Sociowall
+  const body =
+    fullBody.length > 80 ? fullBody.slice(0, 77) + "..." : fullBody;
+
+  const km = getKmFromPost(post);
+
+  function handleClick() {
+    if (onSelect) onSelect(post);
+  }
+
+  return (
+    <article
+      className={"post-card" + (selected ? " selected" : "")}
+      onClick={handleClick}
+    >
+      <h3>{title}</h3>
+      <p>{body}</p>
+      {km != null && <span className="post-km">{km} km</span>}
+    </article>
+  );
+}
diff --git a/src/components/Posts/PostList.jsx b/src/components/Posts/PostList.jsx
new file mode 100644
index 0000000..e7fba56
--- /dev/null
+++ b/src/components/Posts/PostList.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useMemo } from "react";
+import PostCard from "./PostCard";
+
+function getKmFromPost(post) {
+  return (
+    post.km ??
+    post.distance_km ??
+    post.distanceKm ??
+    post.dist_km ??
+    null
+  );
+}
+
+export default function PostList({
+  posts,
+  loading,
+  error,
+  selectedPost,
+  onSelectPost,
+}) {
+  const [kmFilter, setKmFilter] = useState(1000);
+
+  const filtered = useMemo(
+    () =>
+      posts.filter((p) => {
+        const km = getKmFromPost(p);
+        if (km == null) return true;
+        return km <= kmFilter;
+      }),
+    [posts, kmFilter]
+  );
+
+  return (
+    <div className="post-list">
+      <div className="post-list-header">
+        <div className="km-filter">
+          <label>
+            Rayon : <span>{kmFilter} km</span>
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={1000}
+            value={kmFilter}
+            onChange={(e) => setKmFilter(Number(e.target.value))}
+          />
+        </div>
+      </div>
+
+      {loading && <p className="status-text">Chargement...</p>}
+      {error && <p className="status-text status-error">{error}</p>}
+
+      {filtered.map((p) => (
+        <PostCard
+          key={p.id ?? p._id}
+          post={p}
+          selected={
+            selectedPost &&
+            (selectedPost.id ?? selectedPost._id) === (p.id ?? p._id)
+          }
+          onSelect={onSelectPost}
+        />
+      ))}
+
+      {!loading && filtered.length === 0 && (
+        <p className="status-text">Aucun post dans ce rayon.</p>
+      )}
+    </div>
+  );
+}