diff --git a/src/pages/site/guestbook.astro b/src/pages/site/guestbook.astro
index b1f6a8b..d8ab47a 100644
--- a/src/pages/site/guestbook.astro
+++ b/src/pages/site/guestbook.astro
@@ -67,6 +67,10 @@ const pageTitle = "emma's guestbook"
             <h3>comments</h3>
             <ul class="comments">
             </ul>
+
+            <script>
+                import "../../scripts/guestbook-list-comments"
+            </script>
         </BasicLayout>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/scripts/guestbook-list-comments.js b/src/scripts/guestbook-list-comments.js
index 65cf0e8..b6e9ebd 100644
--- a/src/scripts/guestbook-list-comments.js
+++ b/src/scripts/guestbook-list-comments.js
@@ -10,3 +10,25 @@ const { data, error } = await supabase
   .from("guestbook-comments")
   .select()
   .eq("approved", true);
+
+const commentList = document.querySelector(".comments");
+
+data.forEach((el) => {
+  const listItem = document.createElement("li");
+  const container = document.createElement("div");
+  const commenter = document.createElement("div");
+  const commenterData = document.createElement("p");
+
+  commenterData.textContent = `name: ${el.name} website: ${el.website}`;
+  const commentData = document.createElement("div");
+  const commentText = document.createElement("p");
+
+  commentText.textContent = el.comment;
+  commentData.appendChild(commentText);
+  commenter.appendChild(commenterData);
+  container.appendChild(commenter);
+  container.appendChild(commentData);
+  listItem.appendChild(container);
+
+  commentList.appendChild(listItem);
+});