diff --git a/frontend-reactive/app/components/note.hbs b/frontend-reactive/app/components/note.hbs
index 2a69195..3382ced 100644
--- a/frontend-reactive/app/components/note.hbs
+++ b/frontend-reactive/app/components/note.hbs
@@ -1,14 +1,14 @@
 <div class="note">
   {{!-- TODO: figure out how to make the entire note clickable for opening with something like {{on "click" (fn this.openFullView)}} --}}
   <Note::UserHeader
-    @displayname="{{@displayname}}"
-    @handle="@{{@username}}@{{@serverdomain}}"
+    @displayname="{{@note.displayname}}"
+    @handle="@{{@note.username}}@{{@note.server}}"
   />
-  <Note::Content @content="{{@content}}" />
+  <Note::Content @content="{{@note.content}}" />
   <div class="note-timestamps-container">
-    <p class="note-timestamp" id="note-edited-timestamp">Edited: At some time in
-      the future</p>
-    <p class="note-timestamp" id="note-created-timestamp">Posted: Before the Big
-      Bang</p>
+    {{#if @note.editedAt}}
+    <p class="note-timestamp" id="note-edited-timestamp">Edited: {{moment-format @note.editedAt}}</p>
+    {{/if}}
+    <p class="note-timestamp" id="note-created-timestamp">Posted: {{moment-format @note.createdAt ""}}</p>
   </div>
 </div>
\ No newline at end of file
diff --git a/frontend-reactive/app/components/note.ts b/frontend-reactive/app/components/note.ts
index 56aeab1..e46756a 100644
--- a/frontend-reactive/app/components/note.ts
+++ b/frontend-reactive/app/components/note.ts
@@ -1,26 +1,34 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
 export interface NoteSignature {
-  // The arguments accepted by the component
-  Args: {
-    isInTimeline: boolean;
-  };
-  // Any blocks yielded by the component
-  Blocks: {
-    default: [];
-  };
-  // The element to which `...attributes` is applied in the component template
-  Element: null;
+	// The arguments accepted by the component
+	Args: {
+		isInTimeline: boolean;
+		note: {
+			content: string;
+			server: string;
+			username: string;
+			displayname: string;
+			createdAt: number;
+			editedAt?: number;
+		};
+	};
+	// Any blocks yielded by the component
+	Blocks: {
+		default: [];
+	};
+	// The element to which `...attributes` is applied in the component template
+	Element: null;
 }
 
 export default class Note extends Component<NoteSignature> {
-  @action
-  openFullView() {
-    if (this.args.isInTimeline) {
-      alert("Would have opened note's own view");
-    } else {
-      console.log("Alread in note specific view, can't open it again");
-    }
-  }
+	@action
+	openFullView() {
+		if (this.args.isInTimeline) {
+			alert("Would have opened note's own view");
+		} else {
+			console.log("Alread in note specific view, can't open it again");
+		}
+	}
 }
diff --git a/frontend-reactive/app/components/timeline.hbs b/frontend-reactive/app/components/timeline.hbs
index 175c0d7..f3d8f94 100644
--- a/frontend-reactive/app/components/timeline.hbs
+++ b/frontend-reactive/app/components/timeline.hbs
@@ -1,5 +1,3 @@
-{{#each this.notes as |note|}}
-  <Note />
-{{/each}}
-
-<InfinityLoader />
\ No newline at end of file
+{{#each this.model.notes as |note|}}
+  <Note @isInTimeline="true" @content="{{note.content}}" @username="{{note.username}}" @serverdomain="{{note.server}}"/>
+{{/each}}
\ No newline at end of file
diff --git a/frontend-reactive/app/router.ts b/frontend-reactive/app/router.ts
index 4dce5e6..dbb073b 100644
--- a/frontend-reactive/app/router.ts
+++ b/frontend-reactive/app/router.ts
@@ -1,15 +1,11 @@
-import EmberRouter from '@ember/routing/router';
-import config from 'frontend-reactive/config/environment';
+import EmberRouter from "@ember/routing/router";
+import config from "frontend-reactive/config/environment";
 
 export default class Router extends EmberRouter {
-  location = config.locationType;
-  rootURL = config.rootURL;
+	location = config.locationType;
+	rootURL = config.rootURL;
 }
 
 Router.map(function () {
-  this.route('about');
-
-  this.route('notes', function () {
-    this.route(':note_id');
-  });
+	this.route("about");
 });
diff --git a/frontend-reactive/app/routes/application.ts b/frontend-reactive/app/routes/application.ts
index 6ec6110..c282829 100644
--- a/frontend-reactive/app/routes/application.ts
+++ b/frontend-reactive/app/routes/application.ts
@@ -1,7 +1,19 @@
-import Route from '@ember/routing/route';
+import Route from "@ember/routing/route";
 
 export default class ApplicationRoute extends Route {
-  model() {
-    console.log('root route loaded');
-  }
+	model() {
+		console.log("root route loaded");
+		return {
+			notes: [
+				{
+					displayname: "alice",
+					username: "bob",
+					server: "example.com",
+					content: "lorem ipsum",
+					createdAt: Date.now() - 360000,
+					editedAt: Date.now() - 60000,
+				},
+			],
+		};
+	}
 }
diff --git a/frontend-reactive/app/routes/notes/:note-id.ts b/frontend-reactive/app/routes/notes/:note-id.ts
deleted file mode 100644
index ccc212a..0000000
--- a/frontend-reactive/app/routes/notes/:note-id.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default class Notes:noteIdRoute extends Route {}
diff --git a/frontend-reactive/app/templates/application.hbs b/frontend-reactive/app/templates/application.hbs
index 65aa5de..43d1caf 100644
--- a/frontend-reactive/app/templates/application.hbs
+++ b/frontend-reactive/app/templates/application.hbs
@@ -1,14 +1,11 @@
 {{page-title "FrontendReactive"}}
 
 {{outlet}}
+{{#each @model.notes as |note|}}
 <Note
-  @displayname="bob"
-  @username="alice"
-  @serverdomain="example.com"
+    @note={{note}}
   @isInTimeline="false"
-  @content="Scuttle crack Jennys tea cup American Main lass Jolly Roger prow reef sails tackle ye Chain Shot. Cackle fruit topgallant draft bilge gangplank Jolly Roger ahoy holystone black jack aye. Mizzenmast stern warp Buccaneer Spanish Main Letter of Marque pink aft skysail grog blossom.
+/>
+{{/each}}
 
-Crow's nest scuppers topgallant fore dance the hempen jig loot tack fluke squiffy flogging. Red ensign Letter of Marque poop deck scallywag chandler rutters sheet avast sloop to go on account. Spike loaded to the gunwalls prow smartly gabion heave down scallywag interloper chantey case shot.
-
-Quarterdeck cackle fruit ballast lookout bounty jack trysail crow's nest hulk spyglass. Gabion gangplank long boat coffer ahoy wench parley American Main jack come about. Trysail code of conduct cable provost loaded to the gunwalls chase landlubber or just lubber gibbet gunwalls hempen halter."
-/>
\ No newline at end of file
+<!--<Timeline />-->
\ No newline at end of file
diff --git a/frontend-reactive/ember-cli-build.js b/frontend-reactive/ember-cli-build.js
index eff4497..5eedf30 100644
--- a/frontend-reactive/ember-cli-build.js
+++ b/frontend-reactive/ember-cli-build.js
@@ -1,16 +1,19 @@
-'use strict';
+"use strict";
 
-const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const EmberApp = require("ember-cli/lib/broccoli/ember-app");
 
 module.exports = function (defaults) {
-  const app = new EmberApp(defaults, {
-    'ember-cli-babel': { enableTypeScriptTransform: true },
-    minifyCSS: {
-      options: { processImport: true },
-    },
+	const app = new EmberApp(defaults, {
+		"ember-cli-babel": { enableTypeScriptTransform: true },
+		minifyCSS: {
+			options: { processImport: true },
+		},
 
-    // Add options here
-  });
+		// Add options here
+		autoImport: {
+			watchDependencies: ["ember-moment"],
+		},
+	});
 
-  return app.toTree();
+	return app.toTree();
 };
diff --git a/frontend-reactive/package-lock.json b/frontend-reactive/package-lock.json
index 84cdf3d..20184bf 100644
--- a/frontend-reactive/package-lock.json
+++ b/frontend-reactive/package-lock.json
@@ -8,6 +8,9 @@
 			"name": "frontend-reactive",
 			"version": "0.0.0",
 			"license": "EUPL-1.2",
+			"dependencies": {
+				"moment": "^2.30.1"
+			},
 			"devDependencies": {
 				"@babel/core": "^7.25.2",
 				"@ember/optional-features": "^2.1.0",
@@ -65,6 +68,7 @@
 				"ember-infinity": "^3.0.0",
 				"ember-load-initializers": "^2.1.2",
 				"ember-modifier": "^4.2.0",
+				"ember-moment": "^10.0.1",
 				"ember-page-title": "^8.2.3",
 				"ember-qunit": "^8.1.0",
 				"ember-resolver": "^11.0.1",
@@ -17313,6 +17317,27 @@
 				"rsvp": "^4.8.4"
 			}
 		},
+		"node_modules/ember-moment": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/ember-moment/-/ember-moment-10.0.1.tgz",
+			"integrity": "sha512-Es5PaFBRF6djyb0zwmcCMqWjLhyKrCWs5Ug6iaZoKxDgEc8incVCTv3ED2Z4oCcNDY2gKTqXY5VTsP1J9hUPcg==",
+			"dev": true,
+			"dependencies": {
+				"@embroider/addon-shim": "^1.8.9"
+			},
+			"peerDependencies": {
+				"moment": "^2",
+				"moment-timezone": "^0.5.34"
+			},
+			"peerDependenciesMeta": {
+				"moment": {
+					"optional": true
+				},
+				"moment-timezone": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/ember-page-title": {
 			"version": "8.2.3",
 			"resolved": "https://registry.npmjs.org/ember-page-title/-/ember-page-title-8.2.3.tgz",
@@ -23810,6 +23835,14 @@
 				"node": ">0.9"
 			}
 		},
+		"node_modules/moment": {
+			"version": "2.30.1",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/morgan": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
diff --git a/frontend-reactive/package.json b/frontend-reactive/package.json
index 94353c2..9610409 100644
--- a/frontend-reactive/package.json
+++ b/frontend-reactive/package.json
@@ -82,6 +82,7 @@
 		"ember-infinity": "^3.0.0",
 		"ember-load-initializers": "^2.1.2",
 		"ember-modifier": "^4.2.0",
+		"ember-moment": "^10.0.1",
 		"ember-page-title": "^8.2.3",
 		"ember-qunit": "^8.1.0",
 		"ember-resolver": "^11.0.1",
@@ -110,5 +111,8 @@
 	},
 	"ember": {
 		"edition": "octane"
+	},
+	"dependencies": {
+		"moment": "^2.30.1"
 	}
 }