diff --git a/client/public/posts.html b/client/public/posts.html
index 7f31366..abc43d2 100644
--- a/client/public/posts.html
+++ b/client/public/posts.html
@@ -13,6 +13,9 @@
   <link defer rel="stylesheet" href="css/themes.css" media="all">
   <link defer rel="stylesheet" href="css/general.css" media="all">
 
+  <script defer type="module" src="js/remote.mjs"></script>
+  <script defer type="module" src="posts.mjs"></script>
+
 </head>
 <body>
   <noscript>
@@ -27,6 +30,9 @@
       <a href="/posts">Posts</a>|
       <a href="/qa">QA</a>
     </nav>
+
+    <!-- Placeholder for posts -->
+    <div id="posts"></div>
   </div>
 </body>
 </html>
diff --git a/client/public/posts.mjs b/client/public/posts.mjs
new file mode 100644
index 0000000..f1c4379
--- /dev/null
+++ b/client/public/posts.mjs
@@ -0,0 +1,33 @@
+import { getPosts } from "./lib/remote.mjs"
+
+function toMonthYearString(str) {
+    const date = new Date(str)
+    return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`
+}
+
+async function updatePosts() {
+  const posts = await getPosts()
+
+  const months = posts.map(post => toMonthYearString(post.date))
+  const uniques = Array.from(new Set(posts.map(post => toMonthYearString(post.date))))
+  const month_lists = uniques.map(month =>
+    posts.filter(
+      post => toMonthYearString(post.date) === month
+    )
+  )
+  const postsDOM = document.getElementById("posts")
+  uniques.forEach((month, i) => {
+    const month_DOM = document.createElement("h1")
+    month_DOM.textContent = month
+
+    month_lists[i].forEach((post, i) => {
+        const post_DOM = document.createElement("h6")
+        post_DOM.textContent = `${post.date.substring(0, 10)} - ${post.title}`
+        month_DOM.appendChild(post_DOM)
+    })
+
+    postsDOM.appendChild(month_DOM)
+  })
+}
+
+updatePosts()
