diff --git a/static_src/elements/chdir/mr-activity-table/mr-activity-table.js b/static_src/elements/chdir/mr-activity-table/mr-activity-table.js
new file mode 100644
index 0000000..a0f4715
--- /dev/null
+++ b/static_src/elements/chdir/mr-activity-table/mr-activity-table.js
@@ -0,0 +1,129 @@
+// 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 './mr-day-icon.js';
+
+const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'];
+const WEEKDAY_ABBREVIATIONS = 'M T W T F S S'.split(' ');
+const SECONDS_PER_DAY = 24 * 60 * 60;
+// Only show comments from this many days ago and later.
+const MAX_COMMENT_AGE = 31 * 3;
+
+export class MrActivityTable extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      :host {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: repeat(13, auto);
+        grid-template-rows: repeat(7, auto);
+        margin: auto;
+        width: 90%;
+        text-align: center;
+        line-height: 110%;
+        align-items: center;
+        justify-content: space-between;
+      }
+      :host[hidden] {
+        display: none;
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    return html`
+      ${WEEKDAY_ABBREVIATIONS.map((weekday) => html`<span>${weekday}</span>`)}
+      ${this._weekdayOffset.map(() => html`<span></span>`)}
+      ${this._activityArray.map((day) => html`
+        <mr-day-icon
+          .selected=${this.selectedDate === day.date}
+          .commentCount=${day.commentCount}
+          .date=${day.date}
+          @click=${this._selectDay}
+        ></mr-day-icon>
+      `)}
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      comments: {type: Array},
+      selectedDate: {type: Number},
+    };
+  }
+
+  _selectDay(event) {
+    const target = event.target;
+    if (this.selectedDate === target.date) {
+      this.selectedDate = undefined;
+    } else {
+      this.selectedDate = target.date;
+    }
+
+    this.dispatchEvent(new CustomEvent('dateChange', {
+      detail: {
+        date: this.selectedDate,
+      },
+    }));
+  }
+
+  get months() {
+    const currentMonth = (new Date()).getMonth();
+    return [MONTH_NAMES[currentMonth],
+      MONTH_NAMES[currentMonth - 1],
+      MONTH_NAMES[currentMonth - 2]];
+  }
+
+  get _weekdayOffset() {
+    const startDate = new Date(this._activityArray[0].date * 1000);
+    const startWeekdayNum = startDate.getDay()-1;
+    const emptyDays = [];
+    for (let i = 0; i < startWeekdayNum; i++) {
+      emptyDays.push(' ');
+    }
+    return emptyDays;
+  }
+
+  get _todayUnixTime() {
+    const now = new Date();
+    const today = new Date(Date.UTC(
+        now.getUTCFullYear(),
+        now.getUTCMonth(),
+        now.getUTCDate(),
+        24, 0, 0));
+    const todayEndTime = today.getTime() / 1000;
+    return todayEndTime;
+  }
+
+  get _activityArray() {
+    const todayUnixEndTime = this._todayUnixTime;
+    const comments = this.comments || [];
+
+    const activityArray = [];
+    for (let i = 0; i < MAX_COMMENT_AGE; i++) {
+      const arrayDate = (todayUnixEndTime - ((i) * SECONDS_PER_DAY));
+      activityArray.unshift({
+        commentCount: 0,
+        date: arrayDate,
+      });
+    }
+
+    for (let i = 0; i < comments.length; i++) {
+      const commentAge = Math.floor(
+          (todayUnixEndTime - comments[i].timestamp) / SECONDS_PER_DAY);
+      if (commentAge < MAX_COMMENT_AGE) {
+        const pos = MAX_COMMENT_AGE - commentAge - 1;
+        activityArray[pos].commentCount++;
+      }
+    }
+
+    return activityArray;
+  }
+}
+customElements.define('mr-activity-table', MrActivityTable);
diff --git a/static_src/elements/chdir/mr-activity-table/mr-activity-table.test.js b/static_src/elements/chdir/mr-activity-table/mr-activity-table.test.js
new file mode 100644
index 0000000..0eb9d30
--- /dev/null
+++ b/static_src/elements/chdir/mr-activity-table/mr-activity-table.test.js
@@ -0,0 +1,57 @@
+// 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 {assert} from 'chai';
+import {MrActivityTable} from './mr-activity-table.js';
+import sinon from 'sinon';
+
+const SECONDS_PER_DAY = 24 * 60 * 60;
+
+let element;
+
+describe('mr-activity-table', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-activity-table');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrActivityTable);
+  });
+
+  it('no comments makes empty activity array', () => {
+    element.comments = [];
+
+    for (let i = 0; i < 93; i++) {
+      assert.equal(0, element._activityArray[i].commentCount);
+    }
+  });
+
+  it('activity array handles old comments', () => {
+    // 94 days since EPOCH.
+    sinon.stub(element, '_todayUnixTime').get(() => 94 * SECONDS_PER_DAY);
+
+    element.comments = [
+      {content: 'blah', timestamp: 0}, // too old.
+      {content: 'ignore', timestamp: 100}, // too old.
+      {
+        content: 'comment',
+        timestamp: SECONDS_PER_DAY + 1, // barely young enough.
+      },
+      {content: 'hello', timestamp: SECONDS_PER_DAY + 10}, // same day as above.
+      {content: 'world', timestamp: SECONDS_PER_DAY * 94}, // today
+    ];
+
+    assert.equal(93, element._activityArray.length);
+    assert.equal(2, element._activityArray[0].commentCount);
+    for (let i = 1; i < 92; i++) {
+      assert.equal(0, element._activityArray[i].commentCount);
+    }
+    assert.equal(1, element._activityArray[92].commentCount);
+  });
+});
diff --git a/static_src/elements/chdir/mr-activity-table/mr-day-icon.js b/static_src/elements/chdir/mr-activity-table/mr-day-icon.js
new file mode 100644
index 0000000..82f62b3
--- /dev/null
+++ b/static_src/elements/chdir/mr-activity-table/mr-day-icon.js
@@ -0,0 +1,91 @@
+// 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';
+
+export class MrDayIcon extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      :host {
+        background-color: hsl(0, 0%, 95%);
+        margin: 0.25em 8px;
+        height: 20px;
+        width: 20px;
+        border: 2px solid white;
+        transition: border-color .5s ease-in-out;
+      }
+      :host(:hover) {
+        cursor: pointer;
+        border-color: hsl(87, 20%, 45%);
+      }
+      :host([activityLevel="0"]) {
+        background-color: var(--chops-blue-gray-50);
+      }
+      :host([activityLevel="1"]) {
+        background-color: hsl(87, 70%, 87%);
+      }
+      :host([activityLevel="2"]) {
+        background-color: hsl(88, 67%, 72%);
+      }
+      :host([activityLevel="3"]) {
+        background-color: hsl(87, 80%, 40%);
+      }
+      :host([selected]) {
+        border-color: hsl(0, 0%, 13%);
+      }
+      .hover-card {
+        display: none;
+      }
+      :host(:hover) .hover-card {
+        display: block;
+        position: relative;
+        width: 150px;
+        padding: 0.5em 8px;
+        background: rgba(0, 0, 0, 0.6);
+        color: var(--chops-white);
+        border-radius: 8px;
+        top: 120%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    return html`
+      <div class="hover-card">
+        ${this.commentCount} Comments<br>
+        <chops-timestamp .timestamp=${this.date}></chops-timestamp>
+      </div>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      activityLevel: {
+        type: Number,
+        reflect: true,
+      },
+      commentCount: {type: Number},
+      date: {type: Number},
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  /** @override */
+  update(changedProperties) {
+    if (changedProperties.has('commentCount')) {
+      const level = Math.ceil(this.commentCount / 2);
+      this.activityLevel = Math.min(level, 3);
+    }
+    super.update(changedProperties);
+  }
+}
+customElements.define('mr-day-icon', MrDayIcon);
diff --git a/static_src/elements/chdir/mr-activity-table/mr-day-icon.test.js b/static_src/elements/chdir/mr-activity-table/mr-day-icon.test.js
new file mode 100644
index 0000000..3c35a10
--- /dev/null
+++ b/static_src/elements/chdir/mr-activity-table/mr-day-icon.test.js
@@ -0,0 +1,24 @@
+// 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 {assert} from 'chai';
+import {MrDayIcon} from './mr-day-icon.js';
+
+
+let element;
+
+describe('mr-day-icon', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-day-icon');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrDayIcon);
+  });
+});
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);
diff --git a/static_src/elements/chdir/mr-comment-table/mr-comment-table.test.js b/static_src/elements/chdir/mr-comment-table/mr-comment-table.test.js
new file mode 100644
index 0000000..6925dc4
--- /dev/null
+++ b/static_src/elements/chdir/mr-comment-table/mr-comment-table.test.js
@@ -0,0 +1,24 @@
+// 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 {assert} from 'chai';
+import {MrCommentTable} from './mr-comment-table.js';
+
+
+let element;
+
+describe('mr-comment-table', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-comment-table');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrCommentTable);
+  });
+});
diff --git a/static_src/elements/chdir/mr-profile-page/mr-profile-page.js b/static_src/elements/chdir/mr-profile-page/mr-profile-page.js
new file mode 100644
index 0000000..5fadff6
--- /dev/null
+++ b/static_src/elements/chdir/mr-profile-page/mr-profile-page.js
@@ -0,0 +1,156 @@
+// 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 {prpcClient} from 'prpc-client-instance.js';
+
+import 'elements/framework/mr-header/mr-header.js';
+import '../mr-activity-table/mr-activity-table.js';
+import '../mr-comment-table/mr-comment-table.js';
+
+/**
+ * `<mr-profile-page>`
+ *
+ * The main entry point for a Monorail web components profile.
+ *
+ */
+export class MrProfilePage extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      .history-container {
+        padding: 1em 16px;
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+        box-sizing: border-box;
+        flex-grow: 1;
+      }
+      mr-comment-table {
+        width: 100%;
+        margin-bottom: 1em;
+        box-sizing: border-box;
+      }
+      mr-activity-table {
+        width: 70%;
+        flex-grow: 0;
+        margin: auto;
+        margin-bottom: 5em;
+        height: 200px;
+        box-sizing: border-box;
+      }
+      .metadata-container {
+        font-size: var(--chops-main-font-size);
+        border-right: var(--chops-normal-border);
+        width: 15%;
+        min-width: 256px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        min-height: 100%;
+      }
+      .container-outside {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        margin: auto;
+        padding: 0.75em 8px;
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+        flex-direction: row;
+        flex-wrap: no-wrap;
+        flex-grow: 0;
+        min-height: 100%;
+      }
+      .profile-data {
+        text-align: center;
+        padding-top: 40%;
+        font-size: var(--chops-main-font-size);
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    return html`
+      <mr-header
+        .userDisplayName=${this.user}
+        .loginUrl=${this.loginUrl}
+        .logoutUrl=${this.logoutUrl}
+      >
+        <span slot="subheader">
+          &gt; Viewing Profile: ${this.viewedUser}
+        </span>
+      </mr-header>
+      <div class="container-outside">
+        <div class="metadata-container">
+          <div class="profile-data">
+            ${this.viewedUser} <br>
+            <b>Last visit:</b> ${this.lastVisitStr} <br>
+            <b>Starred Developers:</b>
+            ${this.starredUsers.length ? this.starredUsers.join(', ') : 'None'}
+          </div>
+        </div>
+        <div class="history-container">
+          ${this.user === this.viewedUser ? html`
+            <mr-activity-table
+              .comments=${this.comments}
+              @dateChange=${this._changeDate}
+            ></mr-activity-table>
+          `: ''}
+          <mr-comment-table
+            .user=${this.viewedUser}
+            .viewedUserId=${this.viewedUserId}
+            .comments=${this.comments}
+            .selectedDate=${this.selectedDate}>
+          </mr-comment-table>
+        </div>
+      </div>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      user: {type: String},
+      logoutUrl: {type: String},
+      loginUrl: {type: String},
+      viewedUser: {type: String},
+      viewedUserId: {type: Number},
+      lastVisitStr: {type: String},
+      starredUsers: {type: Array},
+      comments: {type: Array},
+      selectedDate: {type: Number},
+    };
+  }
+
+  /** @override */
+  updated(changedProperties) {
+    if (changedProperties.has('viewedUserId')) {
+      this._fetchActivity();
+    }
+  }
+
+  async _fetchActivity() {
+    const commentMessage = {
+      userRef: {
+        userId: this.viewedUserId,
+      },
+    };
+
+    const resp = await prpcClient.call(
+        'monorail.Issues', 'ListActivities', commentMessage
+    );
+
+    this.comments = resp.comments;
+  }
+
+  _changeDate(e) {
+    if (!e.detail) return;
+    this.selectedDate = e.detail.date;
+  }
+}
+
+customElements.define('mr-profile-page', MrProfilePage);
diff --git a/static_src/elements/chdir/mr-profile-page/mr-profile-page.test.js b/static_src/elements/chdir/mr-profile-page/mr-profile-page.test.js
new file mode 100644
index 0000000..c967704
--- /dev/null
+++ b/static_src/elements/chdir/mr-profile-page/mr-profile-page.test.js
@@ -0,0 +1,24 @@
+// 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 {assert} from 'chai';
+import {MrProfilePage} from './mr-profile-page.js';
+
+
+let element;
+
+describe('mr-profile-page', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-profile-page');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrProfilePage);
+  });
+});