diff --git a/static_src/elements/chdir/mr-comment-table/mr-comment-table.js b/static_src/elements/chdir/mr-comment-table/mr-comment-table.js
new file mode 100644
index 0000000..a6d0f19
--- /dev/null
+++ b/static_src/elements/chdir/mr-comment-table/mr-comment-table.js
@@ -0,0 +1,130 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import 'elements/framework/mr-comment-content/mr-comment-content.js';
+import 'elements/chops/chops-timestamp/chops-timestamp.js';
+
+/**
+ * `<mr-comment-table>`
+ *
+ * The list of comments for a Monorail Polymer profile.
+ *
+ */
+export class MrCommentTable extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      .ellipsis {
+        max-width: 50%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      table {
+        word-wrap: break-word;
+        width: 100%;
+      }
+      tr {
+        font-size: var(--chops-main-font-size);
+        font-weight: normal;
+        text-align: left;
+        line-height: 180%;
+      }
+      td, th {
+        border-bottom: var(--chops-normal-border);
+        padding: 0.25em 16px;
+      }
+      td {
+        text-overflow: ellipsis;
+      }
+      th {
+        text-align: left;
+      }
+      .no-wrap {
+        white-space: nowrap;
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    const comments = this._displayedComments(this.selectedDate, this.comments);
+    // TODO(zhangtiff): render deltas for comment changes.
+    return html`
+      <table cellspacing="0" cellpadding="0">
+        <tbody>
+           <tr id="heading-row">
+            <th>Date</th>
+            <th>Project</th>
+            <th>Comment</th>
+            <th>Issue Link</th>
+          </tr>
+
+          ${comments && comments.length ? comments.map((comment) => html`
+            <tr id="row">
+              <td class="no-wrap">
+                <chops-timestamp
+                  .timestamp=${comment.timestamp}
+                  short
+                ></chops-timestamp>
+              </td>
+              <td>${comment.projectName}</td>
+              <td class="ellipsis">
+                <mr-comment-content
+                  .content=${this._truncateMessage(comment.content)}
+                ></mr-comment-content>
+              </td>
+              <td class="no-wrap">
+                <a href="/p/${comment.projectName}/issues/detail?id=${comment.localId}">
+                  Issue ${comment.localId}
+                </a>
+              </td>
+            </tr>
+          `) : html`
+            <tr>
+              <td colspan="4"><i>No comments.</i></td>
+            </tr>
+          `}
+        </tbody>
+      </table>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      comments: {type: Array},
+      selectedDate: {type: Number},
+    };
+  }
+
+  /** @override */
+  constructor() {
+    super();
+    this.comments = [];
+  }
+
+  _truncateMessage(message) {
+    return message && message.substring(0, message.indexOf('\n'));
+  }
+
+  _displayedComments(selectedDate, comments) {
+    if (!selectedDate) {
+      return comments;
+    } else {
+      const computedComments = [];
+      if (!comments) return computedComments;
+
+      for (let i = 0; i < comments.length; i++) {
+        if (comments[i].timestamp <= selectedDate &&
+           comments[i].timestamp >= (selectedDate - 86400)) {
+          computedComments.push(comments[i]);
+        }
+      }
+      return computedComments;
+    }
+  }
+}
+customElements.define('mr-comment-table', MrCommentTable);