diff --git a/scripts/content.ts b/scripts/content.ts
index 8b13789..b0195d2 100644
--- a/scripts/content.ts
+++ b/scripts/content.ts
@@ -1 +1,43 @@
+import type { GrocyChore } from '../distribution/Grocy';
+document.addEventListener("DOMContentLoaded", async function () {
+ async function loadChores() {
+ try {
+ const response = await fetch('/api/chores');
+ if (!response.ok) {
+ throw new Error(`Response status: ${response.status}`);
+ }
+
+ const result = await response.json();
+ if (!('chores' in result)) {
+ throw new Error(JSON.stringify(result));
+ }
+ createChores(result.chores as GrocyChore[]);
+ } catch (error: any) {
+ console.error(error?.message);
+ }
+ }
+
+ function createChores(chores: GrocyChore[]) {
+ const root = document.getElementById('approot');
+ if (!root) {
+ throw new Error('app root not found');
+ }
+ chores.forEach(ch => {
+ const btn = document.createElement('div');
+ const leftText = document.createElement('span');
+ leftText.appendChild(document.createTextNode(ch.chore_name));
+ btn.appendChild(leftText);
+ btn.classList.add('chore');
+ if (ch.next_execution_assigned_user?.display_name) {
+ const rightText = document.createElement('span');
+ rightText.appendChild(document.createTextNode(ch.next_execution_assigned_user.display_name));
+ rightText.classList.add('right');
+ btn.appendChild(rightText);
+ }
+ root.appendChild(btn);
+ });
+ }
+
+ loadChores();
+});
\ No newline at end of file
diff --git a/styles/01-layout.scss b/styles/01-layout.scss
new file mode 100644
index 0000000..46e6620
--- /dev/null
+++ b/styles/01-layout.scss
@@ -0,0 +1,19 @@
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.right {
+ float: right;
+}
+
+.content {
+ width: 80%;
+ width: calc(100% - 150px);
+ margin: auto;
+}
+
+.chore {
+ line-height: 1.2em;
+ padding: .75em;
+ margin: 1em 0;
+}
diff --git a/styles/02-colors.scss b/styles/02-colors.scss
new file mode 100644
index 0000000..a88e6a8
--- /dev/null
+++ b/styles/02-colors.scss
@@ -0,0 +1,8 @@
+body {
+ background-color: #212121;
+}
+
+.chore {
+ color: #FAFAFA;
+ background-color: #4527A0;
+}
diff --git a/views/app.ejs b/views/app.ejs
index 7ddd39a..d115ec5 100644
--- a/views/app.ejs
+++ b/views/app.ejs
@@ -7,7 +7,9 @@