diff --git a/frontend-reactive/app/components/page.hbs b/frontend-reactive/app/components/page.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/frontend-reactive/app/components/page.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/frontend-reactive/app/components/page/header.hbs b/frontend-reactive/app/components/page/header.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/frontend-reactive/app/components/page/header.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/frontend-reactive/app/components/page/left-sidebar.hbs b/frontend-reactive/app/components/page/left-sidebar.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/frontend-reactive/app/components/page/left-sidebar.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/frontend-reactive/app/components/timeline.hbs b/frontend-reactive/app/components/timeline.hbs
new file mode 100644
index 0000000..175c0d7
--- /dev/null
+++ b/frontend-reactive/app/components/timeline.hbs
@@ -0,0 +1,5 @@
+{{#each this.notes as |note|}}
+  <Note />
+{{/each}}
+
+<InfinityLoader />
\ No newline at end of file
diff --git a/frontend-reactive/app/models/remote-server.js b/frontend-reactive/app/models/remote-server.js
index 43a0d9b..362ab31 100644
--- a/frontend-reactive/app/models/remote-server.js
+++ b/frontend-reactive/app/models/remote-server.js
@@ -1,8 +1,8 @@
-import Model, { attr } from "@ember-data/model";
+import Model, { attr } from '@ember-data/model';
 
 export default class RemoteServerModel extends Model {
-	@attr("string") serverType;
-	@attr("string") name;
-	@attr("string") iconUrl;
-	@attr("boolean") isSelf;
+  @attr('string') serverType;
+  @attr('string') name;
+  @attr('string') iconUrl;
+  @attr('boolean') isSelf;
 }
diff --git a/frontend-reactive/app/router.ts b/frontend-reactive/app/router.ts
index 5fcb6d3..4dce5e6 100644
--- a/frontend-reactive/app/router.ts
+++ b/frontend-reactive/app/router.ts
@@ -7,5 +7,9 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  // Add route declarations here
+  this.route('about');
+
+  this.route('notes', function () {
+    this.route(':note_id');
+  });
 });
diff --git a/frontend-reactive/app/routes/about.ts b/frontend-reactive/app/routes/about.ts
new file mode 100644
index 0000000..9754b22
--- /dev/null
+++ b/frontend-reactive/app/routes/about.ts
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {}
diff --git a/frontend-reactive/app/routes/application.ts b/frontend-reactive/app/routes/application.ts
new file mode 100644
index 0000000..6ec6110
--- /dev/null
+++ b/frontend-reactive/app/routes/application.ts
@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class ApplicationRoute extends Route {
+  model() {
+    console.log('root route loaded');
+  }
+}
diff --git a/frontend-reactive/app/routes/notes/:note-id.ts b/frontend-reactive/app/routes/notes/:note-id.ts
new file mode 100644
index 0000000..ccc212a
--- /dev/null
+++ b/frontend-reactive/app/routes/notes/:note-id.ts
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class Notes:noteIdRoute extends Route {}
diff --git a/frontend-reactive/app/templates/about.hbs b/frontend-reactive/app/templates/about.hbs
new file mode 100644
index 0000000..26353b6
--- /dev/null
+++ b/frontend-reactive/app/templates/about.hbs
@@ -0,0 +1,2 @@
+{{page-title "About"}}
+{{outlet}}
\ No newline at end of file
diff --git a/frontend-reactive/app/templates/notes/:note-id.hbs b/frontend-reactive/app/templates/notes/:note-id.hbs
new file mode 100644
index 0000000..66d1610
--- /dev/null
+++ b/frontend-reactive/app/templates/notes/:note-id.hbs
@@ -0,0 +1,2 @@
+{{page-title ":noteId"}}
+{{outlet}}
\ No newline at end of file
diff --git a/frontend-reactive/tests/integration/components/page-test.ts b/frontend-reactive/tests/integration/components/page-test.ts
new file mode 100644
index 0000000..6a6cd1a
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/page-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | page', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Page />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Page>
+        template block text
+      </Page>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/page/header-test.ts b/frontend-reactive/tests/integration/components/page/header-test.ts
new file mode 100644
index 0000000..3d939a2
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/page/header-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | page/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Page::Header />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Page::Header>
+        template block text
+      </Page::Header>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts b/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts
new file mode 100644
index 0000000..6b94da2
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | page/left-sidebar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Page::LeftSidebar />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Page::LeftSidebar>
+        template block text
+      </Page::LeftSidebar>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/timeline-test.ts b/frontend-reactive/tests/integration/components/timeline-test.ts
new file mode 100644
index 0000000..ae38142
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/timeline-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | timeline', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Timeline />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Timeline>
+        template block text
+      </Timeline>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/unit/routes/about-test.ts b/frontend-reactive/tests/unit/routes/about-test.ts
new file mode 100644
index 0000000..6487e5e
--- /dev/null
+++ b/frontend-reactive/tests/unit/routes/about-test.ts
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
+
+module('Unit | Route | about', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    const route = this.owner.lookup('route:about');
+    assert.ok(route);
+  });
+});
diff --git a/frontend-reactive/tests/unit/routes/application-test.ts b/frontend-reactive/tests/unit/routes/application-test.ts
new file mode 100644
index 0000000..97f2eeb
--- /dev/null
+++ b/frontend-reactive/tests/unit/routes/application-test.ts
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
+
+module('Unit | Route | application', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    const route = this.owner.lookup('route:application');
+    assert.ok(route);
+  });
+});
diff --git a/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts b/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts
new file mode 100644
index 0000000..6705069
--- /dev/null
+++ b/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
+
+module('Unit | Route | notes/:note_id', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    const route = this.owner.lookup('route:notes/:note-id');
+    assert.ok(route);
+  });
+});