diff --git a/static_src/elements/issue-entry/mr-issue-entry-page.js b/static_src/elements/issue-entry/mr-issue-entry-page.js
new file mode 100644
index 0000000..b1cc2ef
--- /dev/null
+++ b/static_src/elements/issue-entry/mr-issue-entry-page.js
@@ -0,0 +1,56 @@
+// Copyright 2020 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 page from 'page';
+import {LitElement, html, css} from 'lit-element';
+
+/**
+ * `<mr-issue-entry-page>`
+ *
+ * This is the main details section for a given issue.
+ *
+ */
+export class MrIssueEntryPage extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      :host {
+        margin: 0;
+      }
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      userDisplayName: {type: String},
+      loginUrl: {type: String},
+    };
+  }
+
+  /** @override */
+  constructor() {
+    super();
+
+    /* dependency injection for testing purpose */
+    this._page = page;
+  }
+
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.userDisplayName) {
+      this._page(this.loginUrl);
+    }
+  }
+
+  /** @override */
+  render() {
+    return html`
+      <div>SPA issue entry page place holder</div>
+    `;
+  }
+}
+
+customElements.define('mr-issue-entry-page', MrIssueEntryPage);
diff --git a/static_src/elements/issue-entry/mr-issue-entry-page.test.js b/static_src/elements/issue-entry/mr-issue-entry-page.test.js
new file mode 100644
index 0000000..013a3a4
--- /dev/null
+++ b/static_src/elements/issue-entry/mr-issue-entry-page.test.js
@@ -0,0 +1,58 @@
+// Copyright 2020 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 sinon from 'sinon';
+import {MrIssueEntryPage} from './mr-issue-entry-page.js';
+
+let element;
+
+describe('mr-issue-entry-page', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-issue-entry-page');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrIssueEntryPage);
+  });
+
+  describe('requires user to be logged in', () => {
+    it('redirects to loginUrl if not logged in', async () => {
+      document.body.removeChild(element);
+      element = document.createElement('mr-issue-entry-page');
+      assert.isUndefined(element.userDisplayName);
+
+      const EXPECTED = 'abc';
+      element.loginUrl = EXPECTED;
+
+      const pageStub = sinon.stub(element, '_page');
+      document.body.appendChild(element);
+      await element.updateComplete;
+
+      sinon.assert.calledOnce(pageStub);
+      sinon.assert.calledWith(pageStub, EXPECTED);
+    });
+
+    it('renders when user is logged in', async () => {
+      document.body.removeChild(element);
+      element = document.createElement('mr-issue-entry-page');
+
+      element.loginUrl = 'abc';
+      element.userDisplayName = 'not_undefined';
+
+      const pageStub = sinon.stub(element, '_page');
+      const renderSpy = sinon.spy(element, 'render');
+      document.body.appendChild(element);
+      await element.updateComplete;
+
+      sinon.assert.notCalled(pageStub);
+      sinon.assert.calledOnce(renderSpy);
+    });
+  });
+});