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);