diff --git a/web/app/components/list-comments/__item/list-comments__item.scss b/web/app/components/list-comments/__item/list-comments__item.scss
new file mode 100644
index 00000000..ab4412d3
--- /dev/null
+++ b/web/app/components/list-comments/__item/list-comments__item.scss
@@ -0,0 +1,5 @@
+.list-comments__item {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/web/app/components/list-comments/index.js b/web/app/components/list-comments/index.js
new file mode 100644
index 00000000..4cae2ce1
--- /dev/null
+++ b/web/app/components/list-comments/index.js
@@ -0,0 +1,5 @@
+export { default } from './list-comments';
+
+require('./list-comments.scss');
+
+require('./__item/list-comments__item.scss');
diff --git a/web/app/components/list-comments/list-comments.jsx b/web/app/components/list-comments/list-comments.jsx
new file mode 100644
index 00000000..349b1420
--- /dev/null
+++ b/web/app/components/list-comments/list-comments.jsx
@@ -0,0 +1,25 @@
+import { h, Component } from 'preact';
+
+import { NODE_ID } from 'common/constants';
+
+import Comment from 'components/comment';
+
+export default class ListComments extends Component {
+  render({ comments = [] }, state) {
+    return (
+      <div id={NODE_ID}>
+        <div className="list-comments">
+          {
+            comments.map(comment => (
+              <Comment
+                data={comment}
+                mods={{ level: 0, guest: true }}
+                mix="list-comments__item"
+              />
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/web/app/components/list-comments/list-comments.scss b/web/app/components/list-comments/list-comments.scss
new file mode 100644
index 00000000..e4f0b120
--- /dev/null
+++ b/web/app/components/list-comments/list-comments.scss
@@ -0,0 +1,4 @@
+.list-comments {
+  position: relative;
+  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+}