diff --git a/src/boot/appwrite.ts b/src/boot/appwrite.ts
index 440c0a6..5d326d9 100644
--- a/src/boot/appwrite.ts
+++ b/src/boot/appwrite.ts
@@ -16,8 +16,12 @@ const client = new Client();
 client
   .setEndpoint(process.env.APPWRITE_API_ENDPOINT)
   .setProject(process.env.APPWRITE_API_PROJECT);
-//TODO
-const appDatabaseId = '';
+//TODO move this to config file
+
+const AppwriteIds = {
+  databaseId: '65ee1cbf9c2493faf15f',
+  collectionIdTask: '65ee1cd5b550023fae4f',
+};
 
 const account = new Account(client);
 const databases = new Databases(client);
@@ -86,4 +90,4 @@ function login(email: string, password: string) {
       });
     });
 }
-export { client, account, databases, ID, appDatabaseId, login, logout };
+export { client, account, databases, ID, AppwriteIds, login, logout };
diff --git a/src/components/task/TaskComponent.vue b/src/components/task/TaskComponent.vue
new file mode 100644
index 0000000..abcc1b7
--- /dev/null
+++ b/src/components/task/TaskComponent.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>My component</div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/components/task/TaskListComponent.vue b/src/components/task/TaskListComponent.vue
new file mode 100644
index 0000000..1dd40e9
--- /dev/null
+++ b/src/components/task/TaskListComponent.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="q-pa-md" style="max-width: 350px">
+    <q-list>
+      <q-item v-for="task in tasks" :key="task.id">
+        <q-item-section>
+          <q-item-label>{{ task.title }}</q-item-label>
+          <q-item-label caption lines="2"
+            >Secondary line text. Lorem ipsum dolor sit amet, consectetur
+            adipiscit elit.</q-item-label
+          >
+        </q-item-section>
+
+        <q-item-section side top>
+          <q-item-label caption>5 min ago</q-item-label>
+          <q-icon name="star" color="yellow" />
+        </q-item-section>
+      </q-item>
+
+      <q-separator spaced inset />
+    </q-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { Task } from 'src/stores/task';
+
+const props = defineProps<{ tasks: Task[] }>();
+</script>
diff --git a/src/pages/TaskPage.vue b/src/pages/TaskPage.vue
index a1ebe05..828a23d 100644
--- a/src/pages/TaskPage.vue
+++ b/src/pages/TaskPage.vue
@@ -1,26 +1,15 @@
 <template>
   <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <q-card bordered separator class="mobile-card">
-      <q-card-section clickable v-ripple>
-        <div class="text-h6">Launch Prep</div>
-        <div class="text-subtitle2">Prepare for Launch</div>
-        <q-chip size="md" color="green" text-color="white" icon="alarm">
-          APR 1,2024
-        </q-chip>
-        <q-chip size="md" icon="build"> 24 tasks </q-chip>
-      </q-card-section>
-    </q-card>
-    <q-card bordered separator class="mobile-card">
-      <q-card-section clickable v-ripple>
-        <div class="text-h6">General Maintenance</div>
-        <div class="text-subtitle2">Day to day maintenance and upkeep</div>
-        <q-chip size="md" icon="build"> 4 tasks </q-chip>
-      </q-card-section>
-    </q-card>
+    <TaskListComponent :tasks="taskStore.taskHierarchy" />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import { useTaskStore } from 'stores/task';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import TaskListComponent from 'src/components/task/TaskListComponent.vue';
+
+const taskStore = useTaskStore();
+taskStore.fetchTasks(); // Fetch on mount
 </script>
diff --git a/src/stores/task.ts b/src/stores/task.ts
index 2908291..2e5b8bb 100644
--- a/src/stores/task.ts
+++ b/src/stores/task.ts
@@ -1,90 +1,63 @@
 import { defineStore } from 'pinia';
-import { Databases } from 'appwrite';
+import { AppwriteIds, databases, ID } from 'src/boot/appwrite';
+import type { Models } from 'appwrite';
 
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0,
-  }),
-
-  getters: {
-    doubleCount(state) {
-      return state.counter * 2;
-    },
-  },
-
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});
-
-export interface Task {
-  id: string;
+export interface Task extends Models.Document {
   title: string;
   description: string;
   taskLabels: string[];
   dueDate: Date;
-  created: Date;
   parentId: string;
   completed: boolean;
 }
 
-const getSampleData = () => [
-  {
-    id: 1,
-    name: 'ProjectX',
-    displayName: 'PX',
-    class: 'J/27',
-    year: 1981,
-    imgsrc: '/tmpimg/j27.png',
-    iconsrc: '/tmpimg/projectx_avatar256.png',
-    defects: [
-      {
-        type: 'engine',
-        severity: 'moderate',
-        description: 'Fuel line leaks at engine fitting.',
-        detail: `The gasket in the end of the fuel hose is damaged, and does not properly seal.
-This will cause fuel to leak, and will allow air into the fuel chamber, causing a lean mixture,
-and rough engine performance.`,
-      },
-      {
-        type: 'rigging',
-        severity: 'moderate',
-        description: 'Tiller extension is broken.',
-        detail:
-          'The tiller extension swivel is broken, and will not attach to the tiller.',
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: 'Take5',
-    displayName: 'T5',
-    class: 'J/27',
-    year: 1985,
-    imgsrc: '/tmpimg/j27.png',
-    iconsrc: '/tmpimg/take5_avatar32.png',
-  },
-  {
-    id: 3,
-    name: 'WeeBeestie',
-    displayName: 'WB',
-    class: 'Capri 25',
-    year: 1989,
-    imgsrc: '/tmpimg/capri25.png',
-  },
-];
-
-export const useBoatStore = defineStore('boat', {
+export const useTaskStore = defineStore('tasks', {
   state: () => ({
-    boats: getSampleData(),
+    tasks: [] as Task[],
   }),
 
-  getters: {},
-
   actions: {
-    // update () {
-    // }
+    async fetchTasks() {
+      try {
+        const response = await databases.listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTask
+        );
+        this.tasks = response.documents as Task[];
+      } catch (error) {
+        console.error('Failed to fetch tasks', error);
+      }
+    },
+    async addTask(task: Task) {
+      try {
+        const response = await databases.createDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTask,
+          ID.unique(),
+          task
+        );
+        this.tasks.push(response as Task);
+      } catch (error) {
+        console.error('Failed to add task:', error);
+      }
+    },
+  },
+  // Add more actions as needed (e.g., updateTask, deleteTask)
+  getters: {
+    // A getter to reconstruct the hierarchical structure from flat task data
+    taskHierarchy: (state) => {
+      function buildHierarchy(
+        tasks: Task[],
+        parentId: string | null = null
+      ): Task[] {
+        return tasks
+          .filter((task) => task.parentId === parentId)
+          .map((task) => ({
+            ...task,
+            subtasks: buildHierarchy(tasks, task.$id), // Assuming $id is the task ID field
+          }));
+      }
+      return buildHierarchy(state.tasks);
+    },
   },
 });